Edit this page

ListView HtmlHelper Overview

The ListView HtmlHelper extension is a server-side wrapper for the Kendo UI ListView widget.

Getting Started

Setup

Below are listed the steps for you to follow when configuring the Kendo UI ListView.

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.

  2. Create a new action method and pass the Products table as the model.

    Example
        public ActionResult Index()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
    
            return View(northwind.Products);
        }
    
            public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
        {
                  NorthwindDataContext northwind = new NorthwindDataContext();
    
            return Json(northwind.Products.ToDataSourceResult(request));
        }
    
  3. Make your view strongly typed.

    Example
    
            <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
               Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Product>>" %>
    
    
            @model IEnumerable<MvcApplication1.Models.Product>
    
  4. Add the ListView wrapper.

    Example
    
                <script type="text/x-kendo-tmpl" id="template">
                    <div class="product">
                        <img src="@Url.Content("~/content/web/foods/")#=ProductID#.jpg" alt="#=ProductName# image" />
                        <h3>#=ProductName#</h3>
                        <dl>
                            <dt>Price:</dt>
                            <dd>#=kendo.toString(UnitPrice, "c")#</dd>
                        </dl>
                    </div>
                  </script>
    
    
            <%: Html.Kendo().ListView(Model) //The ListView will be initially bound to the Model which is the Products table.
                      .Name("productListView") //The name of the ListView is mandatory. It specifies the "id" attribute of the widget.
                    .TagName("div") //The tag name of the ListView is mandatory. It specifies the element which wraps all ListView items.
                      .ClientTemplateId("template") //This template will be used for rendering the ListView items.
                    .DataSource(dataSource => {
                            dataSource.Read(read => read.Action("Products_Read", "ListView"));
                  }) //DataSource configuration. It will be used on paging.
                      .Pageable() //Enable paging.
            %>
    
    
            @(Html.Kendo().ListView(Model) //The ListView will be initially bound to the Model which is the Products table.
                      .Name("productListView") //The name of the ListView is mandatory. It specifies the "id" attribute of the widget.
                    .TagName("div") //The tag name of the ListView is mandatory. It specifies the element which wraps all ListView items.
                      .ClientTemplateId("template") //This template will be used for rendering the ListView items.
                    .DataSource(dataSource => {
                            dataSource.Read(read => read.Action("Products_Read", "ListView"));
                  }) //DataSource configuration. It will be used on paging.
                      .Pageable() //Enable paging.
            )
    

Event Handling

You can subscribe to all ListView events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example

        <%: Html.Kendo().ListView<ProductViewModel>()
                .Name("listView")
                .TagName("div")
                .ClientTemplateId("template")
                .DataSource(dataSource => {
                    dataSource.Read(read => read.Action("Products_Read", "ListView"));
                })
                .Events(e => e
                    .DataBound("productListView_dataBound")
                    .Change("productListView_change")
                )
        %>
        <script>
        function productListView_dataBound() {
            //Handle the dataBound event.
        }

        function productListView_change() {
            //Handle the change event.
        }
        </script>

        @(Html.Kendo().ListView<ProductViewModel>()
                .Name("listView")
                .TagName("div")
                .ClientTemplateId("template")
                .DataSource(dataSource => {
                    dataSource.Read(read => read.Action("Products_Read", "ListView"));
                })
                .Events(e => e
                    .DataBound("productListView_dataBound")
                    .Change("productListView_change")
                )
        )
        <script>
        function productListView_dataBound() {
            //Handle the dataBound event.
        }

        function productListView_change() {
            //Handle the change event.
        }
        </script>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example

        @(Html.Kendo().ListView<ProductViewModel>()
                .Name("listView")
                .TagName("div")
                .ClientTemplateId("template")
                .DataSource(dataSource => {
                    dataSource.Read(read => read.Action("Products_Read", "ListView"));
                })
                .Events(e => e
                      .DataBound(@<text>
                        function() {
                            //Handle the dataBound event inline.
                        }
                      </text>)
                      .Change(@<text>
                        function() {
                            //Handle the change event inline.
                        }
                        </text>)
                  )
        )

Reference

Existing Instances

To reference an existing Kendo UI ListView instance,. use the jQuery.data() configuration option. Once a reference is established, use the ListView API to control its behavior.

Example
    //Put this after your Kendo UI ListView for ASP.NET MVC declaration.
    <script>
    $(function() {
        //Notice that the Name() of the ListView is used to get its client-side instance.
        var listView = $("#productGrid").data("kendoListView");
    });
    </script>

See Also