In assessing the compatibility of the Kendo UI Gantt chart with our project requirements, one specific need arises: the display of a status column as a dropdown in edit mode, featuring three statuses - Red, Green, and Yellow, accompanied by an image indicator akin to the example below:
- Red 2. Green 3. Yellow, along with an image indicator something like what is shown in the image below
To achieve this desired effect when editing a cell, a custom editor for the dropdown was utilized successfully:
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 appears as follows:
{ 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, upon selecting an item from the dropdown and exiting edit mode, the cell's appearance changes unexpectedly:
It appears that the default cell template in read-only mode fails to render HTML and invokes the object's toString method instead. Is there a way to rectify this issue within the Kendo UI Gantt framework?