Column Chooser in ASP.NET MVC Tree Grid Component

29 Aug 202510 minutes to read

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

@(Html.EJS().TreeGrid("ColumnChooser").ShowColumnChooser(true).PageSettings(p => p.PageSize(10))
      .DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).ShowInColumnChooser(false).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
         col.Field("Duration").HeaderText("Duration").Width(80).Add();

       }).Height(315).ChildMapping("Children").TreeColumnIndex(1).AllowPaging().Toolbar(new List<string>() { "ColumnChooser" })Render()
)
public ActionResult ColumnChooser()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    return View();    
}

NOTE

You can hide the column names in column chooser by defining the 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.

@Html.EJS().Button("opencolumnchooser").Content("Open Column Chooser").IsPrimary(true).Render()

@(Html.EJS().TreeGrid("ColumnChooserTreeGrid").
      .ShowColumnChooser()
      .PageSettings(p => p.PageSize(10))
      .DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).ShowInColumnChooser(false).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
         col.Field("Duration").HeaderText("Duration").Width(80).Add();

       }).Height(315).ChildMapping("Children").TreeColumnIndex(1).AllowPaging().Render()
)
<script>
    document.getElementById('opencolumnchooser').addEventListener("click", () => {
        var treeGrid = document.getElementById('ColumnChooserTreeGrid').ej2_instances[0];
       treeGrid.columnChooserModule.openColumnChooser(200, 50); // give X and Y axis
    });
</script>
public ActionResult ColumnChooserbutton()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    return View();    
}

Column chooser template in Syncfusion ASP.NET MVC 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.

@Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.sampleData).ChildMapping("subtasks").TreeColumnIndex(1).ShowColumnChooser(true).Toolbar(new List<string> { "ColumnChooser" }).ColumnChooserSettings(cc => { cc.HeaderTemplate("#ccHeaderTemplate"); cc.Template("#ccContentTemplate"); cc.FooterTemplate("#ccFooterTemplate"); cc.EnableSearching(true); }).Columns(col =>
{
   col.Field("taskID").HeaderText("Task ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
   col.Field("taskName").HeaderText("Task Name").Width(240).ShowInColumnChooser(false).Add();
   col.Field("startDate").HeaderText("Start Date").Width(110).Format("yMd").Add();
   col.Field("endDate").HeaderText("End Date").Width(110).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Type("date").Format("yMd").Add();
   col.Field("duration").HeaderText("Duration").Width(100).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("progress").HeaderText("Progress").Width(100).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("priority").HeaderText("Priority").Width(90).Add();
}).Height(315).Created("onCreated").Render()
   
<script type="text/x-template" id="ccHeaderTemplate">
    <div class="e-cc-header">Choose Columns</div>
</script>

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

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

< script >
    let treeObj;
    let treeData = [];

    function renderCustomColumnChooser(targetElement, columns) {
        const 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(column => {
            let 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
            };
        });

        const uniquePids = [...new Set(treeData.map(item => item.pid))];
        const 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) {
        const node = args.node;
        const getNodeDetails = treeObj.getNode(node);
        const 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() {
        const checkedElements = [];
        const uncheckedElements = [];
        const treeItems = document.querySelectorAll('.e-list-item');
        treeItems.forEach(item => {
            const itemDetails = treeObj.getNode(item);
            if (!itemDetails.hasChildren) {
                if (item.getAttribute('aria-checked') === 'true') {
                    checkedElements.push(itemDetails.text);
                } else {
                    uncheckedElements.push(itemDetails.text);
                }
            }
        });

        const visibleColumns = checkedElements;
        const hiddenColumns = uncheckedElements;
        treeGridObj.grid.columnChooserModule.changeColumnVisibility({ visibleColumns, hiddenColumns });
    }

    function onCreated() {
        new ej.buttons.Button().appendTo('#submitButton');
        new ej.buttons.Button().appendTo('#abortButton');
        document.getElementById('submitButton').onclick = columnChooserSubmit;
        document.getElementById('abortButton').onclick = () => {
            treeGridObj.grid.columnChooserModule.hideDialog();
        };
    }

    let treeGridObj;
    document.addEventListener('DOMContentLoaded', function () {
        treeGridObj = document.getElementById('TreeGrid').ej2_instances[0];
        treeGridObj.columnChooserSettings.renderCustomColumnChooser = renderCustomColumnChooser;
    });
</script>
public IActionResult Index()
{
    var tree = TreeData.GetFormatData();
    ViewBag.data = tree;
    return View();
}

Column Chooser Template TreeGrid

NOTE

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.