Our state of the art Gantt chart


Post by shimnx »

We don't need to right click to edit most of the stuff in the popup, we just want to keep a note, how do I hide the part I circled

Attachments
屏幕截图 2022-05-16 131543.png
屏幕截图 2022-05-16 131543.png (80.86 KiB) Viewed 278 times

Post by alex.l »

Please have a look at our guide here https://bryntum.com/docs/gantt/guide/Gantt/customization/taskedit#customizing-the-tabs-and-the-fields
An example with code snippet is here: https://bryntum.com/docs/gantt/guide/Gantt/customization/taskedit#removing-default-tabs-and-fields

const gantt = new Gantt({
    features : {
        taskEdit : {
            items : {
                generalTab      : false,
                predecessorsTab : false,
                successorsTab   : false,
                resourcesTab    : false,
                advancedTab     : false
            }
        }
    }
})

All the best,
Alex


Post by shimnx »

Is that right? It doesn't seem to be working

 ganttConfig = {

    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
        },
        beforeFinishCellEdit({ inputField, value, oldValue }) {
            console.log({ inputField, value, oldValue })
            if (inputField.$$name === 'EffortField') {
                if (value.magnitude > oldValue.magnitude) {
                    // prevent executing the value
                    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: {
        taskEdit : {
            items : {
                generalTab      : false,
                predecessorsTab : false,
                successorsTab   : false,
                resourcesTab    : false,
                advancedTab     : false
            }
        },
        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 »

You need to add the taskEditFeature https://bryntum.com/docs/gantt/guide/Gantt/integration/angular/guide#:~:text=taskEditFeature,TaskEdit property to <bryntum-gantt> like this below :

<bryntum-gantt
    #gantt
    .....
    [taskEditFeature]         = "ganttConfig.features.taskEdit"
</bryntum-gantt>

Best regards,
Tasnim


Post by shimnx »

We want to enrich the way of filling in the remarks. Is it possible to change it into a rich text box

Attachments
屏幕截图 2022-05-16 150425.png
屏幕截图 2022-05-16 150425.png (18.72 KiB) Viewed 273 times

Post by alex.l »

We don't have this component built-in, but you can use any component you want. Please see guide to know how to replace built-in fields
https://bryntum.com/docs/gantt/guide/Gantt/customization/taskedit#add-custom-tabs-and-fields
https://bryntum.com/docs/gantt/guide/Gantt/customization/taskedit#removing-default-tabs-and-fields

Here is guide how to create custom widgets: https://bryntum.com/docs/gantt/guide/Core/advanced/widgets

All the best,
Alex


Post Reply