Select an item in DropdownList control present inside a custom editor feild of a grid.

[Bibhudutta]

Hi,

I have a grid in which i have a column, for which i have a custom editor defined, in edit mode it shows a drop down list in the column. The dropdownlist is getting remote data and its rendering correctly, but I am unable to select an item after the dropdownlist is getting data binded. Basically the item to be default selected is different for different rows.

This is my code :

$("#grid").kendoGrid({

    dataSource: dataSource,

    filterable: true,

    sortable: {

        mode: "multiple",

        allowUnsort: true

    },

    height: 400,

    pageable: true,

    selectable: "row",

    resizable: true,

    reorderable: true,

    columns: [

                        { field: "DocumentName", title: "Document Name", width: "150px" },

                        { field: "DocumentDescription", title: "Description", width: "150px" },

                        { field: "StateId", title: "State", width: "120px", editor: categoryDropDownEditor },

                        { field: "Policy_CertificateNumber", title: "Policy/Certificate Number", width: "170px" },

                        { field: "Amount", title: "Amount", format: "{0:c}", width: "110px" },

                        { field: "ExpiryDate", title: "Expiry Date", width: "110px", template: '#= kendo.toString(ExpiryDate,"M/d/yyyy")#' },

                        { command: [{ id: "View", name: "View", click: showDetails, template: "<a class='k-button k-button-icontext k-grid-View' href='' style='min-width:7px;'><input type='image' src='../../Content/Images/document.png' text='''/></a>" },

                                    { id: "edit", name: "edit", template: "<a class='k-button k-grid-edit' href='' style='min-width:7px;'><span class='k-icon k-edit'></span></a>"}],

                            title: " ", width: "92px"

                        }],

    editable: "inline"

});

And this is my custom editor code :

function categoryDropDownEditor(container, options) {

    $('<input data-text-field="StateName" data-value-field="StateId" data-bind="value:' + options.field + '"/>')

                        .appendTo(container)

                        .kendoDropDownList({

                            autoBind: false,

                            dataTextField: "StateName",

                            dataValueField: "StateId",

                            dataSource: {

                                type: "json",

                                transport: {

                                    read: function (options) {

                                        $.ajax({

                                            type: "GET",

                                            url: "Documents.aspx/GetStates",

                                            contentType: "application/json; charset=utf-8",

                                            dataType: "json",

                                            data: options.data,

                                            success: function (result) {

                                                var d = $.parseJSON(result.d);

                                                options.success(d);

                                            }

                                        });

                                    }

                                }

                            }

                        });                       

}

So what i want to achieve is that, after dropdownlist databind, it should an item out of it, and this item to be selected is different for each row.

Please help.

[Alexander Valchev]

Hi Bibhudutta,

The description which you provided is a bit unclear. By default the DropDown editor will display the item which corresponds to the value from currently edited grid dataItem. You can test the behaviour in this demo.

Could you please specify what do you mean by "after dropdownlist databind, it should an item out of it, and this item to be selected is different for each row."? Are you trying to select an item via JavaScript? The provided code snippet does not contain such logic.

Please clarify your question and I will do my best to help you solve the case.
Thank you in advance.

Regards,
Alexander Valchev
the Telerik team