2014-10-14 8 views
3

У меня есть планировщик Kendo на моей странице.Kendo Scheduler Динамический источник данных с угловым

<div kendo-scheduler k-options="schedulerOptions" k-data-source="items"></div> 

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

$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-адрес, пока моя область $. Мне нужно добавить параметры строки запроса.

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

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

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

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

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

ответ

4

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

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

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

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

+3

Как вы получаете доступ к myScheduler из $ scope ?? – John

+0

привет, что такое myScheduler здесь? – Abhishek

+3

Вы можете получить доступ к планировщику из $ scope, называя его при его создании, например: