Configuring the Scheduler with SignalR DataSource and Server Filtering

Environment

Product	Telerik UI for ASP.NET MVC Scheduler
Product Version	Created with version 2024.4.1112

Description

How can I filter the events of the ASP.NET MVC Scheduler that uses SignalR DataSource on the server based on the selected date range in the current view?

Solution

• Enable the ServerFiltering() option of the DataSource in the Scheduler. This way, the component automatically sends a read call to the local hub (service) upon each navigation that occurs in the Scheduler.

      @(Html.Kendo().Scheduler<MeetingViewModel>()
          .Name("scheduler")
          ...// Additional configuration.
          .DataSource(dataSource => dataSource
              .SignalR()
              .ServerFiltering(true)
              ...// Additional configuration.
          )
      )
  

• Specify the ParameterMap() option to send the start and end dates of the visible range of the Scheduler to the server when a Read action occurs. In the case of Create, Update, or Destroy action, the function will only send the respective new, edited, or deleted event data.

      @(Html.Kendo().Scheduler<MeetingViewModel>()
          .Name("scheduler")
          ...// Additional configuration.
          .DataSource(dataSource => dataSource
              .SignalR()
              .ServerFiltering(true)
              .Transport(tr => tr
                  .ParameterMap("onMap")
                  .Promise("hubStart")
                  .Hub("meetingHub")
                  .Client(c => c
                      .Read("read")
                      .Create("create")
                      .Update("update")
                      .Destroy("destroy"))
                  .Server(s => s
                      .Read("read")
                      .Create("create")
                      .Update("update")
                      .Destroy("destroy")))
                  ...// Additional configuration.
          )
      )
  

      <script>
          function onMap(data, type) {
              switch (type) {
                  case "read": {
                      return forRead(data, type);
                  }
                  default: {
                      return data;
                  }
              }
          }
  
          function forRead(data, type) {
              var scheduler = $("#scheduler").data("kendoScheduler"); // Get a reference to the Scheduler.
  
              var timezone = scheduler.options.timezone; // Access the specified time zone option.
              var startDate = kendo.timezone.convert(scheduler.view().startDate(), timezone, "Etc/UTC"); // Add the time difference to the "Start" date between the Schduler time zone and the "Etc/UTC" time zone.
  
              var initialEndDate = scheduler.view().endDate(); // Get the "End" date from the current view.
              var augmentedEndDate = new Date(initialEndDate.valueOf()); // Parse it to Date() object.
              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))
              }
  
              return result; // Pass the current "Start" and "End" dates to the server.
          }
      </script>
  

• Create a FilterRange Model to ensure the received date range is parsed correctly. Define the setters of the start and end properties to convert the dates to UTC.

      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
  
      public class FilterRange
      {
          private DateTime start;
          public DateTime Start
          {
              get { return start; }
              set
              {
                  start = value.ToUniversalTime();
              }
          }
  
          private DateTime end;
          public DateTime End
          {
              get { return end; }
              set
              {
                  end = value.ToUniversalTime();
              }
          }
      }
  

• Intercept the parameter of type FilterRange in the Read Action in the ProductHub.cs and return the filtered events data to the client.

      public class ProductHub : Hub
      {
          private SchedulerMeetingService meetingService;
  
          public ProductHub()
          {
              meetingService = new SchedulerMeetingService(new SampleEntities1());
          }
  
          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;
          }
      }
  

For a runnable example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository.

More ASP.NET MVC Scheduler Resources

• ASP.NET MVC Scheduler Documentation

• ASP.NET MVC Scheduler Demos

• ASP.NET MVC Scheduler Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Scheduler for ASP.NET MVC

• Server-Side API Reference of the Scheduler for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base