How to Customize Column Visibility in React Gantt Chart?

Overview

By default, columns in Blazor Gantt chart are displayed in both the grid and the edit dialog. Column visibility can be customized to meet specific layout or user requirements by applying custom logic to control which columns appear in each view.

Steps to Configure

1. Configure the Gantt Chart with Columns and actionBegin Event

Columns are initially hidden in the grid by setting visible={false} in the column directives. This ensures the grid remains clean and only essential columns are shown.

<GanttComponent
    ...
    actionBegin={actionBegin}
    ref={(gantt) => (ganttInstance = gantt)}
>
    <ColumnsDirective>
        ...
        <ColumnDirective field="CustomField" width="250" visible={false}></ColumnDirective>
        <ColumnDirective field="Employees" width="250" visible={false}></ColumnDirective>
        <ColumnDirective field="Contactors" width="250" visible={false}></ColumnDirective>
    </ColumnsDirective>
    ...
</GanttComponent>

2. Define actionBegin Event for Dynamic Visibility

The actionBegin event allows toggling column visibility before dialogs open or data is saved. This provides flexibility to show additional fields in dialogs without cluttering the grid.

function actionBegin(args) {
    if (
      args.requestType === 'beforeOpenEditDialog' ||
      args.requestType === 'beforeOpenAddDialog'
    ) {
      ganttInstance.columnByField['CustomField'].visible = true;
      ganttInstance.columnByField['Employees'].visible = true;
      ganttInstance.columnByField['Contactors'].visible = true;
    }
    if (args.requestType === 'beforeSave' || args.requestType === 'beforeAdd') {
      ganttInstance.columnByField['CustomField'].visible = false;
      ganttInstance.columnByField['Employees'].visible = true;
      ganttInstance.columnByField['Contactors'].visible = true;
    }
}

Sample

Refer to the sample for more details.

Conclusion

This approach enables dynamic customization of column visibility in the React Gantt chart, allowing developers to control which columns appear in the grid versus the dialog for a more flexible and user-friendly experience.

We hope you enjoyed learning how to customize column visibility in React Gantt Chart.

You can refer to the React Gantt Chart feature tour and documentation for more details. Explore our React Gantt Chart example to understand how to create and manipulate data.

For current customers, you can check out our React components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our React Gantt Chart and other React components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!