This is a migrated thread and some comments may be shown as answers.

AngularJS - RowCreated/RowUpdated events at kendo grid

3 Answers 369 Views

Integration with other JS libraries

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 15 Apr 2015, 02:22 PM

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>

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

answered on 17 Apr 2015, 11:57 AM

Hello 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>

<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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!