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

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?

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.

Razor

    @(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.

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

Configuring the Scheduler with SignalR DataSource and Server Filtering

Environment

Description

Solution

More ASP.NET MVC Scheduler Resources

See Also