Server Filtering of the Scheduler Events

Environment

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

Description

How can I filter the events of the ASP.NET Core Scheduler on the server based on the selected date range in the current view?

Solution

1. Enable the ServerFiltering() option of the DataSource in the Scheduler. This way, the component automatically sends a Read request to the remote endpoint upon each navigation that occurs in the Scheduler.

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

       @addTagHelper *, Kendo.Mvc
   
       <kendo-scheduler name="scheduler">
           <!-- Other configuration -->
           <scheduler-datasource type="@DataSourceTagHelperType.Ajax" server-filtering="true">
               <!-- Other configuration -->
           </scheduler-datasource>
       </kendo-scheduler>
   

2. Set the Data() option to the Read request configuration and add a handler that will send the start and end dates of the visible range of the Scheduler to the server. This will occur when the Read action is triggered.

       @(Html.Kendo().Scheduler<TaskViewModel>()
           .Name("scheduler")
           ...// Additional configuration.
           .DataSource(dataSource => dataSource
               .ServerFiltering(true)
               .Read(read => read.Action("Read", "Home").Data("getAdditionalData"))
               .Create("Create", "Home")
               .Destroy("Destroy", "Home")
               .Update("Update", "Home")
                   ...// Additional configuration.
           )
       )
   

       @addTagHelper *, Kendo.Mvc
   
       <kendo-scheduler name="scheduler">
           <!-- Other configuration -->
           <scheduler-datasource type="@DataSourceTagHelperType.Ajax" server-filtering="true">
               <transport>
                   <read url="@Url.Action("Read", "Home")" data="getAdditionalData"/>
                   <create url="@Url.Action("Create", "Home")" />
                   <destroy url="@Url.Action("Destroy", "Home")" />
                   <update url="@Url.Action("Update", "Home")" />
               </transport>
               <!-- Other configuration -->
           </scheduler-datasource>
       </kendo-scheduler>
   

   <script>
       function getAdditionalData() {
           var scheduler = $("#scheduler").data("kendoScheduler"); // Get a reference to the Scheduler.
   
           var timezone = scheduler.options.timezone; // Get the time zone from its options.
           var startDate = kendo.timezone.convert(scheduler.view().startDate(), timezone, "Etc/UTC"); // Add the time difference between the Schduler time zone and the "Etc/UTC" time zone.
           var endDate = kendo.timezone.convert(scheduler.view().endDate(), timezone, "Etc/UTC");
   
           var startTime = 0;
           var endTime = 0;
   
           if (scheduler.view().startTime) {
               // Optionally, add startTime / endTime of the view.
               startTime = kendo.date.getMilliseconds(scheduler.view().startTime());
               endTime = kendo.date.getMilliseconds(scheduler.view().endTime());
               endTime = endTime == 0 ? kendo.date.MS_PER_DAY : endTime;
           }
   
           var result = {
               Start: new Date(startDate.getTime() - (startDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE) + startTime),
               End: new Date(endDate.getTime() - (endDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE) + endTime)
           }
   
           return result; // Pass the current "Start" and "End" dates to the server.
       }
   </script>
   

3. 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();
               }
           }
       }
   

4. Intercept the parameter of type FilterRange in the Read Action and return the filtered events data to the Scheduler.

       public virtual JsonResult Read(DataSourceRequest request, FilterRange range)
       {
           var data = taskService.GetRange(range.Start, range.End);
           return Json(data.ToDataSourceResult(request));
       }
   

For a runnable example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.

More ASP.NET Core Scheduler Resources

• ASP.NET Core Scheduler Documentation

• ASP.NET Core Scheduler Demos

• ASP.NET Core Scheduler Product Page

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

• Telerik UI for ASP.NET Core Forums

See Also

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

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

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

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base