Edit this page

Configure SignalR Data Source with Server Filtering

To see the example, refer to the project on how to configure Scheduler SignalR DataSource to load events with server filtering in ASP.NET MVC applications.

The scenario adopted by the project considers the following aspects of the implementation:

  • You need to set the serverFiltering option of the DataSource in the Scheduler to true. This way, the widget automatically sends a read call to the local hub (service) upon each navigation which occurs in the Scheduler.
  • The project applies a parameterMap function for the transport object of the DataSource. If a read action occurs, this function sends the start and end dates of the visible range of the Scheduler. If other actions occur, the function only sends the edited or the new data.

        function onMap(data, type) {
            switch (type) {
                case "read": {
                    return forRead(data, type);
                }
                default: {
                    return data;
                }
            }
        }
    
        function forRead(data, type) {
            var scheduler = $("#scheduler").data("kendoScheduler");
    
            var timezone = scheduler.options.timezone;
            var startDate = kendo.timezone.convert(scheduler.view().startDate(), timezone, "Etc/UTC");
    
            var initialEndDate = scheduler.view().endDate();
            var augmentedEndDate = new Date(initialEndDate.valueOf());
            augmentedEndDate.setDate(initialEndDate.getDate() + 1);
            var endDate = kendo.timezone.convert(augmentedEndDate, timezone, "Etc/UTC");
    
            var result = {
                Start: new Date(startDate.getTime() - (startDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE)),
                End: new Date(endDate.getTime() - (endDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE))
            }
    
            console.log(result);
    
            return result;
        }
    
  • The project applies a FilterRange model class to ensure the proper parsing of the sent range of data. The setters of the start and end properties convert the dates to UTC.

  • The SignalR ProductHub Read endpoint accepts one parameter of type FilterRange and returns the filtered results to the client.

    public IEnumerable<MeetingViewModel> Read(FilterRange range)
    {
        var result = meetingService.GetAll().Where(t => t.Start < range.End && (t.End > range.Start || t.RecurrenceRule != null));
        return result;
    }
    

See Also

For more runnable examples on the Kendo UI Scheduler in ASP.NET MVC applications, browse its How To documentation folder.