Our state of the art Gantt chart


Post by dhananjayan »

Using trial version angular example to customize tooltip using feature > taskTooltip.

On hover task, it is not executed.

Used below code in gantt.config.js inside ganttConfig variable

feature:{
        taskTooltip: {
            template : data => {
                console.log("DATA", data);
                return `<strong>${data.eventRecord.startdate}</strong>`
            } 
        },
}

Post by alex.l »

Hi dhananjayan,

First of all, please check if you used features (not feature) to define your configs (check our examples).
If so, please try to reproduce it with our examples and/or provide us full configs you defined and a version of Gantt you used, we will check it.

All the best,
Alex

All the best,
Alex


Post by dhananjayan »

Hi Alex,

Thanks for the quick reply. I used features it was a typing mistakes. Below you could find the full gantt.config.ts file.

/*!
 *
 * Bryntum Gantt 4.1.0 (TRIAL VERSION)
 *
 * Copyright(c) 2021 Bryntum AB
 * https://bryntum.com/contact
 * https://bryntum.com/license
 *
 */
// import { TaskTooltip } from '@bryntum/gantt';
// import { TaskTooltip } from '@bryntum/gantt/gantt.lite.umd.js';
import '../lib/GanttToolbar.js';
import '../lib/StatusColumn.js';
import Task from '../lib/Task.js';

const ganttConfig = {
    dependencyIdField : 'wbsCode',

project : {
    // Let the Project know we want to use our own Task model with custom fields / methods
    taskModelClass : Task,
    transport      : {
        load : {
            url : 'assets/data/launch-saas.json'
        }
    },
    autoLoad : true,

    // The State TrackingManager which the UndoRedo widget in the toolbar uses
    stm : {
        autoRecord : true
    }
},

startDate               : '2019-01-12',
endDate                 : '2019-03-24',
resourceImageFolderPath : 'assets/users/',
columns                 : [
    { type : 'wbs' },
    { type : 'name', width : 250, htmlEncode : false, editor: false, renderer({cellElement, row, record, value}) {
        console.log("value", row, record);
        return `<a href="#" style="margin-right: 10px;"><img src="assets/view.png" alt="View">${value}</a>`
    } },
    { type : 'startdate' },
    { type : 'duration' },
    { type : 'resourceassignment', width : 120, showAvatars : true },
    { type : 'percentdone', showCircle : true, width : 70 },
    {
        type  : 'predecessor',
        width : 112
    },
    {
        type  : 'successor',
        width : 112
    },
    { type : 'schedulingmodecolumn' },
    { type : 'calendar' },
    { type : 'constrainttype' },
    { type : 'constraintdate' },
    { type : 'statuscolumn' },
    {
        type  : 'date',
        text  : 'Deadline',
        field : 'deadline'
    },
    { type : 'addnew' }
],

subGridConfigs : {
    locked : {
        flex : 3
    },
    normal : {
        flex : 4
    }
},

columnLines : false,

features : {
    taskTooltip: {
        template : data => {
            console.log("DATA", data);
            return `<strong>${data.eventRecord.startdate}</strong>`
        } 
    },
    taskEdit: {
        disabled: true
    },
    rollups : {
        disabled : true
    },
    baselines : {
        disabled : true
    },
    progressLine : {
        disabled   : true,
        statusDate : new Date(2019, 0, 25)
    },
    filter         : true,
    dependencyEdit : true,
    timeRanges     : {
        showCurrentTimeLine : true
    },
    labels : {
        left : {
            field  : 'name',
            editor : {
                type : 'textfield'
            }
        }
    },
},

listeners : {
    taskMenuBeforeShow() {
        return false;
    },
    cellClick({ grid, record, column, cellSelector, cellElement, target, event }) {
        console.log("Cell click",grid, record, column, cellSelector, cellElement, target, event);
        debugger;
    }
},

tbar : {
    type : 'gantttoolbar'
}
};

export default ganttConfig;

Version I am using is
"@bryntum/demo-resources": "1.0.1",
"@bryntum/gantt": "npm:@bryntum/gantt-trial@4.1.0",
"@bryntum/gantt-angular": "4.1.0"


Post by mats »

It works just fine, there was a few errors in your code. This works:

features:{
        taskTooltip: {
            template : ({ taskRecord }) => {
                return `<strong>${taskRecord.startDate}</strong>`
            } 
        }
},

Post Reply