Display image along with text in a cell when in non-edit mode

Question

I'm evaluating the Kendo UI Gantt chart to see if it fits our project requirements.

One particular requirement is to display a status column which would be a drop down in edit mode and has three statuses

1. Red 2. Green 3. Yellow, along with an image indicator something like what is shown in the image below

I am able to achieve the above effect when i edit a cell after using a custom editor for the drop down

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

The Gantt Column for Status looks like the below snippet

{ 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>' }

However when done with selecting a particular item from drop down and on exiting the edit mode this is how the cell looks like

Seems like the default cell template in read only mode does not render html and the invokes the toString of the object bound to the cell, is there a way to fix this in the kendo UI Gantt

Answer 1

I have been trying to solve the same issue today and it looks like gantt columns do not support the template properties.

I have created a new feature suggestion on the Kendo user feedback site. If enough people vote for it maybe they will implement this.

The only work around I found was to prepend an image tag onto the field column like this. But this solution is not conditional.

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

The sample page is on git.