We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Header Template

Thread ID:

Created:

Updated:

Platform:

Replies:

132539 Sep 7,2017 06:07 AM Sep 9,2017 12:32 PM JavaScript 1
loading
Tags: ejGrid
Anton de Gruchy
Asked On September 7, 2017 06:07 AM

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 [Syncfusion]
Replied On September 9, 2017 12:32 PM

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>  



Refer to the API link :- 



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

Regards, 

Farveen sulthana T 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;