Templates
The Telerik UI ListView for ASP.NET Core uses templates to visualize its data items in a consistent manner.
In order for the ListView to function seamlessly, defining its templates is mandatory.
Getting Started
To set the template, refer it when you initialize the ListView. The template displays the result that is set by the service.
@(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()
.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.
)
<kendo-listview name="productListView"
tag-name="div"
template-id="template"
style="height:350px;">
<scrollable enabled="true" />
<datasource type="DataSourceTagHelperType.Ajax">
<transport>
<read url="@Url.Action("Products_Read", "ListView")" />
</transport>
</datasource>
<pageable enabled="true" />
</kendo-listview>
<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>
Styling Alternate Items
Your project might require you to visually differentiate each alternating item in a ListView. For example, you might need to render each second item from the previous example in a slightly darker background, that is, banded rows. To achieve this behavior through the use of a template that you set, define the altTemplate property.
@(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.
.ClientAltTemplateId("altTemplate") // This template will be used for the alternating items in the ListView.
.Scrollable()
.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.
)
<kendo-listview name="productListView"
tag-name="div"
template-id="template"
alt-template-id="altTemplate"
style="height:350px;">
<scrollable enabled="true" />
<datasource type="DataSourceTagHelperType.Ajax">
<transport>
<read url="@Url.Action("Products_Read", "ListView")" />
</transport>
</datasource>
<pageable enabled="true" />
</kendo-listview>
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
</div>
</script>
<script type="text/x-kendo-tmpl" id="altTemplate">
<div class="product alt">
<img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
</div>
</script>