How to refresh the dropdown list in the Kendo Grid Editor

Question

I'm new using Kendo UI for JQuery,

I have a kendoGrid and I'm trying to edit the rows. I'm using a popup editor. One of the columns in the row is a dropdown list and this should be different for each row. I have written a method in my controller to actually fetch the new dropdown list based on the parameters passed. I'm not able to reload the dropdown list for each row. It is being executed only once.

Please find the code below.

    $("#test").kendoGrid({
                        dataSource: entriesDataSource,
                        pageable: true,
                        sortable: true,
                        selectable: "single row",
                        columns: [
                            {
                                field: "RequiredText",
                                title: "Required Text",
                                editor: singleSelectRequiredTextEditor
                            },
                                { command: ["edit"], title: " " },
                        ],
                        editable: "popup"
                    });
                };


    var singleSelectRequiredTextEditor = function (container, options) {
                    $('<input data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            suggest: true,
                            dataSource: getRequiredTextList,
                        });
                };

    var getRequiredTextList = new kendo.data.DataSource({
        transport: {
            read: {
                url: $.getActionUrl('GetRequiredTextList'),
                dataType: "json",
                data: function () {
                    return {
                        param1: sname,
                        param2: rname
                    };
                }
            }
        }
    });

Any help would be appreciated. Thanks.

Answer 1

You may want to catch the edit event on the grid to check if it is a dropdownlist then do a datasource refetch and trigger the dropdownlist to pop up. Example below:

$("#test").kendoGrid({
                        dataSource: entriesDataSource,
                        pageable: true,
                        sortable: true,
                        selectable: "single row",
                        columns: [
                            {
                                field: "RequiredText",
                                title: "Required Text",
                                editor: singleSelectRequiredTextEditor
                            },
                                { command: ["edit"], title: " " },
                        ],
                        editable: "popup",
                        edit: function(e){
                            var ddl = e.container.find('[data-role=dropdownlist]').data('kendoDropDownList');
                            if(ddl){ 
                                ddl.dataSource.read();
                                ddl.open(); 
                            }
                        }
                    });

When re-fetching the datasource of your dropdown, you may want to set the cache option to false. See example below:

var getRequiredTextList = new kendo.data.DataSource({
        transport: {
            read: {
                url: $.getActionUrl('GetRequiredTextList'),
                cache:false,
                dataType: "json",
                data: function () {
                    return {
                        param1: sname,
                        param2: rname
                    };
                }
            }
        }
    });