Kendo ListView

by Sachin Singh


Posted on Tuesday, 03 March 2020

Tags: ListView in Kendo UI Kendo UI ListView configuration Show data in Kendo UI ListView with Asp.Net MVC

We often need to display a list of data in our Asp.Net MVC application, for this, we more often use Html table and we loop through the collection using "foreach" block and create table rows, This is good when we have to display data at Admin Side because an Admin wants an overview of some categories, but we rarely display List of data in tabular format to users, we often keep the UI interactive and appealing, if we have to display a list of products with images then we will never display them on a table, we will create some cards or template which looks appealing to users, This is where we use Kendo ListView. Kendo ListView is often used to showcase the data more appealingly, 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 the template or to show server-side data in kendo Template.

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

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

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


   public ActionResult GetProducts(DataSourceRequest req)
        {
            List<product> products = new List<product>() { 
            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.


  <script type="text/x-kendo-tmpl" id="productTemplate">
  <div class="product">
  <img src="#:ImagePath#" alt="#:Name# image" />
  <h3>#:Name#</h3>
  <p>#:kendo.toString(Price, "c")#</p>
  </div>
  </script>


  
@(Html.Kendo().ListView<KendoUIApp1.Models.Product>() .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