Планировщик пользовательского интерфейса Kendo с AngularJS - проблема с обновлением в пользовательском шаблоне редактирования
Мы используем настраиваемый шаблон редактора с настраиваемыми полями в режиме просмотра повестки дня. У нас есть кнопка редактирования, которая запускает editEvent планировщика. Проблема в том, что когда мы обновляем событие, оно не запускает операцию обновления.
Как вы можете видеть, в случае добавления нового события все работает нормально. Также при редактировании случая "повторяющиеся события с сериями" запускается операция обновления по желанию.
Единственная проблема, с которой мы столкнулись, заключается в том, что при редактировании одного события (события всего дня или неповторяющихся событий) операция обновления не запускается.
У кого-нибудь есть какое-нибудь решение этого?
Вот ссылка на демо в додзё телерика:
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>
1 ответ
Хорошо, я думаю, что сначала мы передадим функцию события планировщика в функцию редактирования. Затем вы можете вызвать api по eventId или как вам нравится. Я сделал эту проблему так
Это ваш 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;
};