1

我正在评估 Kendo UI 甘特图，看看它是否符合我们的项目要求。

一个特殊的要求是显示一个状态列，该列在编辑模式下是一个下拉菜单，具有三种状态

  1. 红色 2. 绿色 3. 黄色，以及如下图所示的图像指示器

在此处输入图像描述

在使用自定义编辑器进行下拉后编辑单元格时，我能够实现上述效果

function statusDropDownEditor(container, options) {
        $('<input data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "Status",
                dataValueField: "StatusId",
                valueTemplate: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>',
                template: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>',
                dataSource: {
                    transport: {
                        read: function (e) {
                            // on success
                            e.success([{ Status: 'Not Started', StatusId: '0', Url: 'Image/red.png' }, { Status: 'Red', StatusId: '1', Url: 'Image/red.png' }, { Status: 'Green', StatusId: '2', Url: 'Image/red.png' }, { Status: 'Yellow', StatusId: '3', Url: 'Image/red.png' }]);
                            // on failure
                            //e.error("XHR response", "status code", "error message");
                        }
                    }
                }
            })
    }

状态的甘特列看起来像下面的片段

{ field: "status", title: "Status", editable: true, width: 150, editor: statusDropDownEditor, template: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>' }

但是，当从下拉列表中选择特定项目并退出编辑模式时，这就是单元格的样子

在此处输入图像描述

似乎只读模式下的默认单元格模板不呈现 html 并且调用绑定到单元格的对象的 toString ，有没有办法在剑道 UI 甘特图中解决这个问题

4

1 回答 1

0

我今天一直在尝试解决同样的问题，看起来甘特列不支持模板属性。

我在 Kendo 用户反馈网站上创建了一个新功能建议。如果有足够多的人投票支持它，也许他们会实施这一点。

我发现的唯一解决方法是像这样在字段列上添加一个图像标签。但这个解决方案不是有条件的。

<div id="gantt"></div>
<script>
    $(document).ready(function() {

        var gantt = $("#gantt").kendoGantt({
            dataSource: [
              {
                id: 1,
                title: "apples",
                orderId: 0,
                parentId: null,
                start: new Date("2015/1/17"),
                end: new Date("2015/10/17"),
                summary:false,
                expanded:false
              },
              {
                id: 2,
                orderId: 1,
                parentId: null,
                title: "banana",
                start: new Date("2015/1/17"),
                end: new Date("2015/3/17"),
                summary:false,
                expanded:true
              }
            ],
            views: [
                { type: "year", selected: true }
            ],
            columns: [
                { field: "title", title: "fruit", width: 220 },
                { field: "start", title: "start", width: 80 }
            ],
        }).data("kendoGantt");

        $(".k-grid-content tbody[role='rowgroup'] tr[role='row'] td:first-child").prepend("<img href='#' alt='image here'></img>");

    });

</script>

示例页面在git 上。

于 2015-08-17T11:56:39.510 回答