Custom new item window not closing when adding event to scheduler

3 posts, 1 answers
  1. Kevin
    Kevin avatar
    3 posts
    Member since:
    Jan 2014

    Posted 20 Jan 2015 Link to this post

    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. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3748 posts

    Posted 22 Jan 2015 Link to this post

    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!
     
  3. Kevin
    Kevin avatar
    3 posts
    Member since:
    Jan 2014

    Posted 26 Jan 2015 in reply to Georgi Krustev Link to this post

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

    Thanks
Back to Top