Dynamically Filter Resource Groups by Using MultiSelect in Scheduler
Environment
| Product | Progress® Kendo UI® Scheduler for jQuery |
| Operating System | Windows 8.1 |
| Browser | Google Chrome |
| Browser Version | 61.0.3163.100 |
Description
How can I show only the selected resource groups in the Scheduler and use the Kendo UI MultiSelect to perform this operation?
Solution
- Bind the MultiSelect to the data source with the resources which the Scheduler uses.
- Subscribe to the
changeevent of the MultiSelect. - Store the dataItems, which represent the selected resources, in an array.
- Update the resources of the Scheduler, based on the selection on the MultiSelect, by passing the array to the
datamethod of the DataSource object in the Scheduler. - Refresh the layout by resetting the selected view of the Scheduler.
<body>
<input type="text" id="comboBox" name="comboBox" />
<div id="example">
<div id="scheduler"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2022/6/13"),
startTime: new Date("2022/6/13 07:00 AM"),
height: 600,
views: [
"day",
"month",
"week",
"workWeek",
{
type: "agenda",
selected: true
}
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: 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"
}
}
}
}
},
resources: [{
field: "ownerId",
title: "Owner",
name: "Owners",
dataSource: []
}]
});
$("#comboBox").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
change: function(e) {
var scheduler = $("#scheduler").data("kendoScheduler");
var dataItems = this.dataItems();
var checked = new Array()
if (dataItems.length == 0) {
delete scheduler.options.group;
} else {
scheduler.options.group = {
resources: ["Owners"],
orientation: "horizontal"
};
}
dataItems.forEach(function(item, index) {
var itemToAdd = {
text: item.text,
value: item.value,
color: item.color
};
checked.push(itemToAdd)
})
scheduler.resources[0].dataSource.data(checked);
scheduler.view(scheduler.view().name);
},
dataSource: {
data: [{
text: "Alex",
value: 1,
color: "#f8a398"
},
{
text: "Bob",
value: 2,
color: "#51a0ed"
},
{
text: "Charlie",
value: 3,
color: "#56ca85"
}
]
}
});
});
</script>
</body>