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

groupOptions captionTemplate syntax for an if statement

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

5 Replies

HJ Hariharan J V Syncfusion Team 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: { 
        captionTemplate: 
        "<div><strong>${key}</strong> ${if(count === 1)}<span>${count} record</span>${else}<span>${count} Records</span> ${/if}</div>", 
            columns: ["CustomerID"] 
    } 


Regards, 
Hariharan 



MK Michael Kornatzki 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:



TS Thavasianand Sankaranarayanan Syncfusion Team December 5, 2019 06:50 AM UTC

Hi Michael, 

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

groupSettings: { 
        captionTemplate: 
          "${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, 

 
Regards, 
Thavasianand S. 



MK Michael Kornatzki December 9, 2019 06:23 AM UTC

Hi,

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,
michael


TS Thavasianand Sankaranarayanan Syncfusion Team 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, 

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon