KendoUI Scheduler Page Events by Time

Question

We are using Kendo Scheduler to display bookings in meeting rooms. There is a good amount of historical data that is not required when the Scheduler is loaded, but the user can easily browse. Because of this, these historical events doesn't need to be loaded until the Scheduler is navigated to their time interval.

Is there a way to implement paging/filtering by the selected time slot? My first guess would be to implement custom transport and query the server for the correct subset of bookings there, but the "read" method is only called once and the view properties are not supplied. What would be the advised way of doing this?

There are two issues I have here:

1. When do I load new data (event, method override, etc.)
2. How do I get the time range that is visible (parameter, Scheduler property, etc.)

Answer 1

Here is how we've implemented this:

1. We hooked to the "navigate" event of the scheduler where we setup the time frame to be loaded (e.i. current time, view length)
2. We implemented custom transport which requests only events in the time frame setup in 1)
3. We call dataSource.read when the navigate event is fired

As we use AngularJS, this whole thing is done through the configuration object and the time frame setting is global for the scope of the controller containing the scheduler.

Answer 2

Build your own dataSource for the widget, then set it

var dataSource = new kendo.data.SchedulerDataSource();
for (var i = 0; i < 7; i++) {
    dataSource.add({
        id: i,  // Sunday = 0
        start: date_start,
        end: date_end,
        title: title,
        isAllDay: isAllDay,
     });
}
var scheduler = $("#schedule").data("kendoScheduler");
scheduler.setDataSource(dataSource);