Update Kendo UI scheduler datasource with remote data (Javascript)

Question

I have some trouble with kendo ui scheduler component.

I'm getting my scheduler events from ms exchange via php exchange web services. Because of performance I don't want to load thousands of elements on calendar init.

Therefore I'm loading currents' week items only by default. On navigate event I want to update schedulers datasource.

My code is:

$("#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" event calls schedulerNavigate() function:

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

When schedulerNavigate function is entered, the dataSource url is called, json will be returned. Everythings good so far... BUT: Url will be called twice! Schedulers' data will be cleared but new data won't be set.

Any idea?

Thanks a lot!

Philip

I'm guessing that the navigate event triggers a read of the widget's datasource automatically. Have you tried e.preventDefault(), set the new dataSource, and then triggered a dataSource.read() manually in your schedulerNavigate function? — Brett
Hey Brett. Tried your solutions and added e.preventDefault(); to the first line of schedulerNavigate function. Also I added scheduler.dataSource.read(); behind the setDataSource command. Unfortunately that didn't help. — Philip
Hi, did my answer help you solve your issue? If yes, could you please mark my reply as an answer? That way, people who find the question using Google can have more assurance that the answer is correct. Thanks in advance. — Vladimir Iliev

Vladimir Iliev Vladimir Iliev · Accepted Answer · 2015-10-21T11:36:44

To achieve the desired behavior you should enable "serverFiltering" option of the Scheduler and use the dataSource "transport.parameterMap" function to include the current view start/end time to the request:

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

Runnable demo with MVC backend:

KendoUI Scheduler Server Filtering

Update Kendo UI scheduler datasource with remote data (Javascript)

1 Answers