This is a migrated thread and some comments may be shown as answers.
Want to show google icons/images into gantt chart columns along with start/end date columns
5 Answers 34 Views
This is a migrated thread and some comments may be shown as answers.
Ajmal
Top achievements
Rank 1
Ajmal asked on 06 Nov 2017, 09:49 AM

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 }
        ],
)}

5 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 08 Nov 2017, 08:00 AM
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:



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Nabil
Top achievements
Rank 1
answered on 08 Jan 2018, 12:48 PM
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
0
Viktor Tachev
Telerik team
answered on 09 Jan 2018, 12:20 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Nabil
Top achievements
Rank 1
answered on 10 Jan 2018, 05:14 AM
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 ?
0
Viktor Tachev
Telerik team
answered on 11 Jan 2018, 01:00 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Ajmal
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Nabil
Top achievements
Rank 1
Share this question
or