Articles in this section
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.


            // 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}" },



          .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();



<ej:Grid ID="Grid1" AllowPaging="True" ClientIDMode="Static" ShowColumnChooser="true" runat="server">
            <ClientSideEvents DataBound="databound" />
              <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}" /> 


    <script type="text/x-jsrender" id="HeaderTemp"> 

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');
            }, 0);



The result will be as follows.

Figure 1: Display headertemplate value in column chooser

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment