Update column value after dropdown change fired from a different column in inline edit

[Chad]

I have a grid where I have inline editing. The first column has a dropdown editor. On the change event of the dropdown editor I want to update the second column with a default value from the selected option in column 1. 

 

A row has represents an equipment model.

Name, Unit, Price. 

 

When I select the Name (dropdown) I want to update the Unit and Price with default values. 

 My editor is:

 

function EquipmentModelDropDownEditor(container, options) {
    $('<input required data-text-field="FriendlyName" data-value-field="EquipmentModelId" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "FriendlyName",
            dataValueField: "EquipmentModelId",
            autoBind: true,
            dataSource: new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "EquipmentModelId"
                    }
                },
                transport: {
                    read: {
                        url: "/CostSheet/GetEquipomentModelsByCategory",
                        dataType: "json",
                        data: {
                            catId: options.model.CostSheetCategoryId
                        }
                    }
                }
            }),
            optionLabel: "--Select Value--",
            change: function (e) {
                var equipmentModel = this.dataItem(e.item);
                options.model.Unit = equipmentModel.DefaultUnit;
                options.model.Price = equipmentModel.DefaultPrice;
                alert(equipmentModel.DefaultUnit);
            }
        });
}

 

 My grid is:

 $("#@gridName").kendoGrid({
                        dataSource: new kendo.data.DataSource({
                            schema: {
                                model: {
                                    id: "CostSheetDetailId",
                                    fields: {
                                        CostSheetDetailId: { editable: false },
                                        FriendlyName: { nullable: false, type: "string", defaultValue: "" },
                                        EquipmentModelId: { editable: true, nullable: false},
                                        Unit: { type: "number" },
                                        Price: { type: "number" },
                                        Budget: { type: "number", editable: false },
                                        Actual: { type: "number" },
                                        CostSheetCategoryId: {nullable: false, type: "number", defaultValue: @Model.Category.CostSheetCategoryId}
                                    }
                                }
                            },
                            transport: {
                                read: {
                                    url: "/CostSheet/CostSheetCategoryDetailGet",
                                    dataType: "json",
                                    data: {
                                        Id: @Model.CostSheetId,
                                        CostSheetCategoryId: "@Model.Category.CostSheetCategoryId",
                                        IsFixed: "@Model.Category.IsFixed"
                                    }
                                },
                                create: {
                                    url: "/CostSheet/CostSheetCategoryDetailCreate",
                                    dataType: "json",
                                    type: "POST",
                                    data: {
                                        __RequestVerificationToken: getAntiForgeryToken()
                                    }
                                },
                                update: {
                                    url: "/CostSheet/CostSheetCategoryDetailEdit",
                                    dataType: "json",
                                    type: "POST",
                                    data: {
                                        __RequestVerificationToken: getAntiForgeryToken()
                                    }
                                },
                                destroy: {
                                    url: "/CostSheet/CostSheetCategoryDetailDelete",
                                    dataType: "json",
                                    type: "POST",
                                    data: {
                                        __RequestVerificationToken: getAntiForgeryToken()
                                    }
                                }
                            }
                        }),
                        toolbar: ["create"],
                        sortable: true,
                        columns: [
                            { field: "EquipmentModelId", title: "Name", template: "#=FriendlyName#", editor: EquipmentModelDropDownEditor },
                            { field: "Unit", title: "Unit", width: "180px" },
                            { field: "Price", title: "Price", width: "180px" },
                            { field: "Budget", title: "Budget", width: "180px" },
                            { field: "Actual", title: "Actual", widht: "180px" },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "211px" }
                        ],
                        editable: "inline"
                    });

 

So. when I select from a dropdown I want to update the editor for the Unit and Price to reflect the default prices. The backend model seems to be updated however the editor itself doesn't reflect the change. 

 

 

[Chad]

To further my question, why isn't the editor tied to the backend model so that when I update the value of the column (options.model.Unit = equipmentModel.DefaultUnit) the editor is updated as well? 

I believe I have a work around below: 

var unitControl = $(container.prevObject).find("input[name='Unit']").data('kendoNumericTextBox');
                unitControl.value(equipmentModel.DefaultUnit);

 This seems to update the editor as well.  Is this the best way to do this? 

[Alexander Valchev]

Hello Chad,

To resolve the issue you should use the set method of the Model.

options.model.set("Unit", equipmentModel.DefaultUnit);

For more information please see the corresponding documentation:

• http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-set

Regards,
Alexander Valchev
Telerik

 

 

[Chad]

Doh!  I should have known that. Thank you this fixed everything.