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

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