Rendering data in kendo scheduler control header - dateHeaderTemplate

前端 未结 1 620
暗喜
暗喜 2021-01-28 17:20

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 b

相关标签:
1条回答
  • 2021-01-28 18:09

    You could use scheduler databound event to modify its date header template, and you have to use string temporary character inside that template which will be replaced by current day capacity value.

    <span class='k-nav-day'><u>#=kendo.toString(date, 'dd/M')#</u> - ({dc}%)</span>
    

    You can use this selector to get date header element

    $(".k-scheduler-header .k-scheduler-table th span.k-nav-day")
    

    Then change its text inside scheduler databound event. I have make a dojo for this, hopes this help you understand.

    -----------Answer for updated question 1--------------

    If you have a collection of object rather than array of string, it doesn't matter. You could replace it, but with another tweak in the code.

    You should add the date value as data attribute in date header template

    <script id="tmpDateHeader" type="text/x-kendo-template">
        <span class="k-nav-day" data-dt="#=kendo.toString(date, 'dd/MM/yyyy')#">
            <u>#=kendo.toString(date, "dd/M")#</u> - ({dc}%)
        </span>
    </script>
    

    and use it like this

    $("#scheduler").kendoScheduler({
        dateHeaderTemplate: kendo.template($("#tmpDateHeader").html())
    }
    

    You can see we have data attribute data-dt here and it should have same format with value in date property of daily capacity data source. Then you have to get that attribute value to find matched object in your data source.

    // code in scheduler databound inside each scope
    var dateOfHeader = $(this).data("dt"); // get date value from template
    var matchData = // find in data source, where object.date == dateOfHeader 
    var newtext = text.replace("{dc}", matchData.percentage);
    

    I hope you can do the rest.

    -----------Answer for updated question 2--------------

    to change its container background use this

    $(this).parent().css("background-color", actualColor[index]);
    
    0 讨论(0)
提交回复
热议问题