Row-specific DropDownList column

[Kaan]

Hello,

I am evaluating Kendo UI for ASP.NET Core for our team.

We need to be able to render different editors in the same column. I have attached a screenshot with an example grid:

1. Wireless Keyboard: The parameter column is empty and not editable. There is only one single version of the keyboard.
2. T-Shirt: The parameter column has a DropDownList with options S (Id 1), M (Id 2), L (Id 3), XL (Id 4).
3. LED Lightbulb: The parameter column has a DropDownList with options 25 Watts and 40 Watts.

When the user changes the option in a DropDownList, data is send to the server, and an updated row is returned back to the client (for example, with a different price).

 

Is it possible to implement this grid with Kendo UI? Could you provide a working example for us?

 

Best regards,

Kaan

[Georgi]

Hi Kaan,

Generally speaking, the necessity of having a different editor based on the value of the record, might be a sign that you are storing different types of data in the same field - which is a bad practice.

Nevertheless, you could achieve it by passing a js handler to the column.editor configuration as demonstrated in the following article:

• https://docs.telerik.com/kendo-ui/knowledge-base/grid-different-editor-based-on-column-value

However, the server wrappers do not have a column.editor configuration. Therefore you could either, set the editor using setOptions within the document ready event handler or switch to the jQuery grid.

e.g.

$(function () {
    var grid = $('#grid').data('kendoGrid');
    var options = grid.options;

    options.columns[columnIndex].editor = myEditor;

    grid.setOptions(options);
})

Regards,
Georgi
Progress Telerik