ListView HtmlHelper Overview

The Telerik UI ListView HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI ListView widget.

The ListView enables you to display a custom layout of data-bound items. The ListView is ideally suited for displaying a list of items in a consistent manner. You can see commonplace examples of its use in the design structures of the Internet, search engine results, tweets from Twitter, Facebook updates, inbox items in Gmail, card lists in Trello, and so on.

The ListView enables you to control the display of data. It does not provide a default rendering of data-bound items. Instead, it relies on templates to define the way a list of items is displayed, including alternating items and items that are in the process of editing.

Telerik UI for ASP.NET MVC Ninja image

The ListView is part of Telerik UI for ASP.NET MVC, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the ListView

The following example demonstrates how to define the ListView by using the ListView HtmlHelper.

  • The TagName of the ListView for ASP.NET MVC is used to create an element to contain all ListView items once the ListView is bound.
  • The ClientTemplateId is mandatory for the ListView. It contains the id of the script element which accommodates the item template.
    <script type="text/x-kendo-tmpl" id="template">
        <div class="product">
                <dd>#=kendo.toString(UnitPrice, "c")#</dd>
    @(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"));
        }) // The DataSource configuration. It will be used on paging.
        .Pageable() // Enable paging.

Basic Configuration

The following example demonstrates the basic configuration for the ListView HtmlHelper.

    <script type="text/x-kendo-tmpl" id="template">
        <div class="product-view k-widget">
                <dt>Product Name</dt>
                <dt>Unit Price</dt>
                <dd>#:kendo.toString(UnitPrice, "c")#</dd>
                <dt>Units In Stock</dt>
            <div class="edit-buttons">
                <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-i-edit"></span></a>
                <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-i-delete"></span></a>
        .DataSource(dataSource => dataSource
            .Model(model => model.Id("ProductID"))
            .Read(read => read.Action("Editing_Read", "ListView"))
            .Update(update => update.Action("Editing_Update", "ListView"))
            .Destroy(destroy => destroy.Action("Editing_Destroy", "ListView"))

Functionality and Features

See Also

In this article
Not finding the help you need? Improve this article