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

[Matt White]

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?

[Renjith Singh Rajendran]

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, 

https://help.syncfusion.com/aspnetmvc/grid/grouping?cs-save-lang=1&cs-lang=js#group-caption-formatgroup-caption-template 

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. 

[Matt White]

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>

[Renjith Singh Rajendran]

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.