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

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

    Posted 06 Nov 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
    1799 posts

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