Kendo UI Scheduler with AngularJS - Update issue in custom edit template

Question

We are using a custom editor template with custom fields in Agenda View. We have an edit button which fires the editEvent of scheduler. The problem is that, when we update the event, it doesn't fire the update operation.

As you can see, in "add new event" case, it works fine. Also while editing the "repetitive events with series" case, it fires the update operation as desired.

Only problem, we are having is that, while editing a single event (all day event or non-repetitive events), update operation is not fired.

Does anyone have any solution to this?

Here is the link to demo in telerik's dojo :

The HTML:

<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">

        <div class="thisTab clickhereTabScheduledcont boxWrapper">
            <div class="agenda" style="position:relative;">
                <div kendo-toolbar k-options="toolbarOptions" class="newEvent" id="toolbar" ng-click="schedulerOptions.addEvent()"></div>

                <div kendo-scheduler="scheduler" k-options="schedulerOptions">

                 <span k-event-template class='custom-event'>
                    <span>{{dataItem.title}}</span>
                    <hr>
                    <i class="fa fa-pencil" ng-click="schedulerOptions.editEvent(dataItem)">Edit</i>
                </span>

                <div k-all-day-event-template class='custom-all-day-event'>{{dataItem.title}}</div>
            </div>
        </div>

    </div>  
</div>

Script section:

<script>

      angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){

          $scope.toolbarOptions = {
            items: [
            { type: "button", text: "New Event" }
            ]
        };

        $scope.schedulerOptions = {
         date: new Date("2013/6/13"),
         startTime: new Date("2013/6/13 07:00 AM"),
         height: 600,

         views: [
         "agenda"
         ],
         timezone: "Etc/UTC",

         editable: {
            template: kendo.template($("#customEditorTemplate").html())
        },

        dataSource: {
            batch: true,
            transport: {
                read: {
                  url: "http://demos.telerik.com/kendo-ui/service/tasks",
                  dataType: "jsonp"
              },
              update: {

                 url: function (data) {
                    alert(JSON.stringify(data));
                    return "http://demos.telerik.com/kendo-ui/service/tasks/update";
                },

                dataType: "jsonp"
            },
            create: {
             url: function (data) {
                alert(JSON.stringify(data));
                return "http://demos.telerik.com/kendo-ui/service/tasks/create";
            },
        },
        destroy: {
            url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
            dataType: "jsonp"
        },
        parameterMap: function(options, operation) {

          alert(operation);

      }
    },
    schema: {
        model: {
            id: "taskId",
            fields: {
                taskId: { from: "TaskID", type: "number" },
                title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                start: { type: "date", from: "Start" },
                end: { type: "date", from: "End" },
                startTimezone: { from: "StartTimezone" },
                endTimezone: { from: "EndTimezone" },
                description: { from: "Description" },
                recurrenceId: { from: "RecurrenceID" },
                recurrenceRule: { from: "RecurrenceRule" },
                recurrenceException: { from: "RecurrenceException" },
                ownerId: { from: "OwnerID", defaultValue: 1 },
                isAllDay: { type: "boolean", from: "IsAllDay" }
            }
        }
    },
    filter: {
        logic: "or",
        filters: [
        { field: "ownerId", operator: "eq", value: 1 },
        { field: "ownerId", operator: "eq", value: 2 }
        ]
    }
    },


    editEvent: function (dataItem) {

        alert(JSON.stringify(dataItem));
        $scope.scheduler.editEvent(dataItem);

    },

    addEvent: function () {
        $scope.scheduler.addEvent({title: ""});
    }

    };
    })


</script>

Answer 1

Ok,I think first we will pass scheduler event function in edit function.Then you can call api by eventId or as u like. I have done this issue like that

This is your html template

    <div class="thisTab clickhereTabScheduledcont boxWrapper">
        <div class="agenda" style="position:relative;">
            <div kendo-toolbar k-options="toolbarOptions" class="newEvent" id="toolbar" ng-click="schedulerOptions.addEvent()"></div>

            <div kendo-scheduler="scheduler" k-options="schedulerOptions">

             <span k-event-template class='custom-event'>
                <span>{{dataItem.title}}</span>
                <hr>
                <i class="fa fa-pencil" ng-click="schedulerOptions.editEvent($event,$event.isRecurrenceHead())">Edit</i>
            </span>

            <div k-all-day-event-template class='custom-all-day-event'>{{dataItem.title}}</div>
        </div>
    </div>

</div>  

Here is your controller

  //you can pass scheduler default function in edit function

 var editEventDetails  ={};
       update: {
                url: function (data) {
                    console.log('update function');
                    var dt;

                        data.SignUpDueDate = moment(data.SignUpDueDate).format('YYYY-MM-DD') + "T23:59:59" + ".000Z";
                        data.ProgramTemplateId = editEventDetails.ProgramTemplateId;
                        data.IsTeamEvent = editEventDetails.IsTeamEvent;
                        data.SeasonTeamId = editEventDetails.SeasonTeamId;
                        data.Description = editEventDetails.Description;
                        data.CheckAttendance = editEventDetails.CheckAttendance;
                        data.Remarks = editEventDetails.Remarks;
                        data.IsSignUpRequired = editEventDetails.IsSignUpRequired;


                    API.post('/Scheduler/SaveProgramEvent', data).then(function (result) {

                    }

                    },
            },

 editEvent: function (evt) {
        var uid = $(evt.target).closest('.k-task').attr("data-uid");
        var event = $scope.scheduler.occurrenceByUid(uid);          
        event.startDate = moment(event.start).format('MM/DD/YYYY h:mm a');
        event.endDate = moment(event.end).format('MM/DD/YYYY h:mm a');
        dataItem.startDate = moment(event.start).format('MM/DD/YYYY h:mm a');
        dataItem.endDate = moment(event.end).format('MM/DD/YYYY h:mm a');
        $scope.scheduler.editEvent(event);
    },


  edit: function (e) {
        console.log('EDIT');

        if (e.event.eventMetaId != null && e.event.eventMetaId != undefined && e.event.eventMetaId != 0) {
            var detailParams = {
                EventMetaId: (e.event.recurrenceId !== 0 && e.event.eventMetaId === 0) ? e.event.recurrenceId : e.event.eventMetaId,
                OwnerOrganizationId: _orgId,
                UserTimezone: global.userTimezoneOffset// userTimezone
            };
            API.get('/Scheduler/GetEventDetailById', detailParams).then(function (data) {
                editEventDetails = data;
                mapEventDetail(editEventDetails, e.event)
            });               
            setTimeout(function () {
                e.event.startDate = moment(e.event.start).format('MM/DD/YYYY h:mm a');
                e.event.endDate = moment(e.event.end).format('MM/DD/YYYY h:mm a');
                e.event.recurrenceException = editEventDetails.recurrenceException;
                $scope.$apply();
            }, 0);
        }

    },

Here mapEventDetail is map function database and scheduler model you can use mapEventDetail like that:--

 var mapEventDetail = function (fromObj, toObj) {
    toObj.programTemplateId = fromObj.ProgramTemplateId;
    toObj.isTeamEvent = fromObj.IsTeamEvent;
    toObj.seasonTeamId = fromObj.SeasonTeamId;
    toObj.description = fromObj.Description;
    toObj.checkAttendance = fromObj.CheckAttendance;
    toObj.remarks = fromObj.Remarks;        
    return toObj;

};