[REACT] Hide/unhide column based on other columns

[sprabhu]

Hi,
Can we hide/unhide column and button based on some flag.
e.g. if project start date is less than 01/14/2019, hide the start date and end date column and create button.
using the advanced example:
https://bryntum.com/products/gantt/examples/advanced/

[alex.l]

Hi,
to hide column you can use

gantt.columns.getAt(columnIndex).hidden = true;

Same for button

button.hidden = true;

[sprabhu]

Hi Alex,
Thanks for the reply. Can you help me to locate where this code should be plugged. As we need this on the load of the page(gantt).
So when the gantt is loaded for the first time depending on the condition we could hide/unhide the column as needed.

[alex.l]

If you have that info before Gantt init, you can just edit columns array in initial config in component code.

import { ganttConfig, projectConfig } from './AppConfig';

function App() {
    const gantt = useRef();
    const project = useRef();
    

if (someCondition === true) {
    ganttConfig.columns = someColumnsArray;
} else {
    ganttConfig.columns = anotherColumnsArray;
}
   

If you have it after Gantt init, subscribe on https://bryntum.com/products/gantt/docs/api/Core/widget/Widget#event-paint and do that in there.

            <BryntumGantt
                ref={gantt}
                {...ganttConfig}
                project={project}
                onPaint={onPaintHandler}
            />

[sprabhu]

Thanks Alex, its working as expected.