New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Cascade DropDownLists with Enabled Virtualization

Environment

ProductDropDownList for Telerik UI for ASP.NET Core
Product VersionCreated 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.

More ASP.NET Core DropDownList Resources

See Also