Kendo Scheduler dynamic datasource with Angular
I have Kendo planner on my page.
<div kendo-scheduler k-options="schedulerOptions" k-data-source="items"></div>
My angular controller will make a call to the server to get the data, it looks like this, but I don't know what the parameter of my url will be before loading ($ 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;
}
}
);
};
How can I bind this data to my Kendo scheduler?
I can get this scheduler to work with static data, but not a list of JSON objects that are returned when the server sends them. I would like to be able to bind my $ scope.items objects to a datasource, but that doesn't work.
Here is the 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" },
}
}
},
}
};
I can get the static approach to work. I can't seem to use the remote data approach that looks like this (see below) because I don't know what my url is until my scope is $. I need to add query string parameters.
dataSource: {
batch: true,
transport: {
read: {
url: "/MyController/GetMyData",
dataType: "json",
},
Does anyone have any suggestions on how I can dynamically populate my Planner DataSource?
I saw this question, Kendo update scheduler options dynamically but I am unable to get setOptions (). If I could call $ scope.myScheduler.setOptions ("dataSource", myJsonObjectArry) that would be awesome, but nothing.
I can manipulate $ scope.myScheduler._data (like an array), but I need some form of refresh method to redraw my UI. However, this approach doesn't seem right.
Thanks for any help.
source to share
I am answering my own question. If you come across this situation, here's how I solved it.
Here are my schedulerOptions settings. Note that there is no dataset and no schema. This is because I will be populating this with my own datasource dynamically.
$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
}
};
When my data is returned to this js controller, I will call.
$scope.myScheduler.dataSource.data(getSchedulerEvents($scope.data.items));
Which in turn will trigger this, which creates a data source for me.
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;
}
If you run into this problem, hopefully it helps.
source to share