You can use a default or custom item template to customize list items.
A default template consists of a set of data source fields that the List automatically recognizes. These fields are listed in the items section. To use a default template for customization, add or remove the fields from data objects. Refer to the Default Templates article for more information.
If you want more customization options, implement a custom template and assign it to the itemTemplate property, as illustrated in this demo.
@model IEnumerable<DevExtreme.MVC.Demos.Models.ListProduct>
<div class="list-container">
@(Html.DevExtreme().List()
.Height("100%")
.DataSource(Model)
.DisplayExpr("Name")
.ItemTemplate(@<text>
<div class="product">
<img alt="<%- Name %>" src="<%- ImageSrc %>">
<div><%- Name %></div>
<div class="price"><%- formatCurrency(Price) %></div>
</div>
</text>)
)
</div>
<script>
function formatCurrency(value) {
return "$" + new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(value);
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ListController : Controller {
public ActionResult ItemTemplate() {
return View(SampleData.ListProducts);
}
}
}using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class ListProduct {
public int ID { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public int? CurrentInventory { get; set; }
public int Backorder { get; set; }
public int Manufacturing { get; set; }
public string Category { get; set; }
public string ImageSrc { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<ListProduct> ListProducts = new[] {
new ListProduct() {
ID = 1,
Name = "HD Video Player",
Price = 330,
CurrentInventory = 225,
Backorder = 0,
Manufacturing = 10,
Category = "Video Players",
ImageSrc = "../../Content/Images/ProductsLarge/1.png"
},
new ListProduct() {
ID = 3,
Name = "SuperPlasma 50",
Price = 2400,
CurrentInventory = 0,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/3.png"
},
new ListProduct() {
ID = 4,
Name = "SuperLED 50",
Price = 1600,
CurrentInventory = 77,
Backorder = 0,
Manufacturing = 55,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/4.png"
},
new ListProduct() {
ID = 5,
Name = "SuperLED 42",
Price = 1450,
CurrentInventory = 445,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/5.png"
},
new ListProduct() {
ID = 6,
Name = "SuperLCD 55",
Price = 1350,
CurrentInventory = 345,
Backorder = 0,
Manufacturing = 5,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/6.png"
},
new ListProduct() {
ID = 7,
Name = "SuperLCD 42",
Price = 1200,
CurrentInventory = 210,
Backorder = 0,
Manufacturing = 20,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/7.png"
},
new ListProduct() {
ID = 8,
Name = "SuperPlasma 65",
Price = 3500,
CurrentInventory = 0,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/8.png"
},
new ListProduct() {
ID = 9,
Name = "SuperLCD 70",
Price = 4000,
CurrentInventory = 95,
Backorder = 0,
Manufacturing = 5,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/9.png"
},
new ListProduct() {
ID = 10,
Name = "DesktopLED 21",
Price = 175,
CurrentInventory = null,
Backorder = 425,
Manufacturing = 75,
Category = "Monitors",
ImageSrc = "../../Content/Images/ProductsLarge/10.png"
},
new ListProduct() {
ID = 12,
Name = "DesktopLCD 21",
Price = 170,
CurrentInventory = 210,
Backorder = 0,
Manufacturing = 60,
Category = "Monitors",
ImageSrc = "../../Content/Images/ProductsLarge/12.png"
},
new ListProduct() {
ID = 13,
Name = "DesktopLCD 19",
Price = 160,
CurrentInventory = 150,
Backorder = 0,
Manufacturing = 210,
Category = "Monitors",
ImageSrc = "../../Content/Images/ProductsLarge/13.png"
},
new ListProduct() {
ID = 14,
Name = "Projector Plus",
Price = 550,
CurrentInventory = null,
Backorder = 55,
Manufacturing = 10,
Category = "Projectors",
ImageSrc = "../../Content/Images/ProductsLarge/14.png"
},
new ListProduct() {
ID = 15,
Name = "Projector PlusHD",
Price = 750,
CurrentInventory = 110,
Backorder = 0,
Manufacturing = 90,
Category = "Projectors",
ImageSrc = "../../Content/Images/ProductsLarge/15.png"
},
new ListProduct() {
ID = 17,
Name = "ExcelRemote IR",
Price = 150,
CurrentInventory = 650,
Backorder = 0,
Manufacturing = 190,
Category = "Automation",
ImageSrc = "../../Content/Images/ProductsLarge/17.png"
},
new ListProduct() {
ID = 18,
Name = "ExcelRemote BT",
Price = 180,
CurrentInventory = 310,
Backorder = 0,
Manufacturing = 0,
Category = "Automation",
ImageSrc = "../../Content/Images/ProductsLarge/18.png"
},
new ListProduct() {
ID = 19,
Name = "ExcelRemote IP",
Price = 200,
CurrentInventory = 0,
Backorder = 325,
Manufacturing = 225,
Category = "Automation",
ImageSrc = "../../Content/Images/ProductsLarge/19.png"
}
};
}
}
.demo-container {
height: 450px;
}
.list-container {
height: 100%;
}
.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;
}