KendoUI Grid: Custom dropdown provider shows no text in view mode

Question

I’m using Kendo UI v2016.3.1118 for my web application.

I use the editing capabilities (mode: “incell”) in the Kendo UI grid. I have created a grid with editing textbox, date, and numeric values and it works fine. What I want to do now is to apply editing for columns with dropdown values.

I’ve integrated a custom dropdownprovider like described in Telerik sample (https://demos.telerik.com/kendo-ui/grid/editing-custom, demo: https://dojo.telerik.com/UjAGU).

That works so far quite well. However, after I change a value in the DropDown and the cell loses focus, the display switches back to the view mode. It only appears a little red indicator in the upper left of the cell, indicating the value has been changed (cell is “dirty”). Except of the red indicator the cell is empty (no value is shown in cell).

In my case I’ve only numeric (foreign key) values for the columns of type dropdown foreign in my datasource.

My datasource looks similar to this:

{
    Product ID: 1,
    ProductName: "Chai",
    Category: 1
}

Datasource in sample provided by Telerik:

{
    Product ID: 1,
    ProductName: "Chai",
    Category: {
        CategoryID: 1,
        CategoryName: "Beverages",
        Description: "Soft drinks, coffees, teas, berries, and ales"
    }
}

I've tried to set the cell value to the selected text in the Select-Event of the dropdown. Nevertheless there is still no text shown for the dropdown in view-mode. Unfortunately, I cannot find a suitable event. The event closeCell is never thrown in my constellation.

Any ideas out there? Regards Stefan

why not using mode: “inline” instead of "incell"? In cell is used for batch edit. — CMartins

Joe Glover Joe Glover · Accepted Answer · 2018-01-25T17:04:04

I think your issue probably stems from the difference between what is returned by your dropDownList when you make a selection (i.e. an entire object, complete with text and value), and what your grid model object requires (just the value).

Assuming you have a function to create the editor like the one in the sample you referenced, can you please try altering it to set the valuePrimitive property to true?

            function categoryDropDownEditor(container, options) {
                $('<input required name="' + options.field + '"/>')
                    .appendTo(container)
                    .kendoDropDownList({
                        valuePrimitive: true,
                        autoBind: false,
                        dataTextField: "CategoryName",
                        dataValueField: "CategoryID",
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                            }
                        }
                    });
            }

According to the documentation:

If set to true, the View-Model field will be updated with the selected item value field. If set to false, the View-Model field will be updated with the selected item.

Hopefully that will resolve your issue.

KendoUI Grid: Custom dropdown provider shows no text in view mode

1 Answers