Our state of the art Gantt chart


Post by shimnx »

The assigned resources column does not need to be multiple-selected, only radio.You can see my picture I uploaded.Image


Post by mats »


Post by shimnx »

 { type: 'resourceassignment', width: 120, showAvatars: true, multiSelect: false, }

Is it right like this?


Post by mats »

Like so:

columns                 : [
        { type : 'name', field : 'name', text : 'Name', width : 250 },
        {
            type        : 'resourceassignment',
            width       : 250,
            editor      : {
                type   : AssignmentField.type,
                picker : {
                    height   : 350,
                    width    : 450,
                    selectionMode : { multiSelect : false },
                    features : {
                        filterBar  : true,
                        group      : 'resource.city',
                        headerMenu : false,
                        cellMenu   : false
                    },
                    // The extra columns are concatenated onto the base column set.
                    columns : [{
                        text       : 'Calendar',
                        // Read a nested property (name) from the resource calendar
                        field      : 'resource.calendar.name',
                        filterable : false,
                        editor     : false,
                        width      : 85
                    }]
                }
            }
        }
    ],

Post by shimnx »

What is 'AssignmentField.type'?

 ganttConfig = {

    project: {
        listeners: {
            change({ store, action, records }) {
                const { $name } = store.constructor;
                // console.log('store', $name)
                // console.log('records', records)
            }
        },
        // 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'
            // },
            sync: {
                url: '/some/sync/url'
            }
        },
        autoLoad: true,
        // The State TrackingManager which the UndoRedo widget in the toolbar uses
        stm: {
            autoRecord: true
        },
        phantomIdField: 'PhantomId',
        // This config enables responses validation and dumping of found errors to the browser console.
        // It's meant to be used as a development stage helper only so please set it to false for production systems.
        validateResponse: true
    },
    dependencyIdField: 'id',
    startDate: '2020-10-10',
    endDate: '2021-12-24',
    columns: [
        { type: 'wbs' },
        { type: 'name', width: 250 },
        { type: 'startdate' },
        { type: 'duration' },
        {
            type: 'resourceassignment', width: 120, showAvatars: true,
            editor: {
                picker: {
                    height: 350,
                    width: 450,
                    selectionMode: { multiSelect: false },
                    features: {
                        filterBar: true,
                        group: 'resource.name',
                        headerMenu: false,
                        cellMenu: false
                    },
                    // The extra columns are concatenated onto the base column set.
                    columns: [{
                        text: 'Calendar',
                        // Read a nested property (name) from the resource calendar
                        field: 'resource.name',
                        filterable: false,
                        editor: false,
                        width: 85
                    }]
                }
            }
        },
        { type: 'percentdone', showCircle: true, width: 70 },
        {
            type: 'predecessor',
            width: 112,
            dependencyIdField: 'wbsCode',
        },
        {
            type: 'successor',
            width: 112,
            dependencyIdField: 'wbsCode',
        },
        { 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: {

        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'
                }
            }
        }
    },

    tbar: {
        type: 'gantttoolbar'
    },
};

This is my code,it dosen't work.You also can look at my uploaded.Thank you!

Attachments
gant data.json
(11.46 KiB) Downloaded 50 times

Post by mats »

What is 'AssignmentField.type'?

It's a string found in the AssignmentField class which you should import. You can also replace it with 'assignmentfield'.

This is how you need to configure it:

 selectionMode : {
                        rowCheckboxSelection : true,
                        multiSelect          : false,
                        showCheckAll         : false
                    },


Post by shimnx »

How to import 'AssignmentField' or 'assignmentfield'


Post by mats »

It's a regular JS class:

import AssignmentField from '../../lib/Gantt/widget/AssignmentField.js';

Post by shimnx »

  ganttConfig = {
        project: {
            listeners: {
                change({ store, action, records }) {
                    console.log(store)
                    console.log(action)
                    console.log(records)
                }
            },
            // 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'
                // },
                sync: {
                    url: '/some/sync/url'
                }
            },
            autoLoad: true,
            // The State TrackingManager which the UndoRedo widget in the toolbar uses
            stm: {
                autoRecord: true
            },
            phantomIdField: 'PhantomId',
            // This config enables responses validation and dumping of found errors to the browser console.
            // It's meant to be used as a development stage helper only so please set it to false for production systems.
            validateResponse: true,
            changes(e){
                console.log(e)
            }
        },
        dependencyIdField: 'id',
        startDate: '2020-10-10',
        endDate: '2021-12-24',
        columns: [
            { type: 'wbs' },
            { type: 'name', width: 250 },
            { type: 'startdate' },
            { type: 'duration' },
            {
                type: 'resourceassignment', width: 120, showAvatars: true,
                editor: {

                picker: {
                    height: 350,
                    width: 450,
                    selectionMode: {
                        rowCheckboxSelection: true,
                        multiSelect: false,
                        showCheckAll: false,
                        selectionChange(event){
                            console.log(111)
                        },
                    },

                    features: {
                        filterBar: true,
                        group: 'resource.name',
                        headerMenu: false,
                        cellMenu: false,
                    },
                    // The extra columns are concatenated onto the base column set.
                    columns: [{
                        text: 'Calendar',
                        // Read a nested property (name) from the resource calendar
                        field: 'resource.name',
                        filterable: false,
                        editor: false,
                        width: 85,
                    }],
                },

            }
        },
        { type: 'percentdone', showCircle: true, width: 70 },
        {
            type: 'predecessor',
            width: 112,
            dependencyIdField: 'wbsCode',
        },
        {
            type: 'successor',
            width: 112,
            dependencyIdField: 'wbsCode',
        },
        { 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: {

        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'
                }
            }
        }
    },

    tbar: {
        type: 'gantttoolbar'
    },
};

How can I listen for changes in the resourceassignment and change events elsewhere on the listeners? The other problem is that the changes I'm listening for in the Listerners event don't seem to be in the format I want in the 'gantt.project.changes' method.

listeners: {
                change({ store, action, records }) {
                    console.log(store)
                    console.log(action)
                    console.log(records)
                }
            },

I want the data format to look like this:

{"tasks":{"updated":[{"name":"23323","id":"44de0dcb-29d4-410e-98ee-8f38984cc1dc"}]}}
Attachments
屏幕截图 2021-11-22 084846.png
屏幕截图 2021-11-22 084846.png (18.34 KiB) Viewed 531 times

Post by saki »

Re resourceassignment picker selectionChange listener: It has no effect when configured as a part of selectionModel. This will work:

        {
            type        : 'resourceassignment',
            width       : 120,
            showAvatars : true,
            editor      : {

                picker : {
                    height        : 350,
                    width         : 450,
                    selectionMode : {
                        rowCheckboxSelection : true,
                        multiSelect          : false,
                        showCheckAll         : false,

                    },
                    onSelectionChange(event) {
                        console.log(111);
                    },

// etc...

Re change listener: The signature of https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#event-change event is fixed and cannot be configured. However, it should not be difficult to change the arguments data to the form you need/want. The arguments slightly vary with the action so you may need to write a decision logic based on that.


Post Reply