带有 Angular 的 Kendo 调度程序动态数据源

Posted 2023-05-07

【中文标题】带有 Angular 的 Kendo 调度程序动态数据源

【英文标题】：Kendo Scheduler Dynamic DataSource with Angular

【发布时间】：2014-12-08 15:50:14

【问题描述】：

我的页面上有一个 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 调度程序？

我可以让这个调度程序处理静态数据，但不能处理服务器发送对象时返回的 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" ,
                
            
        ,
    
;

我可以使用静态方法。我不能真正使用看起来像这样（下）的远程数据方法，因为在触发 $scope.$watch 之前我不知道我的 URL 是什么。我需要附加查询字符串参数。

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

有人对我如何动态填充调度程序数据源有任何建议吗？

我已经看到了这个问题，Kendo update scheduler options dynamically，但我没有任何运气获得 setOptions()。如果我可以调用 $scope.myScheduler.setOptions("dataSource", myJsonObjectArry)，那就太棒了，但没什么。

我能够操作 $scope.myScheduler._data（作为一个数组），但我需要某种形式的刷新方法来重绘我的 UI。不过这种方法似乎不太对。

感谢您的帮助。

【参考方案1】：

我正在回答我自己的问题。如果你遇到这种情况，我是这样解决的。

这是我现在的 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;

如果您遇到此问题，希望对您有所帮助。

【讨论】：

如何从 $scope 访问 myScheduler ??

嗨，这里的 myScheduler 是什么？

您可以通过在创建时命名它来从 $scope 访问调度程序，如下所示：