正在更新 Kendo Scheduler 控件的自定义 header - dateHeaderTemplate

Question

我已经为 Kendo 调度程序编写了自定义 header。呈现如下

用于到达上面 UI 的代码在下面并且非常有效。（感谢 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 调度程序中的事件之一。在此更新期间，我想根据一些数据手动更改列日 header 百分比，例如从 1% 到 5%（这将来自数据库） 而不刷新 整个调度程序控件。

实时场景：当我在一天中添加更多事件时，header 列中的百分比应该增加。 API.

中提供了获取百分比和颜色的逻辑

解决方法

这里我想，我需要使用 jQuery

更新值

问题已解决：我刚刚在更新时更新了数据源。

Answer 1

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

这里是一个示例代码：

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

您应该看看他们的 Documentation，这样您就可以了解调度程序的行为。希望对您有所帮助。

正在更新 Kendo Scheduler 控件的自定义 header - dateHeaderTemplate

Updating the custom header of Kendo Scheduler control - dateHeaderTemplate

javascript

kendo-ui