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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom Header Template

Thread ID:

Created:

Updated:

Platform:

Replies:

132043 Aug 9,2017 12:30 PM UTC Sep 12,2017 01:16 PM UTC JavaScript 5
loading
Tags: ejGrid
marco
Asked On August 9, 2017 12:30 PM UTC

Hi There,

Provided that I read any available documentation, I state here my requirement:
"Place a muted element in the header of the column to let css know it is sortable yet not sorted".

So basically I need a custom header template. Simple. Try hard to find something with a bit of JsRender syntax, or to figure out which property should I point, yet there are only static text samples. Aren't this template rendered with JsRender?

Above all samples, I am trying to doing some like this:

script id="columnHeaderTemplate" (type "text/x-jsrender")
(div class="sort deft-desc" data-sort=""){{:headerText}}
   (span class='e-icon xp-unsorted'    )

   (gotta remove any angular bracket to get it shows up)
[Edited: removed sensitive information]

then passed in each column:
....
 headerText: c.HeaderText,
 headerTemplateID: '#columnHeaderTemplate', //id of the script blok of JSRender
...
To my surprise, all the header text are now "{{:headerText}}" as if it is not even rendered (no rendering error indeed).

Could you please provide a little snippet of template which basically use the property to bind with render and add even an empty span? 
I would prefer this way for it is easy, clean and reusable, however if there is another way such as subscribing the event of the header creation to place there the header text along with my span, please point me to that.

Thank you for your response,

Marco


Prasanna Kumar Viswanathan [Syncfusion]
Replied On August 10, 2017 01:15 PM UTC

Hi Marco, 

Thanks for contacting Syncfusion support. 

According to your requirement we suspect that you need to place an element in column header to identify the whether the particular column is sortable. To achieve this requirement we used headerTemplate feature and load event of ejGrid. In the attached sample we mentioned allowSorting as false for two columns in columns API of ejGrid. The load event will be triggered at initial load. In this event we checked with columns API and add the headerTemplateID to the particular column.  

Find the code example and sample:  


$("#Grid").ejGrid({ 
                dataSource: data, 
                ----------------- 
               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: "CustomerID", headerText: "Customer ID", width: 80, allowSorting : false }, 
                        ---------------- 
                        { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right, priority: 3, allowSorting : false }, 
                        --------------- 
               ] 
            }); 
 
<script id="datetemplate" type="text/x-jsrender"> 
        <span class="date e-headericon"></span> 
    </script> 
 
    <style> 
        .e-headericon { 
            content: url("Style/images/GridActive.png"); 
            height : 20px !important; 
            width: 23px !important; 
            float : left; 
        } 
    </style> 


Regards, 
Prasanna Kumar N.S.V 


marco
Replied On August 11, 2017 05:40 PM UTC

HPrasanna Kumar,

I see you yourself could not use JsRender syntax in header template.

However, your solution will suffice for my purpose and this "ticket" should be considered "successfully closed" as long as you provide guarantee that this tecnique won't brake later on with updates :)

Thank you,

Marco


Prasanna Kumar Viswanathan [Syncfusion]
Replied On August 14, 2017 12:01 PM UTC

Hi Macro, 
 
We are happy to hear that you have got the solution.  
 
If you face any issue in the provided technique on later updates, please get back to us. We are happy to assist you. 
 
Regards, 
Prasanna Kumar N.S.V 


marco
Replied On September 11, 2017 11:48 AM UTC

Hi Prasanna,

The very first thing I have to notice is that there is no "data-ej-mappingname"  attribute, but this one is set: "ej-mappingname".

Also the column reordering suddenly stops to works, for it seems impossibile to drop a column anywhere among headers: this is the error I can share:

ej.web.all.min.js:10 Uncaught TypeError: Cannot read property 'field' of null

    at Object.drop (ej.web.all.min.js:10)

    at Object._dropEvent (ej.web.all.min.js:10)

    at Object._drop (ej.web.all.min.js:10)

    at Object._dragEnd (ej.web.all.min.js:10)

    at Object._dragStop (ej.web.all.min.js:10)

    at HTMLDocument.e (jquery.min.js:2)

    at HTMLDocument.dispatch (jquery.min.js:3)

    at HTMLDocument.q.handle (jquery.min.js:3)

I was fancy some problem with the name of the attribute, however, leaving standard headers (removing the code of this thread), makes the drop works again - it find the field. So I am back to you again for I need both working: a custom e-icon inserted in the template, and column dropping as usual.

Did I miss something?


Vignesh Natarajan [Syncfusion]
Replied On September 12, 2017 01:16 PM UTC

Hi Marco, 

We have analyzed your issue and we are able to reproduce issue at our end. It is an defect. We have logged an issue ”Reordering is not working fine with header template”. The mentioned issue will be fixed and it will be included in the Volume 3 Service pack 2 which is expected to be rolled out by end of September month.  

In our previous update, we have suggested you to use create event to render the headertext using “data-ej-mappingname”. But this won’t work when you are reordering the column. So we suggest you to use actioncomplete. Please refer below code snippet and link for online help documentation for you reference. 

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"; 
                        } 
                    } 
                }, 
actionComplete: 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>") 
                    } 
               }, 


Regards, 
Vignesh Natarajan. 


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.

Warning Icon 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.Close Icon

;