Inline editing using dynamic dropdowns in kendo grid

Question

I've been trying to make the Specification Attributes in nopCommerce editable inline using kendo grid.

If you're not a nop person, just think of an existing kendo editing grid which has one non-editable column and I want to make that column editable using dropdowns. Because of the nature of the data I'm editing, the dropdown options will be different for each row.

The current state is that the column displays correctly when not in edit mode. When in edit mode it displays the correct values, but no value is ever selected. Updating does not seem to post back to the server, and sometimes (depending upon what I try) causes javascript errors deep inside kendo.

I know next to nothing about kendo, and need to get updating with this dropdown working. Below are some code fragments (the whole thing is too long):

grid = $("#specificationattributes-grid").kendoGrid({
                    dataSource: {
                        type: "json",
                        transport: {
                            read: {
                                url: "@Html.Raw(Url.Action("ProductSpecAttrList", "Product", new { productId = Model.Id }))",
                                type: "POST",
                                dataType: "json"
                            },
                            update: {
                                url: "@Html.Raw(Url.Action("ProductSpecAttrUpdate", "Product"))",
                                type: "POST",
                                dataType: "json"
                            },
                            destroy: {
                                url: "@Html.Raw(Url.Action("ProductSpecAttrDelete", "Product"))",
                                type: "POST",
                                dataType: "json"
                            }
                        },
                        schema: {
                            data: "Data",
                            total: "Total",
                            errors: "Errors",
                            model: {
                                id: "Id",
                                fields: {
                                    //ProductId: { editable: false, type: "number" },
                                    SpecificationAttributeName: { editable: false, type: "string" },
                                    SpecificationAttributeOptionId: { editable: true, type: "number" },
                                    CustomValue: { editable: true, type: "string" },
                                    AllowFiltering: { editable: true, type: "boolean" },
                                    ShowOnProductPage: { editable: true, type: "boolean" },
                                    DisplayOrder: { editable: true, type: "number" },
                                    Id: { editable: false, type: "number" }
                                }
                            }
                        },
.......................
columns: [{
                            field: "SpecificationAttributeName",
                            title: "@T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttribute")",
                            width: 200
                        }, {
                            field: "SpecificationAttributeOptionId",
                            title: "@T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttributeOption")",
                            width: 200,
                            editor: renderDropDown, template: "#= getOptionValue(SpecificationAttributeName, SpecificationAttributeOptionId) #"
                        },

The method "getOptionValue" isn't included, but basically converts a value to a display-friendly label when it's not in edit mode. "renderDropDown" creates a kendoDropDownList containing the correct options for the current row.

Mahib Mahib · Accepted Answer · 2015-06-30T05:01:23

If you return a id, value pair e.g

"{\"SpecificationAttributeOptionId\":\"0\",\"SpecificationAttributeName\":\"XYZ\"},
 {\"SpecificationAttributeOptionId\":\"1\",\"SpecificationAttributeName\":\"ABC\"}"

Then you need to specify dataTextField, dataValueField. Otherwise if you return a List of string as follows, then you don't need to specify dataTextField, dataValueField and kendo will take care the rest.

"{\"SpecificationAttributeName\":\"XYZ\"},
 {\"SpecificationAttributeName\":\"ABC\"}"

Hope this helps.

$("#SpecificationAttributeOptionId").kendoDropDownList({
        dataTextField: "SpecificationAttributeName",
        dataValueField: "SpecificationAttributeOptionId",
        dataSource: {
            transport: {
                read: {
                    url: "/ControllerName/GetDropDownValueFunction",
                    type: "POST",
                    contentType: "application/json",
                    dataType: "json"
                }
            }
        },
        height: 100
    });

Inline editing using dynamic dropdowns in kendo grid

1 Answers