Custom Header Template

[marco]

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]

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> 

Sample: http://www.syncfusion.com/downloads/support/forum/132043/ze/Html_Encode_Feature723185136 

Regards, 

Prasanna Kumar N.S.V 

[marco]

Hi Prasanna 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]

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]

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]

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>") 

                    } 

               }, 

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

Regards, 

Vignesh Natarajan.