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

6 posts, 0 answers
  1. Ajmal
    Ajmal avatar
    2 posts
    Member since:
    Oct 2017

    Posted 06 Nov 2017 Link to this post

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

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1971 posts

    Posted 08 Nov 2017 Link to this post

    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.
  3. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 08 Jan in reply to Viktor Tachev Link to this post

    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
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1971 posts

    Posted 09 Jan Link to this post

    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.
  5. Nabil
    Nabil avatar
    29 posts
    Member since:
    Dec 2017

    Posted 09 Jan in reply to Viktor Tachev Link to this post

    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 ?
  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1971 posts

    Posted 11 Jan Link to this post

    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.
Back to Top