groupOptions captionTemplate syntax for an if statement

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

Reply | Reply with quote

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: {

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

Reply | Reply with quote

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:

Reply | Reply with quote

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: {

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.

Reply | Reply with quote

Michael Kornatzki

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

Reply | Reply with quote

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,

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

Regards,

Thavasianand S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
145287	Jun 15,2019 09:28 PM UTC	Dec 9,2019 11:06 AM UTC	Vue	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US