Our state of the art Gantt chart


Post by shimnx »

How do I listen for this event when I modify my Effort, and then limit the value entered by the user

Attachments
屏幕截图 2022-05-12 165819.png
屏幕截图 2022-05-12 165819.png (10.71 KiB) Viewed 265 times

Post by tasnim »

Hi,
You need to use the beforeFinishCellEdit event to achieve this.
Please check the docs https://bryntum.com/docs/gantt/api/Gantt/feature/CellEdit#event-beforeFinishCellEdit

Here is an example of how you can achieve it:

    listeners : {
        beforeFinishCellEdit({ inputField, value, oldValue }) {
            if(inputField.$$name === 'EffortField') {
                if(value.magnitude > oldValue.magnitude) {
                    // prevent executing the value
                    return false;
                }
            }
        }
    },

Best regards,
Tasnim


Post by shimnx »

I put it under Features but it doesn't seem to work

features: {
            listeners: {
                beforeFinishCellEdit({ inputField, value, oldValue }) {
                    console.log({ inputField, value, oldValue })
                    if (inputField.$$name === 'EffortField') {
                        if (value.magnitude > oldValue.magnitude) {
                            // prevent executing the value
                            return false;
                        }
                    }
                }
            },

Post by tasnim »

You put the listeners object in the wrong place.
please put it in the Gantt like this:

new Gantt({
	...
	listeners : {....}
});

Best regards,
Tasnim


Post by shimnx »

This is my project configuration. It still doesn't seem to work

ganttConfig = {
        beforeFinishCellEdit({ inputField, value, oldValue }) {
            console.log({ inputField, value, oldValue })
            if (inputField.$$name === 'EffortField') {
                if (value.magnitude > oldValue.magnitude) {
                    // prevent executing the value
                    return false;
                }
            }
        },
        viewPreset: {
            base: 'weekAndDay',
            id: 'myHourAndDayPreset',
            headers: [
                {
                    unit: "day",
                    increment: 12,
                    renderer: (startDate, endDate, headerConfig, cellIdx) => {
                        console.log(startDate, endDate, headerConfig, cellIdx)
                        return "";
                    }
                }
            ]
        },
        visibleDate: '2022-01-10',
        readOnly: true,
        listeners: {
            beforeEventDelete(event) {
                console.log(event);
                return false
            },

    },

    project: {
        listeners: {
            change({ store, action, records }) {
                console.log(action);
                // if(action !='dataset'){
                //     (window as any).GanttComponent.component.SaveGanttChange(this.project.inlineData)

                // }
            },
            
        },
        // 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: '2001-10-10',
    endDate: '2025-12-24',
    columns: [
        { type: 'wbs' },
        { type: 'name', width: 250 },
        { type: 'startdate' },
        { type: 'duration' },
        {
            type: 'effort',

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

            editor: {
                listeners: {
                    change({ store, action, records }) {
                        // console.log(records);
                        // (window as any).GanttComponent.component.SaveGanttChange(this.project.inlineData)
                    }
                },
                picker: {
                    height: 350,
                    width: 450,
                    selectionMode: {
                        rowCheckboxSelection: true,
                        multiSelect: false,
                        showCheckAll: false,

                    },

                    features: {
                        filterBar: true,
                        group: 'resource.id',
                        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: {

        pdfExport: {
            exportServer: 'https://localhost:8088',

            // Development config
            translateURLsToAbsolute: true,

            // For production replace with this one. See README.md for explanation
            // translateURLsToAbsolute : 'https://localhost:8080/resources/', // Trailing slash is important
            keepPathName: false
        },
        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'
    },
};

Post by tasnim »

Please put the beforeFinishCellEdit event inside of the listeners object like this :

ganttConfig = {
	....
	listeners : {
		beforeFinishCellEdit({ inputField, value, oldValue }) {...}
	}
}

And then you need to add [listeners] attribute to <bryntum-gantt> like this:

<bryntum-gantt
    #gantt
    ...
    [listeners] = "ganttConfig.listeners"
</bryntum-gantt>

Best regards,
Tasnim


Post Reply