Search results

Column Menu in React Gantt component

01 Dec 2022 / 4 minutes to read

The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click the Multiple icon of the column. To enable the column menu, you should set the showColumnMenu property to true. The default items are displayed in the following table:

Item Description
SortAscending Sort the current column in ascending order.
SortDescending Sort the current column in descending order.
AutoFit Auto fit the current column.
AutoFitAll Auto fit all columns.
Filter Show the filter option as given in the filterSettings.type property.
Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Sort, Filter, Resize, ColumnMenu } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
    }
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} allowSorting={true} allowFiltering={true} allowResizing={true} showColumnMenu={true} height='450px'>
            <Inject services={[Sort, Filter, Resize, ColumnMenu]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.47/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Sort, Filter, Resize, ColumnMenu } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields}
        allowSorting={true} allowFiltering={true} allowResizing={true} showColumnMenu = {true} height = '450px'>
            <Inject services={[Sort, Filter, Resize, ColumnMenu]} />
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

You can disable column menu for a particular column by defining the columns.showColumnMenu as false.

Column menu Events

During the resizing action, the gantt component triggers the below two events.

  1. The columnMenuOpen event triggers before the column menu opens.
  2. The columnMenuClick event triggers when the user clicks the column menu of the gantt.
Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Sort, Filter, ColumnMenu } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.splitterSettings = {
            columnIndex: 5
        };
    }
    columnMenuOpen() {
        alert('columnMenuOpen event is Triggered');
    }
    columnMenuClick() {
        alert('columnMenuClick event is Triggered');
    }
    render() {
        return (<div>
    <GanttComponent dataSource={data} taskFields={this.taskFields} showColumnMenu={true} columnMenuOpen={this.columnMenuOpen} columnMenuClick={this.columnMenuClick} allowFiltering={true} allowSorting={true} splitterSettings={this.splitterSettings} height='450px' ref={gantt => this.ganttInstance = gantt}>
    <Inject services={[Sort, Filter, ColumnMenu]}/>
    </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.47/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import { createElement } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Sort, Filter, ColumnMenu } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
  };
  public splitterSettings: any = {
columnIndex : 5
};
public columnMenuOpen(){
    alert('columnMenuOpen event is Triggered');
}
public columnMenuClick(){
    alert('columnMenuClick event is Triggered');
}
render() {
    return (<div>
    <GanttComponent dataSource={data} taskFields={this.taskFields} showColumnMenu={true}
    columnMenuOpen= { this.columnMenuOpen } columnMenuClick= { this.columnMenuClick }
    allowFiltering={true} allowSorting={true}
    splitterSettings={this.splitterSettings} height = '450px' ref={gantt => this.ganttInstance = gantt}>
    <Inject services={[Sort, Filter, ColumnMenu]} />
    </GanttComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('root'));

Custom Column Menu Item

Custom column menu items can be added by defining the columnMenuItems. Actions for this customized items can be defined in the columnMenuClick event.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnMenu, ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-gantt';
import { Inject, Sort } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.columnMenuItems = [{ text: 'Clear Sorting', id: 'ganttclearsorting' }];
        this.sortSettings = { columns: [{ direction: "Ascending", field: "TaskName" }] };
        this.splitterSettings = {
            columnIndex: 5
        };
    }
    columnMenuClick(args) {
        if (args.item.id === 'ganttclearsorting') {
            this.clearSorting();
        }
    }
    render() {
        return (<div>
    <GanttComponent dataSource={data} taskFields={this.taskFields} showColumnMenu={true} columnMenuItems={this.columnMenuItems} columnMenuClick={this.columnMenuClick} sortSettings={this.sortSettings} allowSorting={true} splitterSettings={this.splitterSettings} height='450px' ref={gantt => this.ganttInstance = gantt}>
    <ColumnsDirective>
        <ColumnDirective field='TaskID' width='100'></ColumnDirective>
        <ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
        <ColumnDirective field='StartDate'></ColumnDirective>
        <ColumnDirective field='Duration'></ColumnDirective>
        <ColumnDirective field='Progress'></ColumnDirective>
    </ColumnsDirective>
    <Inject services={[ColumnMenu, Sort]}/>
    </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.47/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import { createElement } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnMenu, ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-gantt';
import { ColumnMenuItemModel, Inject, Sort, SortSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
private ganttInstance: any;
public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
public columnMenuItems: ColumnMenuItemModel[] =  [{text:'Clear Sorting', id:'ganttclearsorting'}];
public sortSettings: SortSettingsModel = { columns:[{direction: "Ascending", field: "TaskName"}] };
public columnMenuClick(args: any){
    if(args.item.id === 'ganttclearsorting'){
        this.clearSorting();
    }
}

public splitterSettings: any = {
    columnIndex : 5
};
render() {
    return (<div>
    <GanttComponent dataSource={data} taskFields={this.taskFields} showColumnMenu={true}
    columnMenuItems={this.columnMenuItems} columnMenuClick={this.columnMenuClick} sortSettings={this.sortSettings} allowSorting={true}
    splitterSettings={this.splitterSettings} height = '450px' ref={gantt => this.ganttInstance = gantt}>
    <ColumnsDirective>
        <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
        <ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
        <ColumnDirective field='StartDate'></ColumnDirective>
        <ColumnDirective field='Duration'></ColumnDirective>
        <ColumnDirective field='Progress'></ColumnDirective>
    </ColumnsDirective>
    <Inject services={[ColumnMenu, Sort]} />
    </GanttComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('root'));

Customize menu items for particular columns

Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the columnMenuOpenEventArgs.hide as true in the columnMenuOpen event.

The following sample, Filter item was hidden in column menu when opens for the Task Name column.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnMenu, ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-gantt';
import { Inject, Sort, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.splitterSettings = {
            columnIndex: 5
        };
    }
    columnMenuOpen(args) {
        for (const item of args.items) {
            if (item.text === 'Filter' && args.column.field === 'TaskName') {
                item.hide = true;
            }
            else {
                item.hide = false;
            }
        }
    }
    render() {
        return (<div>
    <GanttComponent dataSource={data} taskFields={this.taskFields} showColumnMenu={true} columnMenuItems={this.columnMenuItems} columnMenuClick={this.columnMenuClick} columnMenuOpen={this.columnMenuOpen} allowFiltering={true} allowSorting={true} splitterSettings={this.splitterSettings} height='450px'>
    <ColumnsDirective>
        <ColumnDirective field='TaskID' width='100'></ColumnDirective>
        <ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
        <ColumnDirective field='StartDate'></ColumnDirective>
        <ColumnDirective field='Duration'></ColumnDirective>
        <ColumnDirective field='Progress'></ColumnDirective>
    </ColumnsDirective>
    <Inject services={[ColumnMenu, Sort, Filter]}/>
    </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.3.47/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import { createElement } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnMenu, ColumnDirective, ColumnsDirective, ColumnMenuOpenEventArgs } from '@syncfusion/ej2-react-gantt';
import { ColumnMenuItemModel, Inject, Sort, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
public columnMenuOpen (args: ColumnMenuOpenEventArgs) {
    for (const item of args.items) {
        if (item.text === 'Filter' && (args.column as Column).field === 'TaskName') {
            (item as ColumnMenuItemModel).hide = true;
        } else {
            (item as ColumnMenuItemModel).hide = false;
        }
    }
}

public splitterSettings: any = {
    columnIndex : 5
};
render() {
    return (<div>
    <GanttComponent dataSource={data} taskFields={this.taskFields} showColumnMenu={true}
    columnMenuItems={this.columnMenuItems} columnMenuClick={this.columnMenuClick}  columnMenuOpen={this.columnMenuOpen} allowFiltering={true} allowSorting={true}
    splitterSettings={this.splitterSettings} height = '450px'>
    <ColumnsDirective>
        <ColumnDirective field='TaskID' width='100' ></ColumnDirective>
        <ColumnDirective field='TaskName' headerText='Task Name'></ColumnDirective>
        <ColumnDirective field='StartDate'></ColumnDirective>
        <ColumnDirective field='Duration'></ColumnDirective>
        <ColumnDirective field='Progress'></ColumnDirective>
    </ColumnsDirective>
    <Inject services={[ColumnMenu, Sort, Filter]} />
    </GanttComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('root'));