Implementing Virtualization for the Foreign Key Column Editor in the Grid
Environment
| Product | Grid for Progress® Telerik® UI for ASP.NET MVC |
| Created with Product Version | 2019.1.220 |
Description
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?
Solution
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
<script>
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) {
indices.push(j);
}
}
}
options.success(indices);
}
function convertValues(value) {
var data = [];
value = $.isArray(value) ? value : [value];
for (var idx = 0; idx < value.length; idx++) {
data.push(value[idx]);
}
return data;
}
</script>
@(Html.Kendo().ComboBoxFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
.Virtual(v => v.ValueMapper("valueMapper"))
)