Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Item Template
Documentation
This demo shows how you can apply a custom template to items in the List widget.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(function(){
var formatCurrency = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
maximumFractionDigits: 0
}).format;
$("#listWidget").dxList({
dataSource: products,
height: "100%",
itemTemplate: function(data, index) {
var result = $("<div>").addClass("product");
$("<img>").attr("src", data.ImageSrc).appendTo(result);
$("<div>").text(data.Name).appendTo(result);
$("<div>").addClass("price")
.html(formatCurrency(data.Price)).appendTo(result);
return result;
}
}).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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.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>
</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"
}];