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

2 posts, 0 answers
  1. Abhilash
    Abhilash avatar
    8 posts
    Member since:
    Jan 2014

    Posted 22 May 2015 Link to this post

    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

  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 26 May 2015 Link to this post

    Hello Abhilash,

    I noticed that you have submitted another ticket, identical to this one, which my colleague already replied:

    http://www.telerik.com/forums/display-image-along-with-text-in-a-cell-when-in-non-edit-mode-6bbb1c0274b8

    In order to avoid duplication, I would suggest you to continue the correspondence in the other thread.

    For further reference, I would like to ask you to avoid submitting identical threads, as this might lead to confusion. Also, please make sure that you choose the correct Product Type.

    Regards,
    Nencho
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top