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>
答案 0 :(得分：0)
好的，我想首先我们将在编辑函数中传递调度程序事件函数。然后你可以通过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是map函数数据库和调度程序模型 你可以像这样使用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;
};