Column chooser in EJ2 JavaScript Treegrid control

1 Sep 202523 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/31.1.17/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-treegrid/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/31.1.17/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/31.1.17/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-treegrid/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/31.1.17/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>

Column chooser template in Syncfusion EJ2 JavaScript TreeGrid

The column chooser template feature allows full customization of the column chooser’s header, content, and footer, making it easier to manage column visibility. To enable the column chooser, set showColumnChooser to true and add ColumnChooser to the toolbar property.

To implement a custom column chooser template in the TreeGrid, use the following properties:

columnChooserSettings.headerTemplate - Defines the header template of the column chooser.
columnChooserSettings.template- Defines the content template.
columnChooserSettings.footerTemplate - Defines the footer template.
columnChooserSettings.renderCustomColumnChooser - Allows you to override the default column chooser UI with a fully customized layout.

In this example, a Syncfusion TreeView component is rendered inside the column chooser. To use the TreeView component, install the Syncfusion TreeView package as described in the documentation. The columnChooserSettings.template property defines a element with the id set to tree, providing as a container for the TreeView component. The columnChooserSettings.renderCustomColumnChooser method initializes the TreeView with checkboxes and appends it to this template. Checkbox selection is handled using the nodeClicked and keyPress events, which organize columns into Task Info, Schedule, and Progress.

The column chooser footer is customized using columnChooserSettings.footerTemplate, replacing the default buttons with customized Apply and Close buttons. The Apply button updates column visibility based on selection, while the Close button closes the column chooser via the onClick event. Additionally, the header is customized using columnChooserSettings.headerTemplate to include a title and an icon.

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

var treeObj;
var treeData = [];

function renderCustomColumnChooser(targetElement, columns) {
    var parentNodes = [
        { id: 1, name: 'Task Info', hasChild: true, expanded: true },
        { id: 2, name: 'Schedule', hasChild: true, expanded: true },
        { id: 3, name: 'Progress', hasChild: true, expanded: true }
    ];

    treeData = columns.map(function (column) {
        var parentId;
        switch (column.field) {
            case 'taskID':
            case 'taskName':
                parentId = 1;
                break;
            case 'startDate':
            case 'endDate':
                parentId = 2;
                break;
            case 'duration':
            case 'progress':
            case 'priority':
                parentId = 3;
                break;
        }
        return {
            id: column.uid,
            name: column.headerText,
            pid: parentId,
            isChecked: column.visible
        };
    });

    var uniquePids = [...new Set(treeData.map(item => item.pid))];
    var filteredParents = parentNodes.filter(parent => uniquePids.includes(parent.id));
    treeData.push(...filteredParents);

    treeObj = new ej.navigations.TreeView({
        fields: { dataSource: treeData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
        showCheckBox: true,
        nodeClicked: nodeCheck,
        keyPress: nodeCheck,
        cssClass: "no-border"
    });

    treeObj.appendTo(targetElement);
}

function nodeCheck(args) {
    var node = args.node;
    var getNodeDetails = treeObj.getNode(node);
    var checkedNode = [node];

    if (args.event.target.classList.contains('e-fullrow') || args.event.key === "Enter") {
        if (getNodeDetails.isChecked === 'true') {
            treeObj.uncheckAll(checkedNode);
        } else {
            treeObj.checkAll(checkedNode);
        }
    }
}

function columnChooserSubmit() {
    var checkedElements = [];
    var uncheckedElements = [];

    var treeItems = document.querySelectorAll('.e-list-item');
    treeItems.forEach(function (item) {
        var itemDetails = treeObj.getNode(item);
        if (!itemDetails.hasChildren) {
            if (item.getAttribute('aria-checked') === 'true') {
                checkedElements.push(itemDetails.text);
            } else {
                uncheckedElements.push(itemDetails.text);
            }
        }
    });

    var visibleColumns = checkedElements;
    var hiddenColumns = uncheckedElements;

    treeGridObj.grid.columnChooserModule.changeColumnVisibility({ visibleColumns, hiddenColumns });
}

function onCreated() {
    if (document.getElementById('submitButton') && document.getElementById('abortButton')) {
        new ej.buttons.Button().appendTo('#submitButton');
        new ej.buttons.Button().appendTo('#abortButton');

        document.getElementById('submitButton').onclick = columnChooserSubmit;
        document.getElementById('abortButton').onclick = function () {
            treeGridObj.grid.columnChooserModule.hideDialog();
        };
    }
}

var treeGridObj = new ej.treegrid.TreeGrid({
    dataSource: sampleData,
    childMapping: 'subtasks',
    showColumnChooser: true,
    treeColumnIndex: 1,
    toolbar: ['ColumnChooser'],
    columnChooserSettings: {
        headerTemplate: '#ccHeaderTemplate',
        template: '#ccContentTemplate',
        footerTemplate: '#ccFooterTemplate',
        renderCustomColumnChooser: function () {
            renderCustomColumnChooser(document.getElementById('treeViewContainer'), treeGridObj.grid.columns);
        },
        enableSearching: true
    },
    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,
    created: onCreated
});

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/31.1.17/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-treegrid/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/31.1.17/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>
        <script id="ccHeaderTemplate" type="text/x-template">
            <div class="cc-header">
            <span class="e-icons e-columns"></span>
            <span>Column Options</span>
            </div>
        </script>

        <script id="ccContentTemplate" type="text/x-template">
             <div id="treeViewContainer"></div>
        </script>

        <script id="ccFooterTemplate" type="text/x-template">
            <div class="cc-footer">
                <button id="submitButton">Apply</button>
                <button id="abortButton">Close</button>
            </div>
        </script>
    </div>

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

</html>