How to render the columnchooser inside Grid's toolbar?
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
Figure: shows the column chooser inside the grid toolbar
