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

groupOptions captionTemplate syntax for an if statement

Thread ID:





145287 Jun 15,2019 09:28 PM UTC Dec 9,2019 11:06 AM UTC Vue 5
Tags: Data Grid
Paul Silva
Asked On June 15, 2019 09:28 PM UTC

Currently having a few issues trying to use the captionTemplate with vue. Can only find examples for vanilla javascript:

 groupSettings:{captionFormat: "{{:field}} - {{:key}} : {{:count}} {{if count == 1 }} item {{else}} items {{/if}}"}   

My Attempts have only got me as far as:

 groupOptions: { captionTemplate: "<div><strong>${key}</strong> (${count} record/s)</div>"

This is okay, however i would prefer the if statement to show singular or plural dependant on how many grouped records there are.

If anyone knows a quick solution or example documentation that'd be great! Thanks

Hariharan J V [Syncfusion]
Replied On June 18, 2019 12:49 PM UTC

Hi Paul, 

Thanks for contacting Syncfusion support. 

From your query, we found that you want to use “if” statement within the Grid captionTemplate. You can achieve this requirement like as below way, 

groupSettings: { 
        "<div><strong>${key}</strong> ${if(count === 1)}<span>${count} record</span>${else}<span>${count} Records</span> ${/if}</div>", 
            columns: ["CustomerID"] 


Michael Kornatzki
Replied On December 4, 2019 07:53 AM UTC

Can you give us the original captionTemplate?

If i use your example with a currency column i lost the format (Grouping, fractional digits, ...).

The tooltip should not show the html-tags:

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 5, 2019 06:50 AM UTC

Hi Michael, 

You can resolve your reported issues by using the below code for captionTemplate

groupSettings: { 
          "${if(field === 'Freight')} $ ${/if}${key} ${if(count === 1)} ${count} record ${else} ${count} Records  ${/if}", 
        columns: ["Freight"] 

We have modified the previously provided sample based on this. You can find it below, 

Thavasianand S. 

Michael Kornatzki
Replied On December 9, 2019 06:23 AM UTC


sorry but this could be only a quick workaround!
In your example you use grouping but if i group the format is not use in the header.

If you have localisation (€ and $) one need to determine the format in the template.

the should be a possibility to use the value from the field and not to emulate it in the template. 

kind regards,

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 9, 2019 11:06 AM UTC

Hi Michael, 

You can achieve your requirement by dynamically defining the captionTemplate property of the groupSettings in the grid’s load event based on its currencyCode. This is demonstrated in below code snippet, 

export default { 
   data() { 
        return { 
           data: data, 
           currencySymbol: { 
               "USD": "$", 
               "EUR": "€" 
           groupSettings: { 
               columns: ["Freight"] 
    methods: { 
       // Grid’s load event function 
       onLoad() { 
           // Get the currency code 
           var currencyCode = this.$refs.grid.ej2Instances.currencyCode; 
           // Define the captionTemplate based on the currency code 
           this.$refs.grid.ej2Instances.groupModule.groupSettings.captionTemplate = "${if(field === 'Freight')}" + this.currencySymbol[currencyCode] + "${/if}${key} ${if(count === 1)} ${count} record ${else} ${count} Records  ${/if}"; 

We have modified the previously provided sample based on this. You can find it below, 

Thavasianand S. 


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