Want to show google icons/images into gantt chart columns along with start/end date columns

[Ajmal]

need to show google icons into gantt chart column according to the status of task. Here is my code!
var tasksDataSource = new kendo.data.GanttDataSource({
    data:DS,
        schema: {
            model: {
                id: "id",
                fields: {
                    sr: { from: "sr", type: "number" },
                    id: { from: "id", type: "string" },
                    runtimes: { from: "runtimes"}, 
                    parentId: { from: "parentId", type: "string", defaultValue: null, validation: { required: true } },
                    start: { from: "start", type: "date", format: "{0:MM/dd/yyyy}" },
                    end: { from: "end", type: "date", format: "{0:MM/dd/yyyy}" },
                    diff: { from:"diff", type: "string" },
                    title: { from: "title", defaultValue: "", type: "string" },
                    summary: { from: "summary", type: "boolean" },
                    expanded: { from: "expanded", type: "boolean", defaultValue: true }
                },
                computedRuntimes: function() {
if (this.runtimes == JSON.stringify({"included":true,"pending":true,"executed":false}) ) {
//return relevent image
}
if (this.runtimes == JSON.stringify({"included":true,"pending":true,"executed":true}) ) {
//return relevent image
}
if (this.runtimes == JSON.stringify({"included":false,"pending":false,"executed":true}) ) {
//return relevent image
}
if (this.runtimes == JSON.stringify({"included":true,"pending":false,"executed":true}) ) {
//return relevent image
}

}
            },
        }
    });

var gantt = $("#gantt").kendoGantt({

dataSource: tasksDataSource,
dependencies: dependenciesDataSource,
columns: [
            { field: "sr", title:"Sr.#", width: 60 },
            { field: "id", title: "Task ID", width: 100 },          
            { field: "computedRuntimes()", title: "Status", width: 65},
            { field: "title", title: "Title", editable: true, sortable: true },
            // { field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 120, editable: true, sortable: true },
            // { field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 120, editable: true, sortable: true },
            { field: "diff", title: "Duration", width: 80 },
            { field: "resources", title: "Assigned Resources", editable: true }
        ],
)}

[Viktor Tachev]

Hi Ajmal,

In order to customize the Gantt appearance you can use templates for the tasks. Please check out the demo below that illustrates the functionality:

• http://demos.telerik.com/kendo-ui/gantt/task-template

Regards,
Viktor Tachev
Progress Telerik

[Nabil]

In the demo image is showing using the ID property of resource. what if we dont want to use ID property as image path and want to have separate property "ImagePath" as image path to resource ? how can i do that

[Viktor Tachev]

Hello nabil,

The template in the example is using the id field, but accessing another field will be similar. You need to configure the resources to read the corresponding imagePath field and reference it in the template like this:

<img class="resource-img" src="#:resources[0].imagePath#.jpg" />

Regards,
Viktor Tachev
Progress Telerik

[Nabil]

yeah i did exactly the same in template but get "undefined" in my imagepath field. should i refer this field somewhere else also except the template ?

[Viktor Tachev]

Hi Nabil,

Would you send us a dojo example where the behavior is replicated? This will enable us to examine the behavior locally and look for what is causing it.


Regards,
Viktor Tachev
Progress Telerik