Hello,
Does kendo grid (angularJS) has a directive for row created/updated events? Something like k-on-change for row selection but triggered when row has been created/updated.
If no are there any workarounds to get this event?
Thank you,
Nick
3 Answers, 1 is accepted
The Grid's save event is probably what you are looking for.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-save
http://docs.telerik.com/kendo-ui/AngularJS/introduction#event-handlers
Regards,
Dimo
Telerik
Rank 1
Hi Dimo,
It works if specified in the grid options (see below) and I appreciate for this:
editable: "popup",
save: function(e) {
console.log('save(e) called');
},
filterable: true,
However the event k-on-save doesn't work for me (see below):
<div id="grid"
kendo-grid="ctrl.kendoGrid"
k-options="ctrl.kendoGridOptions"
k-auto-bind="false"
k-on-change="ctrl.changed(kendoEvent)"
k-on-save="ctrl.saved(kendoEvent)"
k-selectable="true">
</div>
function kendoGridCtrl() {
/* jshint validthis:true */
var ctrl = this;
ctrl.changed = onChanged;
ctrl.saved = onSaved;
function onChanged(kendoEvent) {
console.log('change(kendoEvent) called'); // this one works
}
function onSaved(kendoEvent) {
console.log('save(kendoEvent) called'); // this one doesn't work
}
}
Could you please tell me what is wrong with the code above?
Thank you,
Nick
Here is a test page, which works as expected. Please compare it with your implementation.
<!DOCTYPE html><html><head> <base href="http://demos.telerik.com/kendo-ui/grid/angular"> <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css" /> <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2015.1.408/js/angular.min.js"></script> <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script></head><body><div id="example" ng-app="KendoDemos"> <div ng-controller="MyCtrl"> <kendo-grid options="mainGridOptions" k-on-change="onChange(kendoEvent)" k-on-save="onSave(kendoEvent)" k-selectable="true"> </kendo-grid> </div></div><script>var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";angular.module("KendoDemos", [ "kendo.directives" ]) .controller("MyCtrl", function($scope){ $scope.DS = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" }, create: { url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, batch: true, pageSize: 5, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1} }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } } }); $scope.onSave = function(e) { alert("on save"); }; $scope.onChange = function(e) { alert("on change"); }; $scope.mainGridOptions = { dataSource: $scope.DS, toolbar: ["create"], columns: [ { field:"ProductName", title: "Product Name" }, { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" }, { field: "UnitsInStock", title:"Units In Stock", width: "120px" }, { field: "Discontinued", width: "120px" }, { command: ["edit", "destroy"], title: " ", width: "250px" }], editable: "popup" }; });</script></body></html>Regards,
Dimo
Telerik