Render HeaderText value in HeaderTemplate

[Landy]

I have a grid with multiple date columns the date columns will vary. Is there a way to use one template for multiple columns? My columns are structured :

"[{"field":"AccountId","isPrimaryKey":true,"headerText":"ID","width":75,"textAlign":"ej.TextAlign.left","visible":false},

{"field":"Name","headerText":"Account","width":300,"textAlign":"ej.TextAlign.right"},

{"field":"ParentAccountId","headerText":"","visible":false},

{"field":"11\/01\/2017 00:00:00","headerText":"Nov 2017","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"12\/01\/2017 00:00:00","headerText":"Dec 2017","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"01\/01\/2018 00:00:00","headerText":"Jan 2018","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"02\/01\/2018 00:00:00","headerText":"Feb 2018","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"03\/01\/2018 00:00:00","headerText":"Mar 2018","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"04\/01\/2018 00:00:00","headerText":"Apr 2018","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"05\/01\/2018 00:00:00","headerText":"May 2018","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"06\/01\/2018 00:00:00","headerText":"Jun 2018","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"07\/01\/2018 00:00:00","headerText":"Jul 2018","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"08\/01\/2018 00:00:00","headerText":"Aug 2018","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"09\/01\/2018 00:00:00","headerText":"Sep 2018","headerTemplateID":"#DateTemplate","format":"{0:C2}"},

{"field":"10\/01\/2018 00:00:00","headerText":"Oct 2018","headerTemplateID":"#DateTemplate","format":"{0:C2}"}]"

so rather than creating 12 different templates is there a way to use the HeaderText inside the template? I can't get access to the headerText could I access the "field" value?

This is my template:

<scripttype="text/x-jsrender"id="DateTemplate">

{{:['headerText']}}<buttonclass="importButton"data-month="{{:['field']}}"><iclass="fafa-import">i>button>
 
script>

[Vignesh Natarajan]

Hi Randolph, 

 

Thanks for using Syncfusion products. 

 

We have analyzed your query and by default we have given support to render html element using HeaderTemplate feature of Grid. So using JsRender we cannot access the headerText value or the field value.  

We suspect that you want to display the HeaderText value followed by the field value in the button. We have achieved your requirement by directly setting the value to element  

Refer the belwo code snippet 

 

              function complete(args){ 

                             var gridObj = $(".e-grid").ejGrid("instance"); 

                             for(var i=0;i<gridObj.getHeaderTable().find("th").length-1 ;i++ ){ 

                                                         gridObj.getHeaderTable().find("th").eq(i).find("p").text(gridObj.model.columns[i].headerText) 

                            gridObj.getHeaderTable().find("th").eq(i).find("button").text(gridObj.model.columns[i].field) 

                             } 

                             } 

    </script> 

               

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

     

<p style="float:left"></p><button class="importButton" size="small"></button> 

 

</script> 

  

Refer the below screenshot for the output 

 

 

 

Refer our online documentation for your reference 

 

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

 

If we misunderstood your query please get back to us with more details 

Regards, 

Vignesh Natarajan. 

   

[Landy]

That is what I was looking to do. I was hoping for a more concise solution, doing it this way serves my purpose, Thank you.

[Vignesh Natarajan]

Hi Randolph, 

Thanks for the update. 

We are happy to hear that your query has been resolved by our solution. 

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

Regards, 

Vignesh Natarajan