Column chooser in EJ2 JavaScript Treegrid control

27 Apr 20239 minutes to read

The column chooser has options to show or hide columns dynamically. It can be enabled by defining the showColumnChooser as true.

To use the column chooser, inject the Column Chooser module in the treegrid.

index.js
index.html
ej.treegrid.TreeGrid.Inject(ej.treegrid.ColumnChooser,ej.treegrid.Toolbar);


var treeGridObj = new ej.treegrid.TreeGrid({
    dataSource: sampleData,
    showColumnChooser: true,
    treeColumnIndex: 1,
    childMapping: 'subtasks',
    toolbar: ['ColumnChooser'],
    columns: [
        { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
        { field: 'taskName', headerText: 'Task Name', width: 240, showInColumnChooser: false },
        { field: 'startDate', headerText: 'Start Date', width: 110, format: 'yMd' },
        { field: 'endDate', headerText: 'End Date', width: 110, textAlign: 'Right', type: 'date', format: 'yMd' },
        { field: 'duration', headerText: 'Duration', width: 100, textAlign: 'Right' },
        { field: 'progress', headerText: 'Progress', width: 100, textAlign: 'Right' },
        { field: 'priority', headerText: 'Priority', width: 90 }
    ],
    height: 315
});

treeGridObj.appendTo('#TreeGrid');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-treegrid/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/26.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="TreeGrid"></div>        
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

You can hide the column names in column chooser by defining the columns.showInColumnChooser as false.

Open column chooser by external button

The Column chooser can be displayed on a page through external button by invoking
the openColumnChooser method with X and Y axis positions.

index.js
index.html
ej.treegrid.TreeGrid.Inject(ej.treegrid.Toolbar, ej.treegrid.ColumnChooser);
var treeGridObj = new ej.treegrid.TreeGrid({
    dataSource: sampleData,
    showColumnChooser: true,
    treeColumnIndex: 1,
    childMapping: 'subtasks',
    treeColumnIndex: 1,
    columns: [
        { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
        { field: 'taskName', headerText: 'Task Name', width: 240, showInColumnChooser: false },
        { field: 'startDate', headerText: 'Start Date', width: 110, format: 'yMd' },
        { field: 'endDate', headerText: 'End Date', width: 110, textAlign: 'Right', type: 'date', format: 'yMd' },
        { field: 'duration', headerText: 'Duration', width: 100, textAlign: 'Right' },
        { field: 'progress', headerText: 'Progress', width: 100, textAlign: 'Right' },
        { field: 'priority', headerText: 'Priority', width: 90 }
    ],
    height: 315
});
treeGridObj.appendTo('#TreeGrid');
var show = new ej.buttons.Button({ cssClass: 'e-flat' }, '#show');

document.getElementById('show').onclick = function() {
    treeGridObj.columnChooserModule.openColumnChooser(200, 50); // give X and Y axis
};
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-treegrid/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/26.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <button id="show">Open Column Chooser</button>
        <div id="TreeGrid"></div>        
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>