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

Edit Grids Using ComboBoxes with Remote Binding and Filtering

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I use a ComboBox component that binds to remote data and uses server-side filtering as an editor in a Grid?

Solution

The following example demonstrates how to implement a custom MVVM binding and disable the default value binding of the ComboBox editor.

The approach prevents the initial data binding when the selected value is set. It can also be used to avoid the default value binding behavior when the ComboBox binds to a large amount of data.

The example relies on the following key steps:

Include the following JavaScript logic before the Grid's declaration:

    // Create a custom binder that works only with Objects and honours "autoBind:false" state.
    kendo.data.binders.widget.defferedValue = kendo.data.Binder.extend({
        init: function (widget, bindings, options) {
            kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
            this.widget = widget;
            this._change = $.proxy(this.change, this);
            this.widget.bind("change", this._change);
        },
        refresh: function () {
            if (!this._initChange) {
                var widget = this.widget;
                var value = this.bindings.defferedValue.get();

                if (value) {
                    if (widget.options.autoBind === false) {
                        //Bind the widget with single item if deffered binding is used
                        widget.dataSource.data([value]);
                        widget.value(value[widget.options.dataValueField]);
                    } else {
                        //set widget value directly
                        this.widget.value(value[widget.options.dataValueField]);
                    }
                }
            }
        },
        change: function () {
            this._initChange = true;
            this.bindings.defferedValue.set(this.widget.dataItem() || null);
            this._initChange = false;
        },
        destroy: function () {
            this.widget.unbind("change", this._change);
        }
    });

Define the Grid and specify a custom editor template for the **Category column.

Razor

columns.Bound(p => p.Category)
.ClientTemplate("#: data.Category ? data.Category.CategoryName : '[None]' #")
.EditorTemplateName("ComboBoxLookup")
.Filterable(false)
.Sortable(false)
.Width(200);

Create a View with name ComboBoxLookup in the ~/Views/Shared/EditorTemplates/ folder that contains the ComobBox editor:

Razor

@using Kendo.Mvc.UI
@model Telerik.Examples.Mvc.Areas.GridEditingWithComboBoxServerFiltering.Models.Category

@(Html.Kendo().ComboBoxFor(m => m)
    // Use the "data-skip" attribute to prevent the default value binding and add the "data-bind" attribute for the custom binder
    .HtmlAttributes(new { data_skip = "true", data_bind = "defferedValue: Category" })
    .Placeholder("Select a category")
    .DataSource(source =>
    {
        source.Read("_GetCategories", "Home")
                .ServerFiltering();
    })
    .MinLength(3)
    .AutoBind(false)
    .Filter(FilterType.Contains)
    .DataValueField("CategoryID")
    .DataTextField("CategoryName")
)

To review the complete example, refer to the project on how to use ComboBoxes with remote binding and server filtering as editors in the Grid.

Edit Grids Using ComboBoxes with Remote Binding and Filtering

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also