Column Chooser

2 Mar 20224 minutes to read

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

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser="true" toolbar="@(new List<string>() { "ColumnChooser"})">    
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" width="150" ></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" showInColumnChooser="true" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" width="150"></e-grid-column>
        <e-grid-column field="ShipppedDate" headerText="Shipped Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="ShipCountry"  headerText="Ship Country" width="150" ></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" visible="false" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

You can hide the column names in column chooser by defining the showInColumnChooser property as false in e-grid-column tag helper of particular column.

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.

<ejs-button id="show" content="OPEN COLUMN CHOOSER"></ejs-button>
        <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnChooser="true" allowPaging="true">
            <e-grid-columns>
                <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
                <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
                <e-grid-column field="OrderDate" headerText=" Order Date" textAlign="Right" format="yMd" width="130"></e-grid-column>
                <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
                <e-grid-column field="ShippedDate" headerText="Shipped Date" textAlign="Right" format="yMd" width="140"></e-grid-column>                
                <e-grid-column field="ShipCountry"  headerText="Ship Country" width="150"></e-grid-column>
                <e-grid-column field="ShipCity"   headerText="Ship City" width="150"></e-grid-column> 
            </e-grid-columns>
        </ejs-grid>
    </div>
    
<script>
    document.getElementById('show').addEventListener("click", function(){
        var grid = document.getElementById('Grid').ej2_instances[0];
        grid.columnChooserModule.openColumnChooser(200, 50); // give X and Y axis
    });
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}