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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

135787 Feb 6,2018 02:57 AM UTC Feb 8,2018 11:36 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Matt White
Asked On February 6, 2018 02:57 AM UTC

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 [Syncfusion]
Replied On 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. 


Matt White
Replied On 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>


Renjith Singh Rajendran [Syncfusion]
Replied On 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. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon