Posted on 3/3/2020 2:27:34 PM by Admin

Kendo ListView

List view is often used to showcase the data in more appealing way,like with images.

so we use kendo template with the ListView where template id goes into the ClientTemplateId field of ListView.

The DataSource specified in the ListView manages the kendo Template also meaning we don't need extra configuration for bindings in template or to show server side data in kendo Template.

The Kendo UI template offers us to create Html templates which can easily be merged with JavaScript data.

To show server side data in Kendo UI template we use templating syntax called as hash templates, like #:Data# . Meaning hash sign is used to mark the area which will be replaced with server side data after template gets executed.

Lets create two methods in Controller one which will return a Product list with its name ,price and Image.And other to simply return the view.

   public ActionResult GetProducts(DataSourceRequest req)
            List products = new List() { 
            new  Product(){Id=1,Name="product1",Price=2000,ImagePath="/Images/product.jpg"},
            new Product(){Id=1,Name="product2",Price=3000,ImagePath="/Images/product.jpg"},
            new Product(){Id=1,Name="product3",Price=4000,ImagePath="/Images/product.jpg"},
            new Product(){Id=1,Name="product4",Price=5000,ImagePath="/Images/product.jpg"},
            return Json(products.ToDataSourceResult(req),JsonRequestBehavior.AllowGet);

    public ActionResult ListViewShow()
            return View();

Now Take a kendo ListView and configure its DataSource and design a Kendo UI Template like below.


@(Html.Kendo().ListView() .Name("lstProduct") .TagName("div") .ClientTemplateId("productTemplate") .DataSource(dataSource => { dataSource.Read(read => read.Action("GetProducts", "Home")); dataSource.PageSize(4); }) .Pageable() )

If You need some Styling then feel free to use CSS.Run the application and you will get below result.

Kendo ListView
Kendo UI ListView