在非编辑模式下，在单元格中显示图像和文本

Question

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

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

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，有没有办法在ken​​do UI Gantt中修复它

Answer 1

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

我创建了一个新的feature suggestion on the Kendo user feedback site。如果有足够多的人投票支持，也许他们会实施这一点。

我发现的唯一工作是将图像标记添加到字段列中，就像这样。但是这个解决方案不是有条件的。

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

sample page是git。