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

Custom new item window not closing when adding event to scheduler

2 Answers 284 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 20 Jan 2015, 03:03 PM
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!

2 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Krustev
Telerik team
answered on 22 Jan 2015, 01:23 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Kevin
Top achievements
Rank 1
answered on 26 Jan 2015, 02:44 PM
Correct, it seems that all the functions you use (create, read, ..) must use the same method of retreiving and/or sending data.

Thanks
Tags
Scheduler
Asked by
Kevin
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or