Pass custom data to Scheduler Resources to be consumed in HeaderTemplate
Environment
| Product Version | 2018.2.620 |
| Product | Progress® Kendo UI® Scheduler for jQuery |
Description
By default, the resource object includes a specific set of fields (title, value, color, etc.). My resources dataSource returns those fields, but also includes other customer fields (a, b, x, y, z for example). Is there a way to use these values in the groupHeaderTemplate?
Solution
- Crate a
groupHeaderTemplatewith the additional custom fields:
<script id="groupHeaderTemplate" type="text/x-kendo-template">
<div class="container">
<label>#=text#</label>
<div id="customField-timezone-#=value#">a</div>
<div id="customField-message-#=value#">b</div>
<div id="customField-status-#=value#">x</div>
</div>
</script>
- Initialize a Kendo Scheduler and when specifying the groupHeaderTemplate pass a custom function that would iterate the widget's dataSource, pass the custom values to the template and return the template:
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
...
groupHeaderTemplate: function (item) {
var scheduler = $("#scheduler").data("kendoScheduler");
var resourceData = scheduler.resources[0].dataSource.data();
for (var i = 0; i < resourceData.length; i++) {
if (resourceData[i].value == item.value) {
item.timezoneOffset = resourceData[i].timezoneOffset > 0 ? "+" + resourceData[i].timezoneOffset : resourceData[i].timezoneOffset;
item.message = resourceData[i].message;
item.status = resourceData[i].status;
break;
}
}
var template = kendo.template($("#groupHeaderTemplate").html());
return template(item);
}
...
})
</script>