我的页面上有一个Kendo Scheduler。
<div kendo-scheduler k-options="schedulerOptions" k-data-source="items"></div>
我的角度控制器将调用服务器以获取数据,看起来像这样,但是在加载之前,我不知道URL参数是什么($ scope。$ watch)。
$scope.$watch(function () { return MyService.leadID; }, function (newValue) {
if (newValue) {
getAppointmentsTabData(newValue);
}
});
var getAppointmentsTabData = function (leadID) {
MyService.getAppointmentsTabData(leadID)
.then(function (data) {
$scope.items = data;
}
}
);
};
如何将这些数据绑定到Kendo Scheduler?
我可以让此Scheduler使用静态数据,但不能使用服务器发送它们时返回的对象的JSON列表。我希望能够将$ scope.items绑定到dataSource,但这似乎不起作用。
这是schedulerOptions代码。
$scope.schedulerOptions = {
date: new Date("2014/10/13"),
startTime: new Date("2014/10/13 07:00 AM"),
height: 310,
views: [
"agenda",
{ type: "week", selected: true, allDaySlot: false },
{ selectedDateFormat: "{0:dd-MM-yyyy}" }
],
eventTemplate: "<span class='custom-event'>{{dataItem.title}}</span>",
allDayEventTemplate: "<div class='custom-all-day-event'>{{dataItem.title}}</div>",
timezone: "Etc/UTC",
dataSource: {
data: $scope.items,
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
appointmentId: { from: "AppointmentId", type: "number" },
resource: { from: "Resource", type: "number" },
description: { from: "Description" },
isAllDay: { type: "boolean", from: "IsAllDay" },
end: { from: "End", type: "date" },
start: { from: "Start", type: "date" },
title: { from: "Title", defaultValue: "No title" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
}
}
},
}
};
我可以使用静态方法来工作。我不能真正使用如下所示的远程数据方法,因为在触发$ scope。$ watch之前,我不知道URL是什么。我需要附加查询字符串参数。
dataSource: {
batch: true,
transport: {
read: {
url: "/MyController/GetMyData",
dataType: "json",
},
有人对我如何动态填充Scheduler数据源有任何建议吗?
我已经看到了这个问题,Kendo动态地更新了调度程序选项,但是我没有任何运气来获取setOptions()。如果我可以叫$ scope.myScheduler.setOptions(“ dataSource”,myJsonObjectArry),那将很棒,但是什么也没有。
我可以操纵$ scope.myScheduler._data(作为数组),但是我需要某种形式的刷新方法来重绘UI。这种方法似乎并不正确。
谢谢你的帮助。
我在回答我自己的问题。万一您遇到这种情况,这是我解决的方法。
现在是我的schedulerOptions。请注意,没有设置数据源,也没有架构。这是因为我将用自己的dataSource动态填充它。
$scope.schedulerOptions = {
date: new Date("2014/10/13"),
startTime: new Date("2014/10/13 07:00 AM"),
showWorkHours: true,
height: 310,
views: [
"agenda",
{ type: "week", selected: true, allDaySlot: false },
{ selectedDateFormat: "{0:dd-MM-yyyy}" }
],
edit: $scope.edit,
editable: {
template: $("#editor").html()
},
timezone: "Etc/UTC",
dataSource: {
data: [], // will be set dynamically
}
};
当我的数据返回到此js控制器时,我将其称为。
$scope.myScheduler.dataSource.data(getSchedulerEvents($scope.data.items));
依次调用此方法,这将为我创建dataSource。
var getSchedulerEvents = function (items) {
var result = [];
var event;
for (var i = 0, length = items.length; i < length; i++) {
event = items[i];
result.push(new kendo.data.SchedulerEvent({
id: event.ID,
title: event.Title,
description: event.Description,
start: kendo.parseDate(event.Start),
end: kendo.parseDate(event.End),
isAllDay: event.IsAllDay,
recurrenceException: event.RecurrenceException,
recurrenceId: event.RecurrenceId,
recurrenceRule: event.RecurrenceRule,
resource: event.Resource,
}));
}
return result;
}
如果遇到此问题,希望对您有所帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句