Hiya
I have a system using angular and ASP.Net web api 2 that uses a scheduler. It can read and display data from my api without a problem. When adding an event though, it goes wrong. I defined a custom add screen using templates (which shows fine). If I fill in all my fields, the save event fires (for which I wrote a custom function which stores my new event. I can store the new event just fine, but the event window does not close and I get an Uncaught TypeError: Cannot read property 'data' of undefined on kendo.all.min.js:11 . If I refresh the new event is shown as it should.
My scheduler:
My template:
As far as I know this works, everything is shown as should and the data from my template can be seen in the save event:
Here are my options and custom remove function (that works):
Any ideas?
I assume it may have something to do with the lack of create function in the transport part of my datasource options, but I have no idea what I should put there.
Thanks!
I have a system using angular and ASP.Net web api 2 that uses a scheduler. It can read and display data from my api without a problem. When adding an event though, it goes wrong. I defined a custom add screen using templates (which shows fine). If I fill in all my fields, the save event fires (for which I wrote a custom function which stores my new event. I can store the new event just fine, but the event window does not close and I get an Uncaught TypeError: Cannot read property 'data' of undefined on kendo.all.min.js:11 . If I refresh the new event is shown as it should.
My scheduler:
1.
<
div
kendo-scheduler
k-options
=
"schedulerOptions"
>
2.
<
span
k-event-template
class
=
'custom-event'
>{{dataItem.title}}</
span
>
3.
<
div
k-all-day-event-template
class
=
'custom-all-day-event'
>{{dataItem.title}}</
div
>
4.
</
div
>
My template:
01.
<
script
id
=
"editor"
type
=
"text/x-kendo-template"
>
02.
<
div
class
=
"form-horizontal form-widgets col-lg-6"
style
=
"color:\#180D86"
>
03.
<
fieldset
>
04.
<
legend
style
=
"color:\#180D86"
>Nieuw stagemoment</
legend
>
05.
<
div
class
=
"form-group"
>
06.
<
label
class
=
"control-label col-sm-3"
>Onderwerp: </
label
07.
<div
class
=
"col-sm-6"
>
08.
<
input
type
=
"text"
class
=
"k-input k-textbox"
id
=
"title"
name
=
"title"
ng-model
=
"subject"
placeholder
=
"Onderwerp"
/>
09.
</
div
>
10.
</
div
>
11.
<
div
class
=
"form-group"
>
12.
<
label
class
=
"control-label col-sm-3"
>Startuur: </
label
>
13.
<
div
class
=
"col-sm-6"
>
14.
<
input
kendo-time-picker
ng-model
=
"startHour"
name
=
"start"
k-ng-model
=
"start"
class
=
"form-control"
/>
15.
</
div
>
16.
</
div
>
17.
<
div
class
=
"form-group"
>
18.
<
label
class
=
"control-label col-sm-3"
>Einduur: </
label
>
19.
<
div
class
=
"col-sm-6"
>
20.
<
input
kendo-time-picker
ng-model
=
"endHour"
name
=
"end"
k-ng-model
=
"end"
class
=
"form-control"
/>
21.
</
div
>
22.
</
div
>
23.
<
div
class
=
"form-group"
>
24.
<
label
class
=
"control-label col-sm-3"
>Lokaal: </
label
>
25.
<
div
class
=
"col-sm-6"
>
26.
<
input
kendo-auto-complete
ng-model
=
"classRoom"
k-data-source
=
"countryNames"
name
=
"description"
/>
27.
</
div
>
28.
</
div
>
29.
</
fieldset
>
30.
</
div
>
31.
</
script
>
As far as I know this works, everything is shown as should and the data from my template can be seen in the save event:
01.
function
scheduler_save(e) {
02.
var
moment = {};
03.
moment.Title = e.event.title;
04.
moment.Start = e.event.start;
05.
moment.End = e.event.end;
06.
moment.Classroom = e.event.description;
07.
08.
moment.Sid = $routeParams.sid;
//This works, is just an id parameter
09.
10.
Stage.addStageMoment(moment)
11.
.success(
function
(newEvent) {
12.
console.log(
"toegevoegd"
, newEvent);
//This gets called and works, returns the inserted item from the server
13.
})
14.
}
Here are my options and custom remove function (that works):
01.
scope.scheduler_remove =
function
(e) {
02.
console.log(e);
03.
Stage.removeStageMoment(e.event.taskId)
04.
.success(
function
(data) {
05.
console.log(
"Moment verwijderd"
, data)
06.
})
07.
}
08.
09.
$scope.schedulerOptions = {
10.
startTime: startDate,
//gets initialised earlier in my angular controller and is correct
11.
height: 600,
12.
allDaySlot:
false
,
13.
currentTimeMarker:
false
,
14.
footer:
false
,
15.
views: [
16.
'month'
,
17.
'agenda'
,
18.
{ type:
'week'
, selected:
true
}
19.
],
20.
editable: {
21.
template: $(
"#editor"
).html()
22.
},
23.
save: scheduler_save,
24.
remove: $scope.scheduler_remove,
25.
dataSource: {
26.
batch:
true
,
27.
transport: {
28.
read: {
29.
url:
"/api/stagemoments/GetStageMoments"
,
30.
dataType:
"json"
31.
},
32.
destroy: {
33.
url:
"/api/stagemoments/DeleteStageMoment"
,
34.
dataType:
"json"
35.
},
36.
parameterMap:
function
(options, operation) {
37.
console.log(
"ParameterMap checking models"
, options, operation)
38.
if
(operation !==
"read"
&& options.models) {
39.
console.log(
"Inside parameterMap"
, options.models);
40.
return
{ models: kendo.stringify(options.models) };
41.
}
42.
}
43.
},
44.
schema: {
45.
model: {
46.
id:
"Id"
,
47.
fields: {
48.
taskId: { from:
"Id"
, type:
"number"
},
49.
title: { from:
"Title"
, validation: { required:
true
} },
50.
start: { type:
"date"
, from:
"Start"
},
51.
end: { type:
"date"
, from:
"End"
},
52.
description: { from:
"Classroom"
}
53.
}
54.
}
55.
}
56.
}
57.
}
Any ideas?
I assume it may have something to do with the lack of create function in the transport part of my datasource options, but I have no idea what I should put there.
Thanks!