When I add a new record then update it no issue comes. But when again edit the same record and then click on the cancel button then this error is coming

"Uncaught TypeError: Cannot read property 'uid' of undefined"

My code is :

var app = angular.module('myapp', ['kendo.directives']);

app.controller('commonCtrl', function ($scope) {
var factor = { Factor: { type: "string", editable: true } };
var dynamicMonths = {
decmonth: { type: "string", editable: true },
novmonth: { type: "string", editable: false },
octmonth: { type: "string", editable: false },
septmonth: { type: "string", editable: false },
augmonth: { type: "string", editable: false },
julmonth: { type: "string", editable: false },
junmonth: { type: "string", editable: false },
maymonth: { type: "string", editable: false },
aprmonth: { type: "string", editable: false },
marmonth: { type: "string", editable: false },
febmonth: { type: "string", editable: false },
janmonth: { type: "string", editable: false }
var fieldSet = $.extend(factor, dynamicMonths);
var crudServiceBaseUrl = "json/data",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/read/qualitative.json",
dataType: "json"
update: {
url: crudServiceBaseUrl + "/update/qualitative.json",
dataType: "json"
destroy: {
url: crudServiceBaseUrl + "/delete/qualitative.json",
dataType: "json"
create: {
url: crudServiceBaseUrl + "/create/qualitative.json",
dataType: "json"
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
batch: false,
schema: {
data: "qualitative",
model: {
id: "FactorID",
fields: fieldSet
var staticColumns = [{
command: [{
name: "edit", text: {
edit: "",
update: "",
cancel: ""
}, { name: "destroy", text: " " }], title: "Option", width: "115px", locked: true
}, { field: "Factor", title: "Factor", width: "250px", locked: true, }];
var dynamicColumns = [
{ field: "decmonth", title: "12/2016", width: "150px" },
{ field: "novmonth", title: "11/2016", width: "150px" },
{ field: "octmonth", title: "10/2016", width: "150px" },
{ field: "septmonth", title: "09/2016", width: "150px" },
{ field: "augmonth", title: "08/2016", width: "150px" },
{ field: "julmonth", title: "07/2016", width: "150px" },
{ field: "junmonth", title: "06/2016", width: "150px" },
{ field: "maymonth", title: "05/2016", width: "150px" },
{ field: "aprmonth", title: "04/2016", width: "150px" },
{ field: "marmonth", title: "03/2016", width: "150px" },
{ field: "febmonth", title: "02/2016", width: "150px" },
{ field: "janmonth", title: "01/2016", width: "150px" }]
var columns = staticColumns.concat(dynamicColumns);
$scope.productName = "CECL";
$scope.mainOptions = {
dataSource: dataSource,
toolbar: [{ name: "create", text: "<label class='lblAdd' title='Add Factor'>Factors</label>" }],
columns: columns,
editable: "inline"

In the above code I am using angular js and I getting the data from a json file which is situated locally on my machine.

I have individually separated the columns and data part in the objects. You can see in there.

Please help me out in this.

Waiting for your reply