Our state of the art Gantt chart


Post by shimnx »

I don't need to display this percentage value, how do I get rid of it

Attachments
屏幕截图 2022-05-25 173949.png
屏幕截图 2022-05-25 173949.png (3.24 KiB) Viewed 354 times
屏幕截图 2022-05-25 173931.png
屏幕截图 2022-05-25 173931.png (4.67 KiB) Viewed 354 times

Post by tasnim »

Please check this: https://www.bryntum.com/docs/gantt/api/Gantt/column/ResourceAssignmentColumn#config-itemTpl

Here is how you can use this :

{ type : 'resourceassignment', width : 120, itemTpl : ({ units }) => units }

Post by shimnx »

This is my code, but Unit still exists

 {
                type: 'resourceassignment', width: 120, showAvatars: true, itemTpl: ({ units }) => units,

            editor: {

                picker: {
                    listeners: {
                        beforeShow() {
                            count++
                        },
                        beforeHide() {
                            count--;
                        },
                        async selectionChange(changed) {
                            console.log(changed);
                            let data = await window['GanttComponent'].component.reloadData()
                            console.log(data)
                            if (changed.action == "select" && data.wl > 0) {
                                if (count > 0) {
                                    const result = await MessageDialog.confirm({
                                        title: 'The big question',
                                        message: 'Do you really want to select?',
                                        okButton: 'Yes',
                                        cancelButton: 'No'
                                    });
                                    if (result != MessageDialog.okButton) {
                                        this.scrollRowIntoView();
                                        changed.selected.length && this.deselectRow(changed.selected[0]);
                                        // returning to the original person
                                        changed.deselected.length && this.selectRow(changed.deselected[0]);
                                    }
                                }
                            }
                            if (changed.action == "deselect" && data.wl > 0) {
                                if (count > 0) {
                                    const result = await MessageDialog.confirm({
                                        title: 'The big question',
                                        message: 'Do you really want to deselect?',
                                        okButton: 'Yes',
                                        cancelButton: 'No'
                                    });
                                    if (result != MessageDialog.okButton) {
                                        this.scrollRowIntoView();
                                        changed.deselected.length && this.selectRow(changed.deselected[0])
                                        changed.selected.length && this.deselectRow(changed.selected[0]);
                                    }

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

                    },

                    features: {
                        filterBar: true,
                        group: 'resource.orgCode',
                        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: 200,
                    // }],
                },

            }
        },

Post by tasnim »

Oh, you wanted to display something else instead of a unit, I thought you want to just remove the percentage sign. then you can do this

itemTpl : ({ resourceName }) => resourceName

Post by shimnx »

Thank you but the popover is still there

Attachments
屏幕截图 2022-05-26 125219.png
屏幕截图 2022-05-26 125219.png (5.1 KiB) Viewed 336 times

Post by tasnim »

You need to use the beforeShow event to do this. You need to get the column with the column store get function.
Please check this:
https://bryntum.com/docs/gantt/api/Gantt/widget/AssignmentField#event-beforeShow
https://bryntum.com/docs/gantt/api/Grid/data/ColumnStore#function-get

Here is how you can achieve it:

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

        editor: {
            picker: {
                listeners: {
                    beforeShow({ source }) {
                        source.columns.get('units').hidden = true;
                    },
                    }
                },
            },
    }

Post by shimnx »

tasnim wrote: Thu May 26, 2022 6:49 am

Oh, you wanted to display something else instead of a unit, I thought you want to just remove the percentage sign. then you can do this

itemTpl : ({ resourceName }) => resourceName

Please run my example, now the unit is still displayed after I double click the cell, it may be my data problem

Attachments
advanced examples 3.7z
(109.96 KiB) Downloaded 32 times

Post by tasnim »

I cannot able to run your app because the package.json file is empty. Please provide the app with full package.json so that I can run your app and check what's wrong!


Post by shimnx »

This is my data. You can load it

{
            "eventsData": [
                {
                    "id": "e1004945-d73b-44dd-9d8e-f156338b89a8",
                    "parentId": null,
                    "name": "New task",
                    "percentDone": 0,
                    "startDate": "2022-05-27",
                    "rollUp": null,
                    "duration": 1,
                    "endDate": "2022-05-28",
                    "showInTimeline": null,
                    "baseLines": [],
                    "children": null,
                    "PhantomId": null,
                    "expanded": null,
                    "note": null,
                    "draggable": true,
                    "resizable": true,
                    "constraintDate": null,
                    "constraintType": null,
                    "durationUnit": "day",
                    "deadLineDate": null,
                    "effort": 24,
                    "effortDriven": false,
                    "effortUnit": "hour",
                    "inactive": null,
                    "manuallyScheduled": false,
                    "schedulingMode": "Normal",
                    "slackUnit": "hour",
                    "cls": "",
                    "iconCls": null,
                    "style": null,
                    "taskIconCls": null,
                    "parentIndex": 0,
                    "status": null,
                    "IsAllowDelete": true,
                    "BookedHours": 0,
                    "InvolveWorkLogs": []
                }
            ],
            "dependenciesData": [
                {
                    "id": "3a0395cd-ced9-bb65-8b9a-ea055c8f2ceb",
                    "fromTask": "321f07b1-24e8-407d-b894-d461a1c561b0",
                    "toTask": "f14c9e33-5da0-4ec7-8df5-1f6d1da09efd",
                    "lag": 0
                }
            ],
            "resourcesData": [
                {
                    "id": "28019256",
                    "name": "Wang, Chuan",
                    "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28019256.jpg",
                    "orgCode": "OP/TCG-ZSD13"
                },
                {
                    "id": "28020045",
                    "name": "Feng, Lingyuan",
                    "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28020045.jpg",
                    "orgCode": "OP/TCG-ZSEH"
                },
                {
                    "id": "28017006",
                    "name": "Huang, Lifeng",
                    "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28017006.jpg",
                    "orgCode": "OP/TCG-ZSA21"
                },
                {
                    "id": "28005174",
                    "name": "Qian, Wenbin",
                    "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28005174.jpg",
                    "orgCode": "OP/TCG-ZSQ1"
                },
                {
                    "id": "28015782",
                    "name": "Yan, Wenwu",
                    "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28015782.jpg",
                    "orgCode": "OP/TCG-ZSX"
                },
                {
                    "id": "28028123",
                    "name": "Zhu, Jian",
                    "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28028123.jpg",
                    "orgCode": "OP/TCG-ZSES2"
                },
                {
                    "id": "28027165",
                    "name": "Lou, Changgui",
                    "image": "https://qakimigatewaybe.schaefflercn.com/WorkImg/28027165.jpg",
                    "orgCode": "OP/TCG-ZSD21"
                }
            ],
            "assignmentsData": [
                {
                    "id": "e1004945-d73b-44dd-9d8e-f156338b89a8",
                    "eventId": "e1004945-d73b-44dd-9d8e-f156338b89a8",
                    "resourceId": ""
                }
            ],
            "calendarsData": [
                {
                    "id": "general",
                    "name": "General",
                    "intervals": [
                        {
                            "startDate": "2022-01-01",
                            "endDate": "2022-01-02",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-01-02",
                            "endDate": "2022-01-03",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-01-03",
                            "endDate": "2022-01-04",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-01-08",
                            "endDate": "2022-01-09",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-01-09",
                            "endDate": "2022-01-10",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-01-15",
                            "endDate": "2022-01-16",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-01-16",
                            "endDate": "2022-01-17",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-01-22",
                            "endDate": "2022-01-23",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-01-23",
                            "endDate": "2022-01-24",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-01-31",
                            "endDate": "2022-02-01",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-01",
                            "endDate": "2022-02-02",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-02",
                            "endDate": "2022-02-03",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-03",
                            "endDate": "2022-02-04",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-04",
                            "endDate": "2022-02-05",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-05",
                            "endDate": "2022-02-06",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-06",
                            "endDate": "2022-02-07",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-12",
                            "endDate": "2022-02-13",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-13",
                            "endDate": "2022-02-14",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-19",
                            "endDate": "2022-02-20",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-20",
                            "endDate": "2022-02-21",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-26",
                            "endDate": "2022-02-27",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-02-27",
                            "endDate": "2022-02-28",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-03-05",
                            "endDate": "2022-03-06",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-03-06",
                            "endDate": "2022-03-07",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-03-12",
                            "endDate": "2022-03-13",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-03-13",
                            "endDate": "2022-03-14",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-03-19",
                            "endDate": "2022-03-20",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-03-20",
                            "endDate": "2022-03-21",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-03-26",
                            "endDate": "2022-03-27",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-03-27",
                            "endDate": "2022-03-28",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-04-03",
                            "endDate": "2022-04-04",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-04-04",
                            "endDate": "2022-04-05",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-04-05",
                            "endDate": "2022-04-06",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-04-09",
                            "endDate": "2022-04-10",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-04-10",
                            "endDate": "2022-04-11",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-04-16",
                            "endDate": "2022-04-17",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-04-17",
                            "endDate": "2022-04-18",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-04-23",
                            "endDate": "2022-04-24",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-04-30",
                            "endDate": "2022-05-01",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-01",
                            "endDate": "2022-05-02",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-02",
                            "endDate": "2022-05-03",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-03",
                            "endDate": "2022-05-04",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-04",
                            "endDate": "2022-05-05",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-08",
                            "endDate": "2022-05-09",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-14",
                            "endDate": "2022-05-15",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-15",
                            "endDate": "2022-05-16",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-21",
                            "endDate": "2022-05-22",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-22",
                            "endDate": "2022-05-23",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-28",
                            "endDate": "2022-05-29",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-05-29",
                            "endDate": "2022-05-30",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-06-04",
                            "endDate": "2022-06-05",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-06-05",
                            "endDate": "2022-06-06",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-06-11",
                            "endDate": "2022-06-12",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-06-12",
                            "endDate": "2022-06-13",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-06-18",
                            "endDate": "2022-06-19",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-06-19",
                            "endDate": "2022-06-20",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-06-25",
                            "endDate": "2022-06-26",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-06-26",
                            "endDate": "2022-06-27",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-07-02",
                            "endDate": "2022-07-03",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-07-03",
                            "endDate": "2022-07-04",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-07-09",
                            "endDate": "2022-07-10",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-07-10",
                            "endDate": "2022-07-11",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-07-16",
                            "endDate": "2022-07-17",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-07-17",
                            "endDate": "2022-07-18",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-07-23",
                            "endDate": "2022-07-24",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-07-24",
                            "endDate": "2022-07-25",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-07-30",
                            "endDate": "2022-07-31",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-07-31",
                            "endDate": "2022-08-01",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-08-06",
                            "endDate": "2022-08-07",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-08-07",
                            "endDate": "2022-08-08",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-08-13",
                            "endDate": "2022-08-14",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-08-14",
                            "endDate": "2022-08-15",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-08-20",
                            "endDate": "2022-08-21",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-08-21",
                            "endDate": "2022-08-22",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-08-27",
                            "endDate": "2022-08-28",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-08-28",
                            "endDate": "2022-08-29",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-09-03",
                            "endDate": "2022-09-04",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-09-04",
                            "endDate": "2022-09-05",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-09-10",
                            "endDate": "2022-09-11",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-09-11",
                            "endDate": "2022-09-12",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-09-17",
                            "endDate": "2022-09-18",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-09-18",
                            "endDate": "2022-09-19",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-09-24",
                            "endDate": "2022-09-25",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-09-25",
                            "endDate": "2022-09-26",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-10-01",
                            "endDate": "2022-10-02",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-10-02",
                            "endDate": "2022-10-03",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-10-08",
                            "endDate": "2022-10-09",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-10-09",
                            "endDate": "2022-10-10",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-10-15",
                            "endDate": "2022-10-16",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-10-16",
                            "endDate": "2022-10-17",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-10-22",
                            "endDate": "2022-10-23",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-10-23",
                            "endDate": "2022-10-24",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-10-29",
                            "endDate": "2022-10-30",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-10-30",
                            "endDate": "2022-10-31",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-11-05",
                            "endDate": "2022-11-06",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-11-06",
                            "endDate": "2022-11-07",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-11-12",
                            "endDate": "2022-11-13",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-11-13",
                            "endDate": "2022-11-14",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-11-19",
                            "endDate": "2022-11-20",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-11-20",
                            "endDate": "2022-11-21",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-11-26",
                            "endDate": "2022-11-27",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-11-27",
                            "endDate": "2022-11-28",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-12-03",
                            "endDate": "2022-12-04",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-12-04",
                            "endDate": "2022-12-05",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-12-10",
                            "endDate": "2022-12-11",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-12-11",
                            "endDate": "2022-12-12",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-12-17",
                            "endDate": "2022-12-18",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-12-18",
                            "endDate": "2022-12-19",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-12-24",
                            "endDate": "2022-12-25",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-12-25",
                            "endDate": "2022-12-26",
                            "isWorking": false
                        },
                        {
                            "startDate": "2022-12-31",
                            "endDate": "2023-01-01",
                            "isWorking": false
                        },
                        {
                            "startDate": "2023-01-01",
                            "endDate": "2023-01-02",
                            "isWorking": false
                        }
                    ]
                }
            ]
        }

Post by shimnx »

This is my demo

Attachments
advanced examples 3.zip
(137.56 KiB) Downloaded 35 times

Post Reply