New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Cascade DropDownLists with Enabled Virtualization
Environment
Product | DropDownList for Telerik UI for ASP.NET Core |
Product Version | Created with version 2024.4.1112 |
Description
How can I implement cascading ASP.NET Core DropDownLists with enabled virtualization?
Solution
To implement cascading DropDownLists and still virtualize the data, you must use a custom DataSource configuration. It enables the usage of the DataSourceRequest
and ToDataSourceResult
methods, which internally parse all filter and page expression information, and apply it directly to the data.
Razor
@(Html.Kendo().DropDownList()
.Name("Category")
.BindTo(ViewBag.Categories)
.DataTextField("CategoryName")
.DataValueField("CategoryId")
)
<h5>Type "4" in the filter input</h5>
@(Html.Kendo().DropDownList()
.Name("SelectEmployeeId")
.CascadeFrom("Category")
.DataValueField("Id")
.DataTextField("Name")
.Filter("contains")
.Virtual(v => v.ValueMapper("SelectEmployeeValueMapper").ItemHeight(26))
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.Type("aspnetmvc-ajax")
.Transport(transport => transport.Read(r => r.Action("GetVirtualData", "Home")))
.Schema(schema =>
{
schema.Data("Data").Total("Total");
});
})
)
To see the complete example, refer to the ASP.NET MVC project on how to cascade DropDownLists with enabled virtualization. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.