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. Image for the cookie policy date

How to use the column.Template("#myTemplate") value in a group header

Hi,
I'm trying to work out how to get the field "display value" to appear in a group header.


AT the moment all I can get is 

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

    Project: {{:key}} 

</script>

{{:field}} and {{:key}}where :key is the raw value of the named grouping field


What I'm looking to get instead a nicer string based on a few fields in the underlying data. eg.


<a rel='nofollow' href='{{:DraftItemURL}}'>{{:ProjectName}} {{:DraftCode}}</a>

where at the moment the :key = "ProjectName" eg.

 col.Field("ProjectName").HeaderText("Project").Width("30%").Template("<a rel='nofollow' href='{{:DraftItemURL}}'>{{:ProjectName}} {{:DraftCode}}</a>").Add()


So I guess the actual question is what fields/objects are available to JS-Render for the header? 
Can I get to the row data or something underlying it?

3 Replies

RS Renjith Singh Rajendran Syncfusion Team February 6, 2018 11:26 AM UTC

Hi Matt, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suspect that you would like to display the Group header value based on the row data resulted in Grouping. We suggest you to use the CaptionFormat property of Grid and handling the row data value inside a helper function of JsRender. Please refer the documentation link below, 

Please refer the code example below, 

<div> 
    @(Html.EJ().Grid<object>("grid") 
            ... 
           .AllowGrouping() 
            .GroupSettings(group => { group.CaptionFormat("#template"); }) 
            ... 
) 
</div> 
 
<script id="template" type="text/x-jsrender"> 
    {{:field}}-{{:~caption(#data)}}   
</script> 
 
<script> 
    var display; 
    var Cap = { 
        caption: function (args) { 
            if(args.items[0].ShipCity != args.items[0].CustomerID) 
                display = args.items[0].OrderID 
            else 
                display = args.items[0].Freight 
            return display; 
        } 
    } 
    $.views.helpers(Cap); 
</script> 

The result of the above code displays the OrderID or Freight value in group header based on the ShipCity and CustomerID values, when any of the column is grouped. Please refer the screenshot below, 

 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 



MW Matt White February 7, 2018 05:39 AM UTC

Thanks, that got me close enough.
The actual answer I was looking for was:

How do i get to the data row in order to make up a template 
eg. 

<script id="GroupHeaderTemplate" type="text/x-jsrender">
    <a rel='nofollow' href='{{:#data.items[0].DraftItemURL}}'>{{:#data.items[0].ProjectName}} {{:#data.items[0].DraftCode}}</a>
</script>



RS Renjith Singh Rajendran Syncfusion Team February 8, 2018 11:36 AM UTC

Hi Matt, 

We have analyzed your query. We suspect that you would like to compare two values in a row and display the result inside an anchor tag. We have also prepared a sample based on your requirement. We suggest you to replace the code you have shared with the following code. 

<div> 
    @(Html.EJ().Grid<object>("grid") 
        ... 
       .GroupSettings(group => { group.CaptionFormat("#template"); }) 
        ... 
     ) 
</div> 
 
<script id="template" type="text/x-jsrender"> 
    <a rel='nofollow' href="#">{{if #data.items[0].EmployeeID != #data.items[0].OrderID}}{{:#data.items[0].Freight}}{{/if}}</a> 
</script> 

Please refer the screenshot below, 

 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Live Chat Icon For mobile
Up arrow icon