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: " ", 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.