Category / Section
How to display headertemplate value in column chooser
1 min read
We can achieve this using dataBound event of ejGrid. This event triggers at the initial rendering of the Grid.
“headerTemplateID” property used to add the template within the header element of the particular column.
JavaScript:
$("#Grid1").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
dataBound: 'databound',
showColumnChooser: true,
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "CustomerID", headerText: 'Customer ID', width: 90 },
{ field: "EmployeeID", headerTemplateID: "#HeaderTemp", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}" },
]
});
MVC:
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.ShowColumnChooser()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("EmployeeID").HeaderTemplateID("#HeaderTemp").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(90).Format("{0:C}").Add();
})
.ClientSideEvents(eve=>eve.DataBound("databound"))
)
ASPX:
<ej:Grid ID="Grid1" AllowPaging="True" ClientIDMode="Static" ShowColumnChooser="true" runat="server">
<ClientSideEvents DataBound="databound" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" />
<ej:Column Field="EmployeeID" HeaderTemplateID="#HeaderTemp" TextAlign="Right" Width="90" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="90" Format="{0:C}" />
</Columns>
</ej:Grid>
<script type="text/x-jsrender" id="HeaderTemp"> <span>Employee</span> </script>
In the dataBound event of Grid control, if a column have headerTemplateID then we set that template value to the column chooser.
function databound(args) {
setTimeout(function () {
var gridObj = $('#Grid1').ejGrid('instance')
for (var i = 0 ; i < gridObj.model.columns.length ; i++) {
if (!ej.isNullOrUndefined(gridObj.model.columns[i].headerTemplateID)) {
var element = $("#" + gridObj._id + gridObj.model.columns[i].field).parents('.e-columnChooserListDiv').find('label');
element.html($(gridObj.model.columns[i].headerTemplateID).html());
}
}
}, 0);
}
The result will be as follows.
Figure 1: Display headertemplate value in column chooser
