Our state of the art Gantt chart


Post by prem.k@zetwerk.com »

Hi Team,

I want to show baseline dynamically, for example if i have 4 baseline in header dropdown, if i toggle first baseline then it should show only one baseline, if i toggle 2nd baseline then it should show second base line in gantt panel. As of know i am able to achieve this functionality using below code

this.gantt.taskStore.setBaseline(data.index + 1);
        this.gantt.element.classList[data.checked ? 'remove' : 'add'](`b-hide-baseline-${data.index + 1}`);

But i have to keep enable baseline feature upfront which shows all baseline upfront which i don't want, i want to show baseline iff if i toggle any baseline item from dropdown. Please refer image for reference.

Screenshot 2021-09-20 at 4.54.05 PM.png
Screenshot 2021-09-20 at 4.54.05 PM.png (1.97 MiB) Viewed 521 times

Post by mats »

Did you study this demo? https://bryntum.com/examples/gantt/baselines/

It shows how to toggle multiple baselines on / off


Post by prem.k@zetwerk.com »

Yes Mats, i have gone through the demo. But it shows all baseline on load itself which i don't want. I want when i toggle baseline at that time it should show baseline.


Post by prem.k@zetwerk.com »

Any update on this?


Post by alex.l »

Just disable baseline feature on initial load and enable when you want it. Or use your b-hide-baseline class as added by default for your baselines. It may be configured in template method, as it shown in the example.

All the best,
Alex


Post by prem.k@zetwerk.com »

Hi Alex,

Just disable baseline feature on initial load and enable when you want it

Done the same but it's loading all baseline after enabling, i want to enable or disable particular baseline when i toggle


Post by alex.l »

Could you please share your code? I am not sure what goes wrong in your solution.

If you used template and set hidden class for all baselines by default, you will be needed to show them manually even after you enabled baselines feature. But in that case you can keep it enabled and show baselines manually on user action (btn click), as you requested.

All the best,
Alex


Post by prem.k@zetwerk.com »

Hi Alex,

Can you share code how can we set hidden class for all baselines?


Post by alex.l »

According to you requirement

But i have to keep enable baseline feature upfront

I used our baselines examples. The changes I applied:

  1. added hide class by default:

    const gantt = new Gantt({
        appendTo : 'container',
    
       // <--- here
        cls : {
            'b-hide-baseline-1' : 1,
            'b-hide-baseline-2' : 1,
            'b-hide-baseline-3' : 1
        },
    
  2. changed initial state of the checkboxes in tbar:

    
        tbar : {
            items : [
            [...]
                {
                    type      : 'button',
                    text      : 'Show baseline',
                    icon      : 'b-fa-bars',
                    iconAlign : 'end',
                    menu      : [{
                        checked : false, // <--- set to false for all
                        text    : 'Baseline 1',
                        onToggle({ checked }) {
                            toggleBaselineVisible(1, checked);
                        }
                    }, {
                        checked : false,
                        text    : 'Baseline 2',
                        onToggle({ checked }) {
                            toggleBaselineVisible(2, checked);
                        }
                    }, {
                        checked : false,
                        text    : 'Baseline 3',
                        onToggle({ checked }) {
                            toggleBaselineVisible(3, checked);
                        }
                    }]
                },
    

That's all.

Links:
https://bryntum.com/examples/gantt/baselines/
https://bryntum.com/docs/gantt/#Gantt/view/Gantt#config-cls

All the best,
Alex


Post by prem.k@zetwerk.com »

Done same thanks.


Post Reply