Refresh Scheduler From DataBinding Event to Filter Events By Date?

[Tyler]

I am wondering how I might update the scheduler in the databinding event? When I try to call the dataSource read or just refresh the view, it goes into a continuous loop of datasource reading then scheduler databinding and nothing actually gets displayed in the scheduler.

 

My purpose for this is I am trying to filter events based on the start and end date of the current view because I am dealing with potentially thousands and thousands of events. 

 

My databinding event for the scheduler is:

dataBinding: function(e){
                            console.log(e);
                                console.log(e.sender.view());
                                console.log(e.sender.view().startDate());
                                console.log(e.sender.view().endDate());
                                console.log(e.sender.dataSource.data());
                                if(e.action === 'rebind'){
                                console.log('Rebinding data to scheduler!');  
                                    Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.CalendarData.getCurrentViewEvents}', e.sender.view().startDate(), e.sender.view().endDate(), '{!fieldSetMap}', function(result, event){
                                result = result.replace(/\&quot\;/g, '"');
                                    result = result.replace(/\#39\;/g, '\'');
                                    var resultArray = JSON.parse(result);
                                    console.log(resultArray);
                                        var correctedResults = getNewEvents(resultArray);
                                        console.log(correctedResults);
                                        eventData = correctedResults;
                                        //e.sender.dataSource.data(eventData);
                                        //scheduler.view(scheduler.view().name);
                                        
                                });
                                }
                            },

 

It gets tricky trying to update and refresh the eventData (which needs to go to the dataSource read operation because that is all my events) dealing with the remote action, which happens asynchronously, thus it would be ideal to refresh inside the remote action method callback in the dataBinding event function. But yeah, doing so as I have tried just gives me the never-ending loop of dataBinding/reading.

I am grabbing events from a database then storing them locally in eventData, I know there are remote data examples of server filtering based on the start and end date of the current view, but those do not help in my situation with local data.

[Ianko]

Hello Tyler,

 

If I understand correctly, you need to filter the DataSource on the client so that the bound elements are always the ones that are in the start-end range.

 

I am not sure how this would optimize the performance of the application. If performance should be optimized, the proper way is to implement server filtering. http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/filtering/server-filtering. 

 

Filtering on the client will request all possible data, but just process filtering on the client. So, running filtering logic over a great amount of the data might actually lead to slower performance. But still, it is your call to use such an option. 

 

Generally, you should add a global flag to stop any DataSource processing (I suggest you using the filter method) after the client-side filtering is complete. And reset it back when the user navigates.

 

Here you are an example for the case:

<div id="scheduler"></div>
<script>
    var toFilter = true;

    $("#scheduler").kendoScheduler({
       ...
        dataBinding: function (e) {
            filter(e);
            // This will help you see what items are bound to the Scheduler
            console.log(e.items);
        },
        navigate: function () {
            toFilter = true;
        }
    });

    function filter(e) {
        if (toFilter) {
            toFilter = false;
            e.sender.dataSource.filter([
                { field: "start", operator: "gte", value: e.sender.view().startDate() },
                { field: "end", operator: "lte", value: e.sender.view().endDate() }]);
        }
    }
</script>

 

 

Regards,
Ianko
Telerik by Progress

[Tyler]

Thank you for the reply.

 

I am actually doing filtering on the server side, I send a request to my controller with the current start and end of the view the user is going to, then the server pulls just those events, I receive them back, set my array of kendo events that read() takes in to the results, then read() to refresh. What I ended up doing was just setting a flag to prevent my call back to dataSource.read() in the dataBinding function if it has just read.

 

But setting the flag in the navigate would probably work better... considering my flag doesn't work when the user changes any filtering options (outside of view navigation) because it will run the date range query again, which is unnecessary time spent grabbing the same events.

[Tyler]

Oh yes, and I am using local data. I access remote methods in my controller, they run asynchronously and return results in a callback to my client side scheduler where I then store the information locally and utilize that for filtering and what not. So the server filtering examples don't quite help as I am not utilizing remote data and my CRUD operations have custom functions for each one, and I do not use the parameterMap operation since it is not remote.

It is more of custom date filtering with the scheduler.

[Ianko]

Hello Tyler,

In that case, I believe, you have been able to handle the case with the custom data binding and filtering with the solution provided in your previous post—using a flag to prevent additional read calls when your filtering is processed.   

Regards,
Ianko
Telerik by Progress