How to render the columnchooser inside Grid's toolbar?

1 min read

This Knowledge base explains the way of how to render the columnChooser inside the grid toolbar.

Solution:

We can add the columnChooser inside the grid toolbar using dataBound event in grid.

The following code example explains the above behavior.

Render the grid.

JS:

  <div id="Grid"></div>
    <script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                dataSource: data,
                allowPaging: true,
                showColumnChooser: true,
                dataBound: "databound",
                actionComplete: "actioncomplete",
                toolbarSettings: { showToolbar: true },
                columns: [
                       { field: "EmployeeID", isPrimaryKey: true, width: 75 },
                       { field: "FirstName", width: 100 },
                       { field: "Title", width: 120 },
                       { field: "City", width: 100 },
                       { field: "Country", width: 100 }
                ],
            });
        });
    </script>

MVC:

@(Html.EJ().Grid<object>("Grid")
             .Datasource(((IEnumerable<object>)ViewBag.data))
             .AllowPaging()
             .ShowColumnChooser()
             ToolbarSettings(tool=>tool.ShowToolbar(true))
             .Columns(col =>
                {
                    col.Field("EmployeeID").IsPrimaryKey(true).Width(75).Add();
                    col.Field("FirstName").Width(100).Add();
                    col.Field("Title").Width(120).Add();
                    col.Field("City").Width(100).Add();
                    col.Field("Country").Width(100).Add();
                })
             .ClientSideEvents(eve => { eve.DataBound("databound").ActionComplete("actioncomplete"); })
)

ASP:

<ej:Grid ID="Grid" runat="server" AllowPaging="True" ShowColumnChooser="true">
        <ToolbarSettings ShowToolbar="true"></ToolbarSettings>
        <Columns>
            <ej:Column Field="EmployeeID" IsPrimaryKey="true" Width="75" />
            <ej:Column Field="FirstName" Width="100" />
            <ej:Column Field="Title" Width="120" />
            <ej:Column Field="City" Width="100" />
            <ej:Column Field="Country" Width="100" />
        </Columns>
        <ClientSideEvents DataBound="databound" ActionComplete="actioncomplete" />
    </ej:Grid>

ASP.NET CORE

<ej-grid id="Grid" allow-paging="true" datasource="ViewBag.datasource" show-column-chooser="true" databound="databound" action-complete="actioncomplete">
    <e-toolbar-settings show-toolbar="true"></e-toolbar-settings>
    <e-columns>
        <e-column field="EmployeeID" header-text="EmployeeID" width="75" is-primary-key="true"></e-column>
        <e-column field="FirstName" header-text="FirstName" width="100"></e-column>
        <e-column field="Title" header-text="Title" width="120"></e-column>
        <e-column field="City" header-text="City" width="100"></e-column>
        <e-column field="Country" header-text="Country" width="100"></e-column>
    </e-columns>
</ej-grid>

Angular

<ej-grid #grid id="Grid" [dataSource]="gridData"  (cellEdit)="onCellEdit($event)"  [editSettings]="editSettings">
    <e-columns>
        <e-column field="EmployeeID" [isPrimaryKey]="true" headerText="EmployeeID"  width=”70” ></e-column>
        <e-column field="FirstName" headerText="FirstName" width=”100” ></e-column>
        <e-column field="Title" headerText="Title" width=”120” ></e-column>
        <e-column field="City" headerText="City" width=”100” ></e-column>
        <e-column field="Country" headerText="Country" width=”100” ></e-column>        
    </e-columns>
</ej-grid>

In DataBound event we have called the common method name “columnChooserPosition” to append the column chooser element inside the grid toolbar initially (when grid loading initially)
In actionComplete event we have called the same method to append the column chooser element inside the grid toolbar for any further action takes place in grid.

TS file

@ViewChild('grid') GridModel: EJComponents<any, any>;
 
    onDataBound(e: any) {
        var proxy = this;
        setTimeout(function () {
            proxy.columnChooserPosition();
        }, 0);
    }
    onActionComplete(e: any) {
        var grid = $(this.Grid.el.nativeElement).ejGrid("instance")
        if (!grid.initialRender) {
            this.columnChooserPosition();
        }
    }
    columnChooserPosition() {
        $("#Grid .e-gridtoolbar").append($(".e-ccButton")); //append the column chooser button inside the grid toolbar 
        $(".e-ccButton").css("margin-top", 5 + 'px');
    }
     }
}

JavaScript:

<script type="text/javascript">
function databound(args) {
            setTimeout(function () {
                columnChooserPosition();
            }, 0);
        };
        function actioncomplete(args) {
            if (!this.initialRender) {
                columnChooserPosition();
            }
        };
        function columnChooserPosition() {
            $("#Grid .e-gridtoolbar").append($(".e-ccButton"));   //append the column chooser button inside the grid toolbar
            $(".e-ccButton").css("margin-top", 5 + 'px');
        };
</script>

The following output will be the result of the above code example

$C:\Users\Manisankar.durai\Desktop\sshot-1.png$

Figure: shows the column chooser inside the grid toolbar

Did you find this information helpful?

Yes

Comments (0)

How to render the columnchooser inside Grid's toolbar?

Access denied