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

Implementing Virtualization for the Foreign Key Column Editor in the Grid


Product Grid for Progress® Telerik® UI for ASP.NET MVC
Created with Product Version 2019.1.220


I need to implement the virtualization for the Foreign Key column used in the Telerik UI for ASP.NET MVC Grid.

As the list is big (around 10000 records), it takes time to bind. So planning to implement the drop-down list virtualization for the list. How can I virtualize the Foreign Key column list that is already serialized in the ViewData?


By passing the ViewData["departments"] collection in the Foreign Key column, you already have the data serialized on the client. The built-in editor template that comes from our extensions uses this collection to render a DropDownList.

The virtual ComboBox and DropDownList usually have server operations, however this will not be necessary because you already have the data on the client. The only thing missing is a ValueMapper():

    // GridForeignKey.cshtml
    @model object

        function valueMapper(options) {
            var values = convertValues(options.value);
            var selectList =  @(Html.Raw(Json.Encode((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName    ("") + "_Data"])));
            var indices = [];

            if (values && values.length > 0) {
                for (var j = 0; j < selectList.length; j++) {
                    var selectListItem = selectList[j];
                    if (values.indexOf(kendo.parseInt(selectListItem.Value)) > -1) {


        function convertValues(value) {
            var data = [];

            value = $.isArray(value) ? value : [value];

            for (var idx = 0; idx < value.length; idx++) {

            return data;
    @(Html.Kendo().ComboBoxFor(m => m)
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
        .Virtual(v => v.ValueMapper("valueMapper"))

More ASP.NET MVC Grid Resources

See Also

In this article