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:
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!