This is a migrated thread and some comments may be shown as answers.

Rendering data in kendo scheduler control header - dateHeaderTemplate

1 Answer 80 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Avinash
Top achievements
Rank 1
Avinash asked on 18 May 2015, 05:00 PM

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?

Screen Shot

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>
 
<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

Sort by
0
Rosen
Telerik team
answered on 20 May 2015, 12:37 PM

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>

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Avinash
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or