Kendo UI Scheduler with AngularJS - 自定义编辑模板中的更新问题

Question

我们在议程视图中使用带有自定义字段的自定义编辑器模板。我们有一个编辑按钮，它会触发调度程序的 editEvent。问题是，当我们更新事件时，它不会触发更新操作。

如您所见，在“添加新事件”的情况下，它工作正常。此外，在编辑“具有系列的重复事件”案例时，它会根据需要触发更新操作。

我们遇到的唯一问题是，在编辑单个事件（全天事件或非重复事件）时，不会触发更新操作。

有没有人可以解决这个问题？

Here 是 Telerik 道场中的演示链接：

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>

      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

好的，我想首先我们将在编辑函数中传递调度程序事件函数。然后您可以通过 eventId 或您喜欢的方式调用 api。 我就是这样处理这个问题的

这是你的 html 模板

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

这是你的控制器

  //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);
        }

    },

这里的mapEventDetail是地图函数数据库和调度器模型 你可以像这样使用 mapEventDetail：--

 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;

};