Header Template

[Anton de Gruchy]

I want to use the same template for all my column headers through the application. What are the field names that I can use in the template to display the column name and sort direction?

if  I do this. 

<span>{{:headerText}}</span> 

it just displays {{:headerText}} in the column header

[Farveen Sulthana Thameeztheen Basha]

Hi Anton, 

Thanks for contacting Syncfusion Support. 

We have checked your query and achieved your requirement displaying the headerText and sort icon on headerTemplate by using “create” and “load” event of the Grid. In the “load” event of the Grid, we have enabled the headerTemplate(sort icon) by using headerTemplateID for the columns that have enabled sorting. On create event, we have prepend the headerText for the columns that has e-headertemplate class. 

Refer  to the code example:- 

<script type="text/javascript"> 

        $(function () { 

           $("#Grid").ejGrid({  

                dataSource: window.gridData,  

                 allowSorting :true, 

                 allowPaging:true, 

                 load : function (args) {  

                    for (var i = 0 ; i < this.model.columns.length; i++) {  

                        if (ej.isNullOrUndefined(this.model.columns[i].allowSorting)) {  

                            this.model.columns[i].headerTemplateID = "#datetemplate";  

                        }  

                    }  

                },  

                create : function(args) {  

                        var headers = this.getHeaderTable().find(".e-headercelldiv");  

                        for (var i = 0 ; i < headers.length; i++) {  

                            if(headers.eq(i).parent().hasClass("e-headertemplate"))   

                               headers.eq(i).prepend("<span style='float:right'>" + headers.eq(i).attr("data-ej-mappingname") + "</span>")  

                        }  

                },  

                isResponsive: true,  

                columns: [  

                     { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75 },                  .  . . 

              ]  

            });  

        });  

       </script> 

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

          <span class="date e-headericon"></span>  

         </script>  

Sample Link :- http://jsplayground.syncfusion.com/40vmskns 

Refer to the API link :- 

https://help.syncfusion.com/api/js/ejgrid#events:load 

https://help.syncfusion.com/api/js/ejgrid#events:create 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T