Kendo Scheduler CRUD Save/Update Issue

[Sanjay]

Hi,

 

A newbee to kendo and js:). I am trying to use kendo scheduler in my project and having issue with Create / update operations. Create / Update opertions works and DB is updated but kendo UI dialog stays and gets following error "Uncaught TypeError: Cannot read property 'getTimezoneOffset' of null". Refreshing browser display newly added /updated  event. Also in destroy method I nned to add event id to path like /schedules/id, how to add this, in parameterMap we gets like options.models[0].id but not in destroy method.

Any quick help is appreciated. Posting my code:

'use strict';

/*
* Add UI Functions To This File Such As "ManipulateDataFromServer"
* */

adoc.controller('accountManagerController', [
'$scope', '$rootScope', '$filter', 'adoc.common', 'restServices', 'TokenStorage',
function ($scope, $rootScope, $filter, ADOCServices, restServices, TokenStorage) {

$scope.colors = [
{name: 'black', shade: 'dark'},
{name: 'white', shade: 'light'},
{name: 'red', shade: 'dark'},
{name: 'blue', shade: 'dark'},
{name: 'yellow', shade: 'light'}
];

$scope.myColor = $scope.colors[2];

$scope.changeColor = function (newColor) {
$scope.myColor = newColor;
};

$scope.myData = [];

$scope.loadPractices = function () {
restServices.call('GET', "/adoc/practice/all").then(
function (response) {
$scope.gridPractice.data = response.data;
console.log($scope.gridPractice.data);
});
};

$scope.gridPractice = {
autoResize: true,
rowHeight: 70,
//data:$scope.loadPractices(),
enableRowSelection: true,
columnDefs: [
{
field: 'id',
displayName: 'Practice Id',
cellTemplate: '<div class="controls-column"><div ng-controller="accountManagerController">{{row.entity.id}}</div>' +
'<div class="grid-row-links-container">' +
'<button class="btn-link" ng-click="grid.appScope.editSelectedPractice(row.entity.id);">Edit</button>' +
'<button class="btn-link" href="#">View Website</button>' +
'<button class="btn-link" href="#">Delete</button>' +
'</div>' +
'</div>'
},
{
field: 'name',
displayName: 'Practice Name'
},
{
field: 'path',
displayName: 'Path'
},
{
field: 'email',
displayName: 'Email'
}
]
}

$scope.myData2 = [
{
"practiceId": "1",
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"practiceId": "2",
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"practiceId": "3",
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
},
{
"practiceId": "4",
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"practiceId": "5",
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"practiceId": "6",
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];

$scope.gridPracticeAdmins = {
autoResize: true,
rowHeight: 70,
data: $scope.myData2,
enableRowSelection: true,
columnDefs: [
{
field: 'firstName',
displayName: 'First Name',
cellTemplate: '<div class="controls-column"><div ng-controller="accountManagerController">{{row.entity.firstName}}</div>' +
'<div class="grid-row-links-container">' +
'<button class="btn-link" ng-click="grid.appScope.editSelectedPractice(row.entity.practiceId);">Edit</button>' +
'<button class="btn-link" href="#">Delete</button>' +
'</div>' +
'</div>'
},
{
field: 'lastName',
displayName: 'Last Name'
},
{
field: 'company',
displayName: 'UserName'
}
]
};

// Filter Practices
$scope.filterPractice = function () {
console.log($scope.searchPractices);
$scope.gridPractice.data = $filter('filter')($scope.myData, this.searchPractices, undefined);
};

// Show Edit Page For Editing The Selected Practice
$scope.editSelectedPractice = function (practiceId) {
alert(practiceId);
};

$scope.init = function () {
$scope.loadPractices();
};

$scope.schedulerOptions = {
date: new Date("2015/6/13"),
startTime: new Date("2015/6/13 07:00 AM"),
minorTickCount: 1,
height: 850,
editable: true,
isAllDay: false,
views: [
{type: "day", selected: false},
{type: "week", selected: false},
{type: "month", selected: true},
{type: "workWeek", selected: false},
{type: "agenda", selected: false},
{type: "timeline", eventHeight: 50}
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
/* sync: function() {
this.read();
},*/
transport: {
read: {
// url: "http://demos.telerik.com/kendo-ui/service/tasks",
url: "/schedules/practice/" +
$rootScope.user.practiceId,
headers: {'X-AUTH-TOKEN': TokenStorage.retrieve()},
dataType: "json"
},
update: {
// url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
url: "/schedules/",
headers: {'X-AUTH-TOKEN': TokenStorage.retrieve()},
method: "post",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
create: {
url: "/schedules/",
headers: {'X-AUTH-TOKEN': TokenStorage.retrieve()},
method: "put",
contentType: "application/json; charset=utf-8",
dataType: "json"


},
destroy: {
// url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
url: "/schedules/",
headers: {'X-AUTH-TOKEN': TokenStorage.retrieve ()},
method: "delete",
contentType: "application/json; charset=utf-8",
dataType: "json"
},
parameterMap: function (options, operation) {
switch (operation) {
case "read":

break;
case "update":
if (options.models) {
console.log(kendo.stringify(options.models[0].id));
console.log(kendo.stringify(options.models[0].scheduleTitle));
console.log(kendo.stringify(options.models[0].scheduleStartTime));
console.log(kendo.stringify(options.models[0].scheduleEndTime));
console.log(kendo.stringify(options.models[0].scheduleDescription));
console.log(kendo.stringify(options.models[0].recurrenceId));
console.log(kendo.stringify(options.models[0].recurrenceRule));
console.log(kendo.stringify(options.models[0].recurrenceException));
console.log(kendo.stringify(options.models[0].physicianId));
console.log(kendo.stringify(options.models[0].practiceId));
console.log(kendo.stringify(options.models[0].allDay));

/* return {models: kendo.stringify(options.models)};*/
return kendo.stringify({
id: options.models[0].id,
scheduleTitle: options.models[0].scheduleTitle,
scheduleStartTime: options.models[0].scheduleStartTime,
scheduleEndTime: options.models[0].scheduleEndTime,
scheduleDescription: options.models[0].scheduleDescription,
recurrenceId: options.models[0].recurrenceId,
recurrenceRule: options.models[0].recurrenceRule,
recurrenceException: options.models[0].recurrenceException,
physicianId: options.models[0].physicianId,
practiceId: $rootScope.user.practiceId,
allDay: options.models[0].allDay
})
}
break;
case "create":
if (options.models) {
console.log(kendo.stringify(options.models[0].scheduleTitle));
console.log(kendo.stringify(options.models[0].scheduleStartTime));
console.log(kendo.stringify(options.models[0].scheduleEndTime));
console.log(kendo.stringify(options.models[0].scheduleDescription));
console.log(kendo.stringify(options.models[0].recurrenceId));
console.log(kendo.stringify(options.models[0].recurrenceRule));
console.log(kendo.stringify(options.models[0].recurrenceException));
console.log(kendo.stringify(options.models[0].physicianId));
console.log(kendo.stringify(options.models[0].practiceId));
console.log(kendo.stringify(options.models[0].allDay));

/* return {models: kendo.stringify(options.models)};*/
return kendo.stringify({
scheduleTitle: options.models[0].scheduleTitle,
scheduleStartTime: options.models[0].scheduleStartTime,
scheduleEndTime: options.models[0].scheduleEndTime,
scheduleDescription: options.models[0].scheduleDescription,
recurrenceId: options.models[0].recurrenceId,
recurrenceRule: options.models[0].recurrenceRule,
recurrenceException: options.models[0].recurrenceException,
physicianId: options.models[0].physicianId,
practiceId: $rootScope.user.practiceId,
allDay: options.models[0].allDay
})
}
break;
case "destroy":
console.log(options.models[0].id);
return kendo.stringify({id: options.models[0].id});
break;
}

}
},
schema: {
model: {
id: "id",
fields: {
id: {from: "id", type: "number"},
title: {from: "scheduleTitle", defaultValue: "No title", validation: {required: true}},
start: {type: "date", from: "scheduleStartTime"},
end: {type: "date", from: "scheduleEndTime"},
description: {from: "scheduleDescription"},
recurrenceId: {from: "recurrenceId", defaultValue: 0},
recurrenceRule: {from: "recurrenceRule"},
recurrenceException: {from: "recurrenceException"},
ownerId: {from: "physicianId", defaultValue: 1},
practiceId: {from: "practiceId"},
isAllDay: {type: "boolean", from: "allDay"}
}
}
},

filter: {
logic: "or",
filters: [
{field: "ownerId", operator: "eq", value: 1},
{field: "ownerId", operator: "eq", value: 2}
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{text: "Alex", value: 1, color: "#f8a398"},
{text: "Bob", value: 2, color: "#51a0ed"},
{text: "Charlie", value: 3, color: "#56ca85"}
]
}
]
};

$scope.selectedTags = [];

$scope.loadTags = function (query) {
// Get Available Providers From DB As An Array
var availableTags = [
{text: 'All', value: -1},
{text: 'Provider 1', value: 1},
{text: 'Provider 2', value: 2},
{text: 'Provider 3', value: 3},
{text: 'Provider 4', value: 4},
{text: 'Provider 5', value: 5},
{text: 'Provider 6', value: 6}
];


// Get All Providers Selected
var allProvidersSelected = 0;
for (var i = 0; i < $scope.selectedTags.length; i++) {
allProvidersSelected = $scope.selectedTags[i].value;
if (allProvidersSelected == -1) {
break;
}
}
console.log(allProvidersSelected);

// Get Selected Providers IDs
var selectedIds = [];
if (allProvidersSelected == -1) {
for (var i = 0; i < availableTags.length; i++) {
selectedIds.push(parseInt(availableTags[i].value));
}
} else {
for (var i = 0; i < $scope.selectedTags.length; i++) {
selectedIds.push(parseInt($scope.selectedTags[i].value));
}
}

// Filter Providers Schedule On Addition Of Tags
var scheduler = $(".k-scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function (task) {
return $.inArray(task.ownerId, selectedIds) >= 0;
}
});


// Return Filtered Set Of Available Providers
return $filter('filter')(availableTags, query, undefined);
};

}
]);

[Vladimir Iliev]

Hi Sanjay,

The error is thrown when the Scheduler receives response from the server which cannot be parsed - could you please make sure the server return the updated / created records back to the client side formatted the same way as the records for read operation (nested in array). 
Also when deleting events they should be accessible in the "parameterMap" function - could you please provide runable example where this behavior can be reproduced? This would help us pinpoint the exact reason for current behavior.

Regards,
Vladimir Iliev
Telerik