Kendo Scheduler Dynamic DataSource with Angular - angularjs

Question

I have a Kendo Scheduler 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 data, it looks like this, but I do not know what my URL parameter will be until it loads up ($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 the JSON list of objects that get returned when the server sends them. I would like to be able to bind my $scope.items to the dataSource, but that does not appear to work.
Here is the schedulerOptions code.
$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 cannot really use the remote data approach that looks like this (below) because I do not know what my URL is until my $scope.$watch is triggered. I need to append query string params.
dataSource: {
batch: true,
transport: {
read: {
url: "/MyController/GetMyData",
dataType: "json",
},
Does anyone have any suggestions on how I can populate my Scheduler dataSource dynamically?
I have seen this question, Kendo update scheduler options dynamically, but I am not having any luck getting the setOptions(). If only I could call $scope.myScheduler.setOptions("dataSource", myJsonObjectArry), that would be awesome, but nothing.
I am able to manipulate $scope.myScheduler._data (as an array), but I need some form of a refresh method to redraw my UI. This approach doesn't seem right though.
Thanks for any help.

Answer 1

I am answering my own question. In case you run into this situation, here is how I solved it.
Here is my schedulerOptions now. Notice there is no dataSource set and no schema. This is because I will populate that 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 this.
$scope.myScheduler.dataSource.data(getSchedulerEvents($scope.data.items));
Which in turn will call this, which creates the dataSource 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 this helps.