使用远程数据 (Javascript) 更新 Kendo UI 调度程序数据源答案

【问题标题】：Update Kendo UI scheduler datasource with remote data (Javascript)使用远程数据 (Javascript) 更新 Kendo UI 调度程序数据源
【发布时间】：2014-09-08 07:06:08
【问题描述】：

我在使用 kendo ui 调度程序组件时遇到了一些问题。

我正在通过 php exchange Web 服务从 ms exchange 获取我的调度程序事件。由于性能原因，我不想在日历初始化中加载数千个元素。

因此，我仅默认加载当前的周项目。在导航事件中，我想更新调度程序数据源。

我的代码是：

$("#scheduler").kendoScheduler({
    date: new Date(y+"/"+m+"/"+d),
    dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'ddd, dd.MM.')#</strong>"),
    startTime: new Date(y+"/"+m+"/"+d+" 00:00 AM"),
    workDayStart: new Date(y+"/"+m+"/"+d+" 07:00 AM"),
    workDayEnd: new Date(y+"/"+m+"/"+d+" 8:00 PM"),
    height: 600,
    navigate: schedulerNavigate,
    views: [
        "day",
        "week",
        { type: "workWeek", selected: true },
        "month",
        "agenda"
    ],
    dataSource: {
        batch: true,
        transport: {
            read: {
                url: myDataUrl,
                dataType: "json"
            }
        }
    }
    ...and some more options here...
});

“Naviagte”事件调用 schedulerNavigate() 函数：

function schedulerNavigate(e) {
    var
        scheduler = $("#scheduler").data("kendoScheduler"),
        dataSourceUrl = myDataUrl+kendo.format("?view={1}&date={2:d}", e.action, e.view, e.date),
        dataSource = new kendo.data.SchedulerDataSource({
            transport: {
                read: {
                    url: dataSourceUrl,
                    dataType: "json"
                }
            }
    });

    // set datasource
    scheduler.setDataSource(dataSource);
}

进入schedulerNavigate函数时，调用dataSource url，返回json。到目前为止一切都很好... 但是： URL 将被调用两次！调度器的数据将被清除，但不会设置新的数据。

有什么想法吗？

非常感谢！

菲利普

【问题讨论】：

我猜navigate 事件会自动触发对小部件数据源的读取。你试过e.preventDefault()，设置新的dataSource，然后在你的schedulerNavigate函数中手动触发dataSource.read()？
嘿布雷特。尝试了您的解决方案并将e.preventDefault(); 添加到 schedulerNavigate 函数的第一行。我还在 setDataSource 命令后面添加了scheduler.dataSource.read();。不幸的是，这没有帮助。
您好，我的回答对您的问题有帮助吗？如果是，您能否将我的回复标记为答案？这样一来，使用谷歌找到问题的人就可以更加确信答案是正确的。提前致谢。

标签： json kendo-ui datasource scheduler

【解决方案1】：

要实现所需的行为，您应该启用调度程序的“serverFiltering”选项并使用数据源“transport.parameterMap”功能将当前视图开始/结束时间包含在请求中：

dataSource: {
serverFiltering: true,
transport: {

    parameterMap: function (options, operation) {                        

        if (operation === "read") {
            var scheduler = $("#scheduler").data("kendoScheduler");

            var result = {
                start: scheduler.view().startDate(),
                end: scheduler.view().endDate()
            }

            return kendo.stringify(result);
        }

        return kendo.stringify(options);
    },
    //CRUD operations

带有 MVC 后端的可运行演示：

KendoUI Scheduler Server Filtering

【讨论】：