Our state of the art Gantt chart


Post by revill »

Hi,
I have a problem with configuring a toolbar to make it expandable and display items in one row. Right now I have strips element with two tbar inside. The first tbar is a type of toolbar that is not expandable and has items displayed in one row, which I need here. However, for the second tbar I need it to be expandable, so I use type:"panel" with collapsible : true feature, which works great, but it displays items vertically. When I'm changing tbar type from type:"panel" to type: 'toolbar', this section is no longer expandable, but I have items in one row.

Is it possible to configure the tbar with a type:"panel" to keep it expandable and display items in one row?

Here is my code for that part:

 strips : {
                tbar1 : {
                    type : 'toolbar',
                    dock : 'top',
                    overflow : 'scroll',
                    height : '12%',
                    items : [
                        {
                            type: 'buttonGroup',
                            items : [
                                {
                                    type : 'button',
                                    text : '<<',
                                    onClick : (event) => {
                                        const collapseEvent = event.source.up ('gantt');
                                        collapseEvent.shiftPrevious(); 
                                    }
                                },
                                {
                                    type : 'button',
                                    text : '>>',
                                    onClick : (event) => {
                                        const collapseEvent = event.source.up ('gantt');
                                        collapseEvent.shiftNext(); 
                                    }
                                },
                                {
                                    type : 'button',
                                    text : ZOOM_TO_FIT_LABEL,
                                    onClick : (event) => {
                                        const collapseEvent = event.source.up ('gantt');
                                        collapseEvent.zoomToFit(); 
                                    }
                                },
                                {
                                    type : 'button',
                                    text : '+',
                                    onClick : (event) => {
                                        const collapseEvent = event.source.up ('gantt');
                                        collapseEvent.zoomIn(); 
                                    }
                                },{
                                    type : 'button',
                                    text : '-',
                                    onClick : (event) => {
                                        const collapseEvent = event.source.up ('gantt');
                                        collapseEvent.zoomOut(); 
                                    }
                                }
                            ]
                        },
                        {
                            label : CONFIGURATIONS_LABEL,
                            labelPosition : 'above',
                            type : 'combo',
                            items : this.configurationNames,
                            placeholder : CONFIGURATIONS_LABEL,
                            callOnFunctions: true,
                            displayField : 'Name',
                            value : this.currentConfigurationUsed.Name,
                            listeners : {
                                change : (event) => {
                                    if (!event) {return;}

                                let newConfig = event.value;
                                let currentConfig = this.mapOfConfigurationsByname.get(newConfig);
                                if (currentConfig) {
                                    this.currentConfigurationUsed = currentConfig;
                                    let url = window.location.href;
                                    try {
                                        url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__configurationId', currentConfig.Id);
                                        window.location.href = url; //reload window
                                    } catch (error) {
                                        gantt_chart_helper.logError(SCHEDULE_VIEWER_CONFIGURATION_PICKLIST_ERROR, error);
                                    }
                                }
                            }
                        }
                    },{
                        type        : 'combo',
                        ref         : 'groupBy',
                        label       : GROUP_BY_LABEL,
                        labelPosition : 'above',
                        clearable   : true,
                        widith : 200,
                        items       : Array.from(this.groupBySet),
                        value : this.currentGroupBy,
                        listeners : {
                            change : (event) => {
                                try {
                                    if (event.value === 'None' || !event.value) {
                                        this.currentGroupBy = 'None';                                        
                                        gantt.clearGroups();
                                    } else {
                                        this.currentGroupBy = event.value.replaceAll(' ','');
                                        switch (event.value.trim()) {
                                            case 'Country' :
                                                gantt.group(['Country']);
                                                break;
                                            case 'Program' :
                                                gantt.group(['Program']);
                                                break;
                                            case 'Project Template' :
                                                gantt.group(['ProjectTemplate']);
                                                break;
                                            case 'Construction Budget Code' : 
                                                gantt.group(['ConstructionBudget']);
                                                break;
                                            case 'GC Budget Code' : 
                                                gantt.group(['GCBudgetCode']);
                                                break;
                                            default :
                                                gantt.clearGroups();
                                                break;
                                        }
                                    }
                                } catch {error} {
                                    gantt_chart_helper.logError(SCHEDULE_VIEWER_GROUP_BY_PICKLIST_ERROR, error);
                                }
                            }
                        }
                    },
                    {
                        label : SEARCH_BY_SITE_LABEL,
                        labelPosition : 'above',
                        type : 'textfield',
                        placeholder : SEARCH_BY_SITE_LABEL,
                        value : this.currentSearchPhrase,
                        listeners : {
                            input(event) {
                                if (!event) {return;}

                                const gantt = event.source.up('gantt');
                                const value = event.value;
                                this.currentSearchPhrase = value;
                                if (value === '') {
                                    gantt.store.clearFilters();
                                } else {
                                    gantt.store.clearFilters();
                                    gantt.store.filter((item) => {
                                        if (item.children) {
                                            return; 
                                        } 
                                        let uppercaseValue = '' + value;
                                        uppercaseValue = uppercaseValue.toUpperCase();
                                        let siteUppercase = ''+item.originalData.Site;
                                        siteUppercase = siteUppercase.toUpperCase();
                                        if ( siteUppercase.startsWith(uppercaseValue)) {
                                            return item.originalData.Site
                                        } else {
                                            return;
                                        }
                                    });
                                }
                            }
                        }
                    },
                    {
                        type : 'date',
                        placeholder : 'YYYY/MM/DD',
                        label : START_DATE_LABEL,
                        labelPosition : 'above',
                        value : this.currentStartDate,
                        listeners : {
                            change : (event) => {
                                if (event.value) {
                                    this.currentStartDate = gantt_chart_helper.retrieveDate(event.value);
                                    try {
                                        let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__startDate', this.currentStartDate);
                                        window.location.href = url; 
                                    } catch (error) {
                                        gantt_chart_helper.logError(SCHEDULE_VIEWER_START_DATE_ERROR, error);
                                    }
                                } else {
                                    try {
                                       let url = gantt_chart_helper.removeParameter(window.location.href,'c__startDate');
                                        window.location.href = url; 
                                    } catch (error) {
                                        gantt_chart_helper.logError(SCHEDULE_VIEWER_START_DATE_ERROR, error);
                                    }
                                }
                            }
                        }
                    },{
                        type : 'date',
                        placeholder : 'YYYY/MM/DD',
                        label : END_DATE_LABEL,
                        labelPosition : 'above',
                        value : this.currentEndDate,
                        listeners : {
                            change : (event) => {
                                if (event.value) {
                                    this.currentEndDate = gantt_chart_helper.retrieveDate(event.value);
                                    try {
                                        let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__endDate', this.currentEndDate);
                                        window.location.href = url; 
                                     } catch (error) {
                                         gantt_chart_helper.logError(SCHEDULE_VIEWER_END_DATE_ERROR, error);
                                     }
                                } else {
                                    try {
                                        let url = gantt_chart_helper.removeParameter(window.location.href,'c__endDate');
                                        window.location.href = url; 
                                     } catch (error) {
                                         gantt_chart_helper.logError(SCHEDULE_VIEWER_END_DATE_ERROR, error);
                                     }
                                }
                            }
                        }
                    }
                ]
            },
            tbar2 : {
                type : 'panel',
                title : FILTERS_LABEL,
                collapsible : true,
                collapsed : true,
                dock : 'top',
                height : '35%',
                scrollable : true,
                items : [
                    {
                        label : COUNTRY_LABEL,
                        labelPosition : 'above',
                        type : 'combo',
                        width : 80,
                        placeholder : COUNTRY_LABEL,
                        items : Array.from(this.countrySet),
                        callOnFunctions: true,
                        displayField : 'Name',
                        value : this.currentCountry,
                        listeners : {
                            change : (event) => {
                                if (!event) {return;}

                                this.currentCountry = event.value;
                                let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__country', this.currentCountry);
                                window.location.href = url; 
                            }
                        }
                    },
                    {
                        label : PROJECT_STATUS_LABEL,
                        labelPosition : 'above',
                        type : 'combo',
                        placeholder : PROJECT_STATUS_LABEL,
                        items : Array.from(this.projectStatusSet),
                        callOnFunctions: true,
                        multiSelect  : true,
                        displayField : 'Name',
                        value : this.currentProjectStatus,
                        listeners : {
                            focusOut : (event) => {
                                if (!event || !event.source) {return;}

                                let valuesOnFocusOutEvent = event.source.value;
                                try {
                                    if (valuesOnFocusOutEvent != this.currentProjectStatus) {
                                        this.currentProjectStatus = valuesOnFocusOutEvent;    
                                        let url = gantt_chart_helper.handleMultiplePicklistValuesURLChange(window.location.href,'c__status', this.currentProjectStatus);
                                        window.location.href = url; 
                                    }
                                } catch (error) {
                                    gantt_chart_helper.logError(SCHEDULE_VIEWER_MULTIPLE_PICKLIST_ERROR, error);
                                }
                            }
                        }
                    },
                    {
                        label : PROJECT_TEMPLATE_LABEL,
                        labelPosition : 'above',
                        type : 'combo',
                        placeholder : PROJECT_TEMPLATE_LABEL,
                        items : Array.from(this.projectTemplateSet),
                        multiSelect  : true,
                        callOnFunctions: true,
                        displayField : 'Name',
                        value : this.currentProjectTemplate,
                        listeners : {
                            focusOut : (event) => {
                                if (!event || !event.source) {return;}

                                let valuesOnFocusOutEvent = event.source.value;
                                try {
                                    if (valuesOnFocusOutEvent != this.currentProjectTemplate) {
                                        this.currentProjectTemplate = valuesOnFocusOutEvent;    
                                        let url = gantt_chart_helper.handleMultiplePicklistValuesURLChange(window.location.href,'c__template', this.currentProjectTemplate);
                                        window.location.href = url; 
                                    }
                                } catch (error) {
                                    gantt_chart_helper.logError(SCHEDULE_VIEWER_MULTIPLE_PICKLIST_ERROR, error);
                                }
                            }
                        }
                    },
                   {
                        label : PROGRAM_LABEL,
                        labelPosition : 'above',
                        type : 'combo',
                        placeholder : PROGRAM_LABEL,
                        items : Array.from(this.programSet),
                        callOnFunctions: true,
                        displayField : 'Name',
                        value : this.currentProgram,
                        listeners : {
                            change : (event) => {
                                if (!event || !event.value) {return;}

                                this.currentProgram = event.value;
                                let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__prog', this.currentProgram);
                                window.location.href = url; 
                            }
                        }
                    },{
                        label : CONSTRUCTION_BUDGET_CODE_LABEL,
                        labelPosition : 'above',
                        type : 'combo',
                        width : 100,
                        placeholder : CONSTRUCTION_BUDGET_CODE_LABEL,
                        items : Array.from(this.constructionBudgetSet),
                        callOnFunctions: true,
                        displayField : 'Name',
                        value : this.currentConstructionBudget,
                        listeners : {
                            change : (event) => {
                                if (!event || !event.value) {return;}

                                this.currentConstructionBudget = event.value;
                                let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__constBudgetCode', this.currentConstructionBudget);
                                window.location.href = url; 
                            }
                        }
                    },{
                        label : GC_BUDGET_CODE_LABEL,
                        labelPosition : 'above',
                        type : 'combo',
                        width : 100,
                        placeholder : GC_BUDGET_CODE_LABEL,
                        items : Array.from(this.gcBudgetCodeSet),
                        callOnFunctions: true,
                        displayField : 'Name',
                        value : this.currentGcBudget,
                        listeners : {
                            change : (event) => {
                                if (!event || !event.value) {return;}

                                this.currentGcBudget = event.value;
                                let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__gcBudgetCode', this.currentGcBudget);
                                window.location.href = url; 
                            }
                        }
                    },{
                        label : ARCHITECT_LABEL,
                        labelPosition : 'above',
                        type : 'combo',
                        placeholder : ARCHITECT_LABEL,
                        width : 100,
                        items : Array.from(this.architectsSet),
                        callOnFunctions: true,
                        displayField : 'Name',
                        value : this.currentArchitect,
                        listeners : {
                            change : (event) => {
                                if (!event || !event.value) {return;}

                                this.currentArchitect = event.value;
                                let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__architect', this.currentArchitect);
                                window.location.href = url; 
                            }
                        }
                    },{
                        label :	CONSTRUCTION_MANAGER_LABEL,
                        labelPosition : 'above',
                        type : 'combo',
                        placeholder : CONSTRUCTION_MANAGER_LABEL,
                        width : 110,
                        items : Array.from(this.constructionManagerSet),
                        callOnFunctions: true,
                        displayField : 'Name',
                        value : this.currentConstructionManager,
                        listeners : {
                            change : (event) => {
                                if (!event || !event.value) {return;}

                                this.currentConstructionManager = event.value;
                                let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__constructionManager', this.currentConstructionManager);
                                window.location.href = url; 
                            }
                        }
                    },{
                        label : NETWORK_MANAGER_LABEL,
                        labelPosition : 'above',
                        type : 'combo',
                        placeholder : NETWORK_MANAGER_LABEL,
                        width : 120,
                        items : Array.from(this.networkManagerSet),
                        callOnFunctions: true,
                        displayField : 'Name',
                        value : this.currentNetworkManager,
                        listeners : {
                            change : (event) => {
                                if (!event || !event.value) {return;}

                                this.currentNetworkManager = event.value;
                                let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__networkManager', this.currentNetworkManager);
                                window.location.href = url; 
                            }
                        }
                    },{
                        label : PROJECT_MANAGER_LABEL,
                        labelPosition : 'above',
                        type : 'combo',
                        placeholder : PROJECT_MANAGER_LABEL,
                        width : 120,
                        items : Array.from(this.projectManagerSet),
                        callOnFunctions: true,
                        displayField : 'Name',
                        value : this.currentProjectManager,
                        listeners : {
                            change : (event) => {
                                if (!event || !event.value) {return;}

                                this.currentProjectManager = event.value;
                                let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__projectManager', this.currentProjectManager);
                                window.location.href = url; 
                            }
                        }
                    }
                ]
            }
        }

Thank you in advance.
Kind Regards,
Revill


Post by tasnim »

Hi,

The Panel was not built to use as a toolbar. Could you please share how this toolbar should look and how it should behave?


Post by revill »

Hi tasnim.
Please find in the attachment current look of the toolbar. I need it splitted in two sections:

  • first with the screen controll button group and 5 fields is the regular toolbar and that's part is fine
  • second part, called "Filters", should be collapsible with the rest of the filters for the chart. But right now with the "Panel" it's scrollable vertically, but what I need is to have all fields in second section in one row, like it is in the first one. One next to another, not each below previous one.

Unfortunately, using "toolbar' type, collapsible feature is not working for me.

Kind Regards,
Revill

Attachments
toolbar expandable.PNG
toolbar expandable.PNG (27.91 KiB) Viewed 121 times

Post by tasnim »

Hi,

So you want to change the panel layout out to horizontal. You could set https://bryntum.com/products/gantt/docs/api/Core/widget/Panel#config-layout to hbox
This should be working for you.


Post by revill »

Hi,
thank you for your help. Works as expected. Thank you!


Post Reply