How to add a (Edit-)Combobox to a Grid (with TagHelper)

[Lars]

Hello,

we want to add a Grid with taghelpers to our razor-pages application.

One Column should be editable (incell) as a Combobox.
Another Column should be should editable as a MultiSelect(Combobox).

Unfortunatelly I could not find any documentation on how to add something like that with taghelpers.

It would be appreciated if you could give me an example on how to do that.

Best regards,

Lars

[Georgi]

Hi Lars,

You can find an example how to create a custom editor for a grid configured via the tag helpers in our Overview article:

• https://docs.telerik.com/aspnet-core/tag-helpers/data-management/grid/overview#custom-editors

Basically, you have to specify the name of the JS handler which initializes the custom editor:

<column field="ProductName" editor="productNameEditor" title="Product Name" width="240" />

And add the handler:

function productNameEditor(container, options) {
    var grid = $('#grid').data('kendoGrid');
    $('<input required name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({ // drop down or combobox
            dataSource: {
                data: grid.dataSource.data().map(function (x) {
                    return x.ProductName;
                }).filter(function (value,index, self) {
                    return self.indexOf(value) === index;
                })
            }
        });
}

Regards,
Georgi
Progress Telerik

[Uwe]

Hi Georgi,

do we have to use JavaScript? Or is it possible to write a Taghelper-Kendo Control in C# and bind this to the editor?

Thx in advance

[Georgi]

Hello Uwe,

The `editor` setting of the column accepts string which is the name of the js handler which creates the editor widget. Thus, you have to use JavaScript initialization. Nevertheless, if you would like to stick to strongly typed API I can suggest you to switch to the Html helpers where you can create server editors.

Regards,
Georgi
Progress Telerik