Selection
By default, the selection functionality of the Telerik UI ListView for ASP.NET MVC is disabled.
As of the 2022 R3 release, the
Changeevent will now be fired only when Selection/Deselection is performed.
Single Selection
The single selection functionality allows the user to select only one item at a time.
@(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 ListView.
.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.
.Scrollable()
.Selectable(ListViewSelectionMode.Single) // Set the selection mode to single.
.HtmlAttributes(new { style="height:350px;" })
.DataSource(dataSource => {
dataSource.Read(read => read.Action("Products_Read", "ListView"));
}) // The DataSource configuration. It will be used for paging.
.Pageable() // Enable paging.
)
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<h3>#=ProductName#</h3>
<dl>
<dt>Price:</dt>
<dd>#=kendo.toString(UnitPrice, "c")#</dd>
</dl>
</div>
</script>
Multiple Selection
The multiple selection functionality allows the user to select one or more items at a time.
@(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 ListView.
.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.
.Scrollable()
.Selectable(ListViewSelectionMode.Multiple) // Set selection mode to multiple
.HtmlAttributes(new { style="height:350px;" })
.DataSource(dataSource => {
dataSource.Read(read => read.Action("Products_Read", "ListView"));
}) // The DataSource configuration. It will be used for paging.
.Pageable() // Enable paging.
)
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<h3>#=ProductName#</h3>
<dl>
<dt>Price:</dt>
<dd>#=kendo.toString(UnitPrice, "c")#</dd>
</dl>
</div>
</script>