更新 Kendo Scheduler 控件的自定义标头 - dateHeaderTemplate

问题描述

我为 Kendo Scheduler 编写了自定义标头.呈现如下

I have written custom header for Kendo Scheduler. Which rendered as below

用于到达上述 UI 的代码如下所示，并且效果很好.(感谢 Dion Dirza)，

The code used to arrive at above UI is below and worked like charm.(thanks to Dion Dirza),

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

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

问题

现在，我正在更新 Kendo Scheduler 中的一个事件.在此更新期间，我想根据某些数据手动更改列日标题百分比，例如从 1% 到 5%(将来自 DB)无需刷新整个调度程序控件.

Now, I am UPDATING one of the EVENTS in Kendo Scheduler. During this update, I want to manually change the column day header percentage based on some data, like from 1% to 5% (which will come from DB) without refreshing entire scheduler control.

实时场景:当我为一天添加更多事件时，列标题中的百分比应增加.API 中提供了获取百分比和颜色的逻辑.

Real time scenario : When I add more EVENTS for a day, the percentage should increase in column header. The logic to get the percentage and color is available in API.

解决方法

这里我想，我需要使用 jQuery 更新值

Here I think, I need to update the value using jQuery

问题已解决:我刚刚在更新触发时更新了数据源.

Issue resolved: I just updated the data source on update fire.

推荐答案

可以查看数据源 change 事件.现在我假设您的事件模型中有 Date 属性.您需要获取更新的事件 date 并选择与之匹配的 date header.

You can take a look on data source change event. Now I suppose you have Date property in your Event model. You need to grab updated event date and select match date header with that.

这是一个示例代码:

var dateChanged = null;

function onDsChange(e) {
    var action = e.action;

    switch(action) {
    case "itemchange":
        var items = e.items; // all item that you have changed
        var item = items[0]; // I assume you are not doing batch editing 

        dateChanged = item.date; // if you are doing batch then dateChange should be array of date
        break;
    case "sync": // you also can do this inside grid databound event
        // grab actual data from API and do update the header
        .......
        // if this batch editing you need to do this inside a loop
        var selector = ".k-nav-day[data-dt='" + dateChange + "']";
        var elDateHeader = $(selector);
        var tempText = elDateHeader.text();
        var newText = tempText.replace(/((.+?))/g, "(" + newPercentage + ")");

        elDateHeader.text(newText);
        break;
    }
}

您应该查看他们的文档，以便您可以获取调度程序的行为应该是什么.希望这会有所帮助.

You should take a look on their Documentation, so you can get scheduler's behavior like what it should be. Hope this help.

这篇关于更新 Kendo Scheduler 控件的自定义标头 - dateHeaderTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！