New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Server Filtering of the Scheduler Events

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 on the server based on the selected date range in the current view?

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.

Razor

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

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.

Razor
    @(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.
        )
    )
Html
<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>

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.

FilterRange.cs

    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 and return the filtered events data to the Scheduler.

HomeController.cs

    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.

Server Filtering of the Scheduler Events

Environment

Description

Solution

More ASP.NET MVC Scheduler Resources

See Also