This is a migrated thread and some comments may be shown as answers.
Display image along with text in a cell when in non-edit mode
1 Answer 33 Views
This is a migrated thread and some comments may be shown as answers.
Abhilash
Top achievements
Rank 1
Abhilash asked on 22 May 2015, 12:59 PM

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 statusesRed 2. Green 3. Yellow, along with an image indicator something like what is shown in the image1 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(image2) 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

1 Answer, 1 is accepted

Sort by
0
Dimitar Terziev
Telerik team
answered on 26 May 2015, 06:39 AM
Hi,

The current implementation of the gantt widget does not offer support for cell templates. One could define format for the cell value through the column format option.

Regards,
Dimitar Terziev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Gantt
Asked by
Abhilash
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Share this question
or