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");
        });
    })
)

Razor

@addTagHelper *, Kendo.Mvc

<kendo-dropdownlist name="Category"
    datatextfield="CategoryName"
    datavaluefield="CategoryId"
    bind-to="ViewBag.Categories">
</kendo-dropdownlist>

<h5>Type "4" in the filter input</h5>

<kendo-dropdownlist name="SelectEmployeeId" cascade-from="category"
    datatextfield="Name"
    datavaluefield="Id"
    filter="FilterType.Contains">
    <datasource type="DataSourceTagHelperType.Custom" 
        page-size="80" 
        server-paging="true" 
        server-filtering="true">
        <schema data="Data" total="Total"></schema>
        <transport>
            <read url="@Url.Action("GetVirtualData", "Home")"/>
        </transport>
    </datasource>
    <virtual item-height="26" value-mapper="SelectEmployeeValueMapper" />
</kendo-dropdownlist>

JavaScript

<script>
    // The valueMapper function is called when you want to select a data item that is not present in the DataSource.
    function SelectEmployeeValueMapper(options) {
        $.ajax({
            url: "@Url.Action("EmployeeValueMapper", "Home")",
            data: {
                value: options.value || 0,
                status: 1,
                excludeId: -1
            },
            success: function (data) {
                options.success(data);
            }
        });
    }
</script>

C#

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var categories = Enumerable.Range(1, 5).Select(i => {
            return new Category
            {
                CategoryId = i,
                CategoryName = "Category " + i.ToString()
            };
        });
        ViewBag.Categories = categories;
        return View();
    }

    public JsonResult GetVirtualData([DataSourceRequest] DataSourceRequest request)
    {
        var data = GetEmployee();
        return Json(data.ToDataSourceResult(request));
    }

    private static List<Employee> GetEmployee()
    {
        var rand = new Random();

        var data = Enumerable.Range(0, 1000).Select(i => {
            return new Employee
            {
                Id = i,
                CategoryId = rand.Next(1, 5),
                Name = "Emp" + i.ToString()
            };
        }).ToList();

        return data;
    }
    
    public JsonResult EmployeeValueMapper(int value)
    {
        var dataItemIndex = -1;
        var data = GetEmployee();
        if (value != 0)
        {
            var index = 0;
            foreach (var vm in data)
            {
                if (vm.Id == value)
                {
                    dataItemIndex = index;
                    break;
                }

                index += 1;
            }
        }
        return Json(dataItemIndex);
    }
}

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

• ASP.NET Core DropDownList Documentation

• ASP.NET Core DropDownList Demos

• ASP.NET Core DropDownList Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the DropDownList for ASP.NET Core

• Server-Side API Reference of the DropDownList for ASP.NET Core

• Server-Side TagHelper API Reference of the DropDownList for ASP.NET Core

• Telerik UI for ASP.NET Core Knowledge Base