Kendo Scheduler Динамический источник данных с угловым

Question

У меня есть планировщик кендо на моей странице.

<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?

Я могу заставить этот Планировщик работать со статическими данными, но не со списком объектов JSON, которые возвращаются при отправке сервером. Я хотел бы иметь возможность привязать мои $ scope.items к источнику данных, но это не похоже на работу.

Вот код 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" },
                }
            }
        },
    }
};

Я могу получить статический подход к работе. Я не могу действительно использовать подход удаленных данных, который выглядит следующим образом (ниже), потому что я не знаю, какой у меня URL, пока не сработает мой $ scope. $ Watch. Мне нужно добавить параметры строки запроса.

 dataSource: {
    batch: true,
    transport: {
        read: {
            url: "/MyController/GetMyData",
            dataType: "json",
        },

Кто-нибудь есть какие-либо предложения о том, как я могу динамически заполнить свой источник данных планировщика?

Я видел этот вопрос, Kendo обновляет параметры планировщика динамически, но мне не повезло получить setOptions(). Если бы я только мог вызвать $scope.myScheduler.setOptions("dataSource", myJsonObjectArry), это было бы здорово, но ничего.

Я могу манипулировать $scope.myScheduler._data (в виде массива), но мне нужна некоторая форма метода обновления для перерисовки моего пользовательского интерфейса. Этот подход не кажется правильным, хотя.

Спасибо за любую помощь.

Answer 1

Я отвечаю на свой вопрос. В случае, если вы столкнетесь с этой ситуацией, вот как я ее решил.

Вот мой планировщик опций сейчас. Обратите внимание, что нет источника данных и нет схемы. Это потому, что я буду динамически заполнять это собственным источником данных.

$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));

Который в свою очередь вызовет это, что создаст источник данных для меня.

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;
}

Если вы столкнулись с этой проблемой, надеюсь, это поможет.