Rendering data in kendo scheduler control header - dateHeaderTemplate

2 posts, 0 answers
  1. Avinash
    Avinash avatar
    7 posts
    Member since:
    Sep 2014

    Posted 18 May 2015 Link to this post

    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?

     

  2.
  3. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 20 May 2015 Link to this post

    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!
     
Back to Top