I am using Scheduler control from Kendo. I am trying to render daily capacity (Hard coded 30% now) in header of each day as shown in below screen. How can I replace hard coded by data from datasource?
Here is the code I have used. I have HARD CODED 30% in below code
<!DOCTYPE html><html><head><style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style><title></title><link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" /><link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" /><link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" /><link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" /><link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.mobile.min.css" /><script src="Scripts/jquery.min.js"></script><script src="Scripts/kendo.web.min.js"></script><script> $(function () { $('#scheduler').kendoScheduler({ date: new Date("2013/09/02"), dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"), }); });</script></head><body> <div id="scheduler"></div>/body>
Now, I will be getting 'percentage' from API, and want to set to datasource, and from datasource i want to render it to header
var datasource = new kendo.data.SchedulerDataSource({ data:Model.recordCollection // setting data});scheduler.setDataSource(datasource);but this datasource is calendar event related, this will not contain the daily capacity. so how do I set daily capacity data from different datasource? Multiple datasource supported?
1 Answer, 1 is accepted
Hello RAJESH,
The Scheduler widget's DataSource is not passed to the headerDateTemplate. However, in order to implement the desired functionality, you could assign the array with the data to a global variable and access it from within the template. Similar to the following:
<script> var dailyCapacities = [ { date: new Date("2013/6/2"), value: 30 }, { date: new Date("2013/6/3"), value: 40 }, { date: new Date("2013/6/4"), value: 12 }, { date: new Date("2013/6/5"), value: 12 }, { date: new Date("2013/6/6"), value: 40 }, { date: new Date("2013/6/7"), value: 23 }, { date: new Date("2013/6/8"), value: 42 }, /*..*/ ]; function percentage(date) { var value = 0; var item; for (var idx = 0; idx < dailyCapacities.length; idx++) { item = dailyCapacities[idx]; if (item.date.getTime() == date.getTime()) { value = item.value; break; } } return value; } $(function() { $("#scheduler").kendoScheduler({ date: new Date("2013/6/6"), views: ["week"], dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (#=percentage(date)#%)"), dataSource: [ /*..*/ ] }); }); </script>Rosen
Telerik