[Solved] Custom new item window not closing when adding event to scheduler

[Kevin]

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!

[Georgi Krustev]

Hello Kevin,

I also believe that the problem is related to the missing transport.create configuration. What I would suggest you is to move the logic from the save event handler into the transport.create function (second example from the shared doc). There you can perform the request and create the event like you do in the save event handler.

Let me know if this does not work for you.

Regards,
Georgi Krustev
Telerik

 

 

[Kevin]

Correct, it seems that all the functions you use (create, read, ..) must use the same method of retreiving and/or sending data.

Thanks