New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Binding a ListView in a TabStrip with Telerik UI for ASP.NET MVC

Updated on Oct 28, 2026

Environment

Product	Telerik UI for ASP.NET MVC Grid, ListView, and TabStrip
Progress Telerik UI for ASP.NET MVC version	2021.2.616

Description

When a Grid client detail template contains a TabStrip and a ListView, the ListView may not bind when declared as a TagHelper.

The nested Kendo template can prevent the ListView from completing its data request in this configuration. This article shows how to initialize the ListView after the Grid detail row renders. It also shows the equivalent HtmlHelper configuration.

Solution

Using HtmlHelpers

HtmlHelpers can render the ListView configuration directly in the client template. Call ToClientTemplate() on both the nested ListView and the TabStrip.

HtmlHelper

@(Html.Kendo().TabStrip()
    .Name("tabStrip_#=CategoryID#")
    .Items(items =>
    {
        items.Add()
            .Text("Products ListView")
            .Content(@<text>
                @(Html.Kendo().ListView<Product>()
                    .Name("productsListView_#=CategoryID#")
                    .TagName("div")
                    .ClientTemplateId("product-listview-item-template")
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                        .Model(model => model.Id(product => product.ProductID))
                        .Read(read => read.Url(
                            Url.Action("ProductsListView", "Home") +
                            "?categoryId=#=CategoryID#"
                        ))
                    )
                    .Pageable()
                    .ToClientTemplate()
                )
            </text>);
    })
    .ToClientTemplate()
)

Key Points

When using HtmlHelpers inside a client template, call ToClientTemplate() on each nested helper.
Use a data-* attribute to pass dynamic values such as CategoryID to the ListView initialization code.
When using the jQuery ListView API, configure schema.data and schema.total to match the server response.