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

Kendo Scheduler CRUD Save/Update Issue

1 Answer 157 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Sanjay
Top achievements
Rank 1
Sanjay asked on 29 Jun 2015, 07:43 PM

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);
};

}
]);

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 02 Jul 2015, 06:44 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Sanjay
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or