Local Binding

When configured for local binding, the ListView for ASP.NET Core will serialize the data as part of its data source and will perform the majority of its operations on the client-side such as:

• Filtering
• Sorting
• Paging

This binding approach is beneficial if read-only data needs to be employed in the UI.

For a runnable example, refer to the demo on local binding of the ListView.

To configure the ListView for ASP.NET Core to do local binding:

1. Define a model class or use an existing one from your application.

       public class EmployeeViewModel
       {
           public int EmployeeID
           {
               get;
               set;
           }
   
           [Required]
           public string FirstName
           {
               get;
               set;
           }
   
           [Required]
           public string LastName
           {
               get;
               set;
           }
   
           public string Title
           {
               get;
               set;
           }
   
   
           [Required]        
           public string Notes
           {
               get;
               set;
           }
       }
   

2. Open the HomeController.cs and return an IEnumerable of the model type with the View. This is the View() which holds the ListView definition.

       public ActionResult Index()
       {
           // Returns a collection of EmployeeViewModels.
           var employees = Enumerable.Range(1, 9)
               .Select(new EmployeeViewModel{
                   EmployeeID = i,
                   FirstName = "FirstName" + i,
                   LastName = "LastName" + i,
                   Title = i % 2 == 0 ? "Manager": "CEO",
                   Notes = i % 2 == 0 ? "Manager at your service": "CEO at your service"
               }); // For the purposes of demonstration, you can mock the data, and copy and paste this snippet.
   
           return View(employees);
       }
   

3. In the Index.cshtml view, configure the ListView to accept the model in its constructor and set ServerOperations(false).

       @model IEnumerable<Kendo.Mvc.Examples.Models.EmployeeViewModel>
   
       <script type="text/x-kendo-tmpl" id="template">
           <div class="employee">
                <div class="details">
                    <h2>#=FirstName# #=LastName#</h2>
                    <p>#=Title#</p>
                </div>
                <div class='bio'>
                  #=Notes#
                </div>
           </div>
       </script>
   
       @(Html.Kendo().ListView(Model)
           .Name("listView")
           .TagName("div")
           .ClientTemplateId("template")
           .DataSource(dataSource => dataSource
               .Ajax()
               .ServerOperation(false)
               .PageSize(3)
           )
           .Pageable()
       )
   

       @addTagHelper *, Kendo.Mvc
       @model IEnumerable<Kendo.Mvc.Examples.Models.EmployeeViewModel>
   
       <script type="text/x-kendo-tmpl" id="template">
           <div class="employee">
                <div class="details">
                    <h2>#=FirstName# #=LastName#</h2>
                    <p>#=Title#</p>
                </div>
                <div class='bio'>
                  #=Notes#
                </div>
           </div>
       </script>
   
       <kendo-listview name="listView"
                       tag-name="div"
                       template-id="template">
           <datasource type="DataSourceTagHelperType.Ajax" page-size="3" server-operation="false" data="@Model">
           </datasource>
           <pageable enabled="true" />
       </kendo-listview>
   

See Also

• Knowledge Base Section
• Server-Side API