Column Menu in React TreeGrid component

React

Search results

02 Feb 2023 / 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 on multiple icon of the column. To enable column menu, you need to define the showColumnMenu property as true.

To use the column menu, inject the ColumnMenu module in the treegrid.

The default items are displayed in 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 `filterSettings.type`

Source

Preview

App.jsx

App.tsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ColumnMenu, Filter, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
    const filterSettings = { type: 'Menu' };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' allowFiltering={true} allowSorting={true} showColumnMenu={true} filterSettings={filterSettings}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Sort, Filter, ColumnMenu]}/>
    </TreeGridComponent>;
}
;
export default App;

import { ColumnDirective, ColumnsDirective,  Inject, TreeGridComponent  } from '@syncfusion/ej2-react-treegrid';
import { ColumnMenu, Filter,  FilterSettingsModel, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

function App() {
    const filterSettings: FilterSettingsModel = { type:'Menu' };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' allowFiltering={true}
        allowSorting={true} showColumnMenu={true} filterSettings={filterSettings}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date' />
          <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Sort, Filter, ColumnMenu]}/>
    </TreeGridComponent>
};
export default App;

During the column menu open and column menu click, the tree grid component triggers the two events as follows:

The columnMenuOpen event triggers before the column menu opens.
The columnMenuClick event triggers when the user clicks the column menu of the tree grid.

Source

Preview

App.jsx

App.tsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ColumnMenu } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
    const columnMenuOpen = () => {
        alert('columnMenuOpen event is Triggered');
    };
    const columnMenuClick = () => {
        alert('columnMenuClick event is Triggered');
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' showColumnMenu={true} columnMenuOpen={columnMenuOpen} columnMenuClick={columnMenuClick}>
    <ColumnsDirective>
      <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
      <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
      <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date'/>
      <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right'/>
    </ColumnsDirective>
    <Inject services={[ColumnMenu]}/>
</TreeGridComponent>;
}
;
export default App;

import { ColumnDirective, ColumnsDirective,  Inject, TreeGridComponent  } from '@syncfusion/ej2-react-treegrid';
import { ColumnMenu } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

function App() {
const columnMenuOpen = () => {
    alert('columnMenuOpen event is Triggered');
};
const columnMenuClick = () => {
    alert('columnMenuClick event is Triggered');
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' showColumnMenu={true} columnMenuOpen={columnMenuOpen} columnMenuClick={columnMenuClick}>
    <ColumnsDirective>
      <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
      <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
      <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date' />
      <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right' />
    </ColumnsDirective>
    <Inject services={[ColumnMenu]}/>
</TreeGridComponent>
};
export default App;

The Custom column menu items can be added by defining the columnMenuItems as a collection of the columnMenuModel.

Actions for these customized items can be defined in the columnMenuClick event.

Source

Preview

App.jsx

App.tsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ColumnMenu, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
    let treegrid;
    const columnMenuItems = [{ text: 'Clear Sorting', id: 'clearsorting' }];
    const sortSettings = { columns: [{ direction: "Ascending", field: "taskID" }] };
    const columnMenuClick = (args) => {
        if (treegrid && args.item.id === 'clearsorting') {
            treegrid.clearSorting();
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' allowSorting={true} showColumnMenu={true} sortSettings={sortSettings} ref={g => treegrid = g} columnMenuItems={columnMenuItems} columnMenuClick={columnMenuClick}>
    <ColumnsDirective>
      <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
      <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
      <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date'/>
      <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right'/>
    </ColumnsDirective>
    <Inject services={[Sort, ColumnMenu]}/>
</TreeGridComponent>;
}
;
export default App;

import { ColumnDirective, ColumnsDirective,  Inject, TreeGridComponent  } from '@syncfusion/ej2-react-treegrid';
import { ColumnMenu, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

function App() {
let treegrid;
const columnMenuItems = [{ text: 'Clear Sorting', id: 'clearsorting' }];
const sortSettings = { columns: [{ direction: "Ascending", field: "taskID" }] };
const columnMenuClick = (args) => {
    if (treegrid && args.item.id === 'clearsorting') {
        treegrid.clearSorting();
    }
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' allowSorting={true} showColumnMenu={true} sortSettings={sortSettings} ref={g => treegrid = g} columnMenuItems={columnMenuItems} columnMenuClick={columnMenuClick} >
    <ColumnsDirective>
      <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
      <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
      <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date' />
      <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right' />
    </ColumnsDirective>
    <Inject services={[Sort, ColumnMenu]}/>
</TreeGridComponent>
};
export default App;

Sometimes, you have a scenario that hides an item from the column menu for particular columns. In that case, customize particular items from ColumnMenuModel in the columnMenuOpen event.

In the following sample, the Filter item was hidden in the column menu when opened for the taskName column.

Source

Preview

App.jsx

App.tsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ColumnMenu, Filter, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
    const filterSettings = { type: 'Menu' };
    const columnMenuOpen = (args) => {
        for (const item of args.items) {
            if (item.text === 'Filter' && args.column.field === 'taskName') {
                item.hide = true;
            }
            else {
                item.hide = false;
            }
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' allowFiltering={true} allowSorting={true} showColumnMenu={true} filterSettings={filterSettings} columnMenuOpen={columnMenuOpen}>
    <ColumnsDirective>
      <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
      <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
      <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date'/>
      <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right'/>
    </ColumnsDirective>
    <Inject services={[Sort, Filter, ColumnMenu]}/>
</TreeGridComponent>;
}
;
export default App;

import { ColumnDirective, ColumnsDirective,  Inject, TreeGridComponent  } from '@syncfusion/ej2-react-treegrid';
import { ColumnMenu, Filter,  FilterSettingsModel, Sort } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

function App() {
const filterSettings: FilterSettingsModel = { type:'Menu' };
const columnMenuOpen = (args) => {
    for (const item of args.items) {
        if (item.text === 'Filter' && args.column.field === 'taskName') {
            item.hide = true;
        }
        else {
            item.hide = false;
        }
    }
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='315' allowFiltering={true} allowSorting={true} showColumnMenu={true} filterSettings={filterSettings} columnMenuOpen={columnMenuOpen}>
    <ColumnsDirective>
      <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'/>
      <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
      <ColumnDirective field='startDate' headerText='Start Date' width='150' format='yMd' textAlign='Right' type='date' />
      <ColumnDirective field='duration' headerText='Duration' width='130' textAlign='Right' />
    </ColumnsDirective>
    <Inject services={[Sort, Filter, ColumnMenu]}/>
</TreeGridComponent>
};
export default App;

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

Contents

Column menu events
Custom column menu item
Customize menu items for particular columns

Contents

Column menu events
Custom column menu item
Customize menu items for particular columns

Column Menu in React TreeGrid component

Column menu events

Custom column menu item

Customize menu items for particular columns