Hi,
I created kendo grid with custom angular directive but it's datasource change not getting raised, however if i use the code without custom directive it works fine.
Can someone please help?
Also here is a DOJO link where this issue can be reproducible:
Kendo UI® Dojo by Progress[
^]
What I have tried:
<div ng-app="kendoApp">
<grid grid-name="stockGrid" grid-options="stockGridOptions"></grid>
</div>
<script>
var app = angular.module('kendoApp', ["kendo.directives"]);
app.directive('grid', function () {
return {
restrict: "EA",
scope: {
gridName: "@",
gridOptions: "@"
},
template: '<h1>kendoDirective</h1><br/><div kendo-grid={{gridName}} options={{gridOptions}}></div>',
controller: function ($scope, $element, $attrs) {
debugger;
$scope.gridOptions = {
toolbar: ["create", "save", "cancel"],
dataSource: {
transport: {
create: {
url: "/Stock/InsertStockDetails",
type: "post",
complete: function (e) {
$scope.stockGrid.dataSource.data([]);
PopupSuccess(e.responseJSON.Message, 4000);
}
}
},
batch: true,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false },
Product_Name: { type: "string" },
Strip_No: { type: "number", validation: { required: true } },
Strip_Unit: { type: "number", validation: { required: true } },
Total: { type: "number" },
}
}
},
change: function (e) {
debugger;
}
},
autoBind: false,
columns: [{
field: "Product_Name",
title: "Product Name"
}, {
field: "Strip_No",
title: "Number of Strip"
}, {
field: "Strip_Unit",
title: "Units in Strip"
}, {
field: "Total",
title: "Total"
}],
editable: true
};
},
link: function ($scope, $element, $attrs) {
debugger;
}
};
});
</script>