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 display other field in a group header

I'm looking for something like this: https://www.syncfusion.com/forums/135787/how-to-use-the-column-templatequotmytemplatequot-value-in-a-group-header
but in EJ2, MVC5.

My Grid:
<div> 
    @(Html.EJS().Grid("Grid") 
        ... 
       .GroupSettings(group => { group.ShowDropArea(false).Columns(new string[] { "InvestId" }).CaptionTemplate("#captiontemplate"); })
        ... 
     ) 
div> 

My template:

Caption fucntion

function caption(args) {
        console.log(args); // nothing here
}

Can you help?
Thank!

2 Replies 1 reply marked as answer

GI Gin August 26, 2019 12:33 PM UTC

//can't add my template code to the question, so I reply to add this

My template:
<script id="captiontemplate" type="text/x-template">
     <span class="badge badge-md badge-success" title="" style="font-size: unset">#${key} - ${caption()}</span>
</script>


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 27, 2019 11:01 AM UTC

Hi Customer,  
 
In the template, method can be called using the data as parameter as follows. The parameter will provide details about the current grouping column only which is the required behavior. If you would like to mention any other column, refer to the window.format method as shown in the code example.  
 
 
 
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource). 
   . ..  
        . . .  
AllowGrouping().GroupSettings(group => { group.Columns(new string[] { "Freight" }).CaptionTemplate("#captiontemplate"); }).Render() 
 
<script id="captiontemplate" type="text/x-template"> 
    ${format(data)} 
</script> 
 
<script> 
    window.format = function (data) { 
        var inst = document.getElementById('Grid').ej2_instances[0] 
        var val = inst.getColumnByIndex(inst.getColumnIndexByField(data.field) + 1).field + ' - ' + data.key; 
        return val; 
    } 
</script> 
 
Regards,  
Seeni Sakthi Kumar S. 


Marked as answer
Loader.
Up arrow icon