在非编辑模式下显示图像以及单元格中的文本

Question

我正在评估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甘特

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