I have a kendo editable grid, where I have a drop-down in one the column. On click of 'AddNew' the drop-down in the previous record gets empty. I have created DOJO where this issue can be reproduced. Please help. Any help would be highly appreciated.
DOJO link:
[
^]
What I have tried:
<div ng-controller="stockController">
<br /><br />
<div kendo-grid="stockGrid"
options="stockGridOptions"></div>
</div>
<script>
angularApp.controller('stockController', function ($scope, $http) {
function readOnly(container, options) {
container.removeClass("k-edit-cell");
container.text(options.model.get(options.field));
}
$scope.stockGridOptions = {
toolbar: ["create", "save", "cancel"],
dataSource: {
transport: {
create: {
url: "/Stock/InsertStockDetails",
type: "post",
complete: function (e) {
$scope.stockGrid.dataSource.data([]);
PopupSuccess(e.responseJSON.Message, 4000);
}
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
angular.forEach(options.models, function (value) {
value.Mfg_Dt = kendo.toString(value.Mfg_Dt, "s");
value.Exp_Dt = kendo.toString(value.Exp_Dt, "s");
})
return options;
}
}
},
batch: true,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false },
Product_Name: { type: "string", validation: { required: true } },
Product_Type: { editable: false, defaultValue: { Text: "None", Value: 0 } },
Batch_No: {type: "string", validation: {required: true}},
Mfg_Dt: { type: "date", validation: { required: true }, nullable: true },
Exp_Dt: { type: "date", validation: { required: true }, nullable: true },
Strip_No: { type: "number", validation: { required: true } },
Strip_Unit: { type: "number", validation: { required: true } },
Total: { type: "number" },
}
}
},
change: function (e) {
if (e.action === "itemchange" && e.field === "Strip_No" || e.field === "Strip_Unit") {
var totalValue = e.items[0].Strip_No * e.items[0].Strip_Unit;
e.items[0].set('Total', totalValue);
}
}
},
autoBind: false,
columns: [{
field: "Product_Name",
title: "Product Name"
}, {
field: "Product_Type",
title: "Product Type",
template: '<select kendo-drop-down-list k-options="typeOptions" style="width: 100%"></select>'
},{
field: "Batch_No",
title: "Batch No"
},{
field: "Mfg_Dt",
title: "Mfg Dt",
format: "{0:dd-MM-yyyy}"
},{
field: "Exp_Dt",
title: "Exp Dt",
format: "{0:dd-MM-yyyy}"
},{
field: "Strip_No",
title: "Number of Strip"
},{
field: "Strip_Unit",
title: "Units in Strip"
},{
field: "Total",
title: "Total",
editor: readOnly
}],
editable: true
};
$scope.typeOptions = {
dataSource: {
transport: {
read: {
url: "/Stock/GetProductType",
type: "get",
}
}
},
dataTextField: "Product_Type",
dataValueField: "Id",
optionLabel: "Select Type",
select: function (e) {
e.sender.$angular_scope.dataItem.Product_Type = e.dataItem.Id;
}
};
});
</script>