Your search did not match any results.
List

Item 3rd Party Engine Template

API Reference
The dxList widget supports use of custom item templates and offers multiple methods for defining template markup. In this example, the Underscore template engine is used and a custom item template is factored out into a separate element with a specified name (see the Markup demo tab). To set this template for a list item, the template name is assigned to the list's itemTemplate configuration option. To enforce use of the Underscore template engine, the DevExpress.ui.setTemplateEngine function is called with ‘underscore’ passed as a parameter.

jQuery

Copy to Codepen
Apply
Reset
$(function(){ DevExpress.ui.setTemplateEngine("underscore"); var listWidget = $("#listWidget").dxList({ dataSource: products, height: "100%", itemTemplate: $("#item-template") }).dxList("instance"); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> <script src="js/underscore-1.5.1.min.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="list-container"> <div id="listWidget"></div> </div> <script type="text/html" id="item-template"> <div class="product"> <img src="<%= ImageSrc %>" /> <div> <%= Name %> </div> <div class="price"> <%= Globalize.formatCurrency(Price, "USD", { maximumFractionDigits: 0 }) %> </div> </div> </script> </div> </body> </html>
.list-container { min-height: 440px; height: auto; position: absolute; top: 0; bottom: 0; } .product { height: 65px; } .product > img { height: 100%; width: 95px; float: left; } .product > div { padding-left: 10px; vertical-align: top; line-height: 65px; font-size: 15px; float: left; } .product > div.price { float: right; font-size: 18px; }
var products = [{ "ID": 1, "Name": "HD Video Player", "Price": 330, "Current_Inventory": 225, "Backorder": 0, "Manufacturing": 10, "Category": "Video Players", "ImageSrc": "../../../../images/products/1.png" }, { "ID": 3, "Name": "SuperPlasma 50", "Price": 2400, "Current_Inventory": 0, "Backorder": 0, "Manufacturing": 0, "Category": "Televisions", "ImageSrc": "../../../../images/products/3.png" }, { "ID": 4, "Name": "SuperLED 50", "Price": 1600, "Current_Inventory": 77, "Backorder": 0, "Manufacturing": 55, "Category": "Televisions", "ImageSrc": "../../../../images/products/4.png" }, { "ID": 5, "Name": "SuperLED 42", "Price": 1450, "Current_Inventory": 445, "Backorder": 0, "Manufacturing": 0, "Category": "Televisions", "ImageSrc": "../../../../images/products/5.png" }, { "ID": 6, "Name": "SuperLCD 55", "Price": 1350, "Current_Inventory": 345, "Backorder": 0, "Manufacturing": 5, "Category": "Televisions", "ImageSrc": "../../../../images/products/6.png" }, { "ID": 7, "Name": "SuperLCD 42", "Price": 1200, "Current_Inventory": 210, "Backorder": 0, "Manufacturing": 20, "Category": "Televisions", "ImageSrc": "../../../../images/products/7.png" }, { "ID": 8, "Name": "SuperPlasma 65", "Price": 3500, "Current_Inventory": 0, "Backorder": 0, "Manufacturing": 0, "Category": "Televisions", "ImageSrc": "../../../../images/products/8.png" }, { "ID": 9, "Name": "SuperLCD 70", "Price": 4000, "Current_Inventory": 95, "Backorder": 0, "Manufacturing": 5, "Category": "Televisions", "ImageSrc": "../../../../images/products/9.png" }, { "ID": 10, "Name": "DesktopLED 21", "Price": 175, "Current_Inventory": null, "Backorder": 425, "Manufacturing": 75, "Category": "Monitors", "ImageSrc": "../../../../images/products/10.png" }, { "ID": 12, "Name": "DesktopLCD 21", "Price": 170, "Current_Inventory": 210, "Backorder": 0, "Manufacturing": 60, "Category": "Monitors", "ImageSrc": "../../../../images/products/12.png" }, { "ID": 13, "Name": "DesktopLCD 19", "Price": 160, "Current_Inventory": 150, "Backorder": 0, "Manufacturing": 210, "Category": "Monitors", "ImageSrc": "../../../../images/products/13.png" }, { "ID": 14, "Name": "Projector Plus", "Price": 550, "Current_Inventory": null, "Backorder": 55, "Manufacturing": 10, "Category": "Projectors", "ImageSrc": "../../../../images/products/14.png" }, { "ID": 15, "Name": "Projector PlusHD", "Price": 750, "Current_Inventory": 110, "Backorder": 0, "Manufacturing": 90, "Category": "Projectors", "ImageSrc": "../../../../images/products/15.png" }, { "ID": 17, "Name": "ExcelRemote IR", "Price": 150, "Current_Inventory": 650, "Backorder": 0, "Manufacturing": 190, "Category": "Automation", "ImageSrc": "../../../../images/products/17.png" }, { "ID": 18, "Name": "ExcelRemote BT", "Price": 180, "Current_Inventory": 310, "Backorder": 0, "Manufacturing": 0, "Category": "Automation", "ImageSrc": "../../../../images/products/18.png" }, { "ID": 19, "Name": "ExcelRemote IP", "Price": 200, "Current_Inventory": 0, "Backorder": 325, "Manufacturing": 225, "Category": "Automation", "ImageSrc": "../../../../images/products/19.png" }];