groupOptions captionTemplate syntax for an if statement

[Paul Silva]

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]

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"] 

    } 

Sample: https://codesandbox.io/s/vue-template-exfij 

Regards, 

Hariharan 

[Michael Kornatzki]

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]

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, 

Sample: https://codesandbox.io/s/vue-template-rovn7 

 

Regards, 

Thavasianand S. 

[Michael Kornatzki]

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

[Thavasianand Sankaranarayanan]

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, 

Sample: https://codesandbox.io/s/vue-template-hg9ol 

Regards, 

Thavasianand S.