New to Kendo UI for jQueryStart a free 30-day trial

Filter Resources by Using a Kendo UI ComboBox in Scheduler

Environment

ProductProgress® Kendo UI® Scheduler for jQuery
Operating SystemWindows 8.1
BrowserGoogle Chrome
Browser Version61.0.3163.100

Description

How can I filter the events by resources in the Scheduler with a Kendo UI ComboBox or DropDownList?

Solution

  1. Make sure that you have a separate ComboBox or DropDownList widget on the page.
  2. Supply the widget with data which is identical to the resources that are used for the Scheduler.
  3. Subscribe to the change event of the widget.
  4. Filter the data source of the Scheduler by using the selection of the ComboBox or DropDownList.

For the full implementation of the approach, refer to this Dojo example.

<div id="example">
    <input type="text" id="comboBox" name="comboBox" />
    <br />
    <div id="scheduler"></div>
</div>
<script>
    $(function() {
        var scheduler = $("#scheduler").kendoScheduler({
            date: new Date("2025/6/13"),
            startTime: new Date("2025/6/13 07:00 AM"),
            height: 600,
            views: [
                "day",
                {
                    type: "workWeek",
                    selected: true
                },
                "week",
                "month",
                "agenda",
                {
                    type: "timeline",
                    eventHeight: 50
                }
            ],
            timezone: "Etc/UTC",
            dataSource: {
                batch: true,
                transport: {
                    read: {
                        url: "https://demos.telerik.com/service/v2/core/tasks"
                    },
                    update: {
                        url: "https://demos.telerik.com/service/v2/core/tasks/update",
                        type: "POST",
                        contentType: "application/json"
                    },
                    create: {
                        url: "https://demos.telerik.com/service/v2/core/tasks/create",
                        type: "POST",
                        contentType: "application/json"
                    },
                    destroy: {
                        url: "https://demos.telerik.com/service/v2/core/tasks/destroy",
                        type: "POST",
                        contentType: "application/json"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return kendo.stringify(options.models);
                        }
                    }
                },
                schema: {
                    model: {
                        id: "taskId",
                        fields: {
                            taskId: {
                                from: "TaskID",
                                type: "number"
                            },
                            title: {
                                from: "Title",
                                defaultValue: "No title",
                                validation: {
                                    required: true
                                }
                            },
                            start: {
                                type: "date",
                                from: "Start"
                            },
                            end: {
                                type: "date",
                                from: "End"
                            },
                            startTimezone: {
                                from: "StartTimezone"
                            },
                            endTimezone: {
                                from: "EndTimezone"
                            },
                            description: {
                                from: "Description"
                            },
                            recurrenceId: {
                                from: "RecurrenceID"
                            },
                            recurrenceRule: {
                                from: "RecurrenceRule"
                            },
                            recurrenceException: {
                                from: "RecurrenceException"
                            },
                            ownerId: {
                                from: "OwnerID",
                                defaultValue: 1
                            },
                            isAllDay: {
                                type: "boolean",
                                from: "IsAllDay"
                            }
                        }
                    }
                },
                filter: {
                    logic: "or",
                    filters: [{
                            field: "ownerId",
                            operator: "eq",
                            value: 1
                        },
                        {
                            field: "ownerId",
                            operator: "eq",
                            value: 2
                        },
                        {
                            field: "ownerId",
                            operator: "eq",
                            value: 3
                        },
                    ]
                }
            },
            resources: [{
                field: "ownerId",
                title: "Owner",
                dataSource: [{
                        text: "Alex",
                        value: 1,
                        color: "#f8a398"
                    },
                    {
                        text: "Bob",
                        value: 2,
                        color: "#51a0ed"
                    },
                    {
                        text: "Charlie",
                        value: 3,
                        color: "#56ca85"
                    }
                ]
            }]
        }).data("kendoScheduler");

        $("#comboBox").kendoComboBox({
            dataTextField: "text",
            dataValueField: "value",
            change: function(e) {
                var value = this.value();
                if (value) {
                    scheduler.dataSource.filter({
                        operator: function(task) {
                            var result = false;
                            if (task.ownerId == value) {
                                result = true;
                            }
                            return result;
                        }
                    });
                } else
                    scheduler.dataSource.filter([])
            },
            dataSource: {
                data: [{
                        text: "Alex",
                        value: 1,
                        color: "#f8a398"
                    },
                    {
                        text: "Bob",
                        value: 2,
                        color: "#51a0ed"
                    },
                    {
                        text: "Charlie",
                        value: 3,
                        color: "#56ca85"
                    }
                ]
            }
        });

    });
</script>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support