1. Home
  2. Forum
  3. Vue
  4. Need group caption template for grid when exporting

Need group caption template for grid when exporting

The grid group settings has an option for captionTemplate to customize the group caption in html:

https://ej2.syncfusion.com/vue/documentation/api/grid/groupSettings/#captiontemplate

But how do you customize the group caption when exporting to Excel or PDF? The function

PdfExport.prototype.processGroupedRecords in pdf-export.js has code:

```

var value = this_1.parent.getColumnByField(dataSourceItems.field).headerText + ': ' + (!col.enableGroupByFormat ? this_1.exportValueFormatter.formatCellValue(args) : dataSourceItems.key) + ' - ' + dataSourceItems.count + (dataSource.count > 1 ? ' items' : ' item');

var cArgs = { captionText: value, type: 'PDF' };

```

How do you customize that caption text?


8 Replies
BN Bill Naples November 7, 2021 08:50 PM UTC

Below is a potential patch to override the formatted group value, although the overall format (i.e., 'HEADERTEXT: FORMATTED_VALUE: N items') is not overridable.


import { ExcelExport, PdfExport } from '@syncfusion/ej2-vue-grids'

function formatCellValue (gObj, dataSource, args) {
if (args.column.specialCondition) {
return 'SPECIAL VALUE'
}
return this.__proto__.formatCellValue.call(this, args)
}

const pdfProcessGroupedRecords = PdfExport.prototype.processGroupedRecords
PdfExport.prototype.processGroupedRecords = function (pdfGrid, dataSource, gridColumns, gObj, border, level, font, brush, backgroundBrush, returnType, pdfExportProperties, helper, index) {
// processGroupedRecords is called recursively, so we need to handle overriding formatCellValue like a stack.
const _formatCellValue = this.exportValueFormatter.formatCellValue
this.exportValueFormatter.formatCellValue = formatCellValue.bind(this.exportValueFormatter, gObj, dataSource)
pdfProcessGroupedRecords.apply(this, arguments)
this.exportValueFormatter.formatCellValue = _formatCellValue
}

const excelProcessGroupedRows = ExcelExport.prototype.processGroupedRows
ExcelExport.prototype.processGroupedRows = function (gObj, dataSource, headerRow, level, startIndex, excelExportProperties, excelRows, helper) {
// processGroupedRows is called recursively, so we need to handle overriding formatCellValue like a stack.
const _formatCellValue = this.exportValueFormatter.formatCellValue
this.exportValueFormatter.formatCellValue = formatCellValue.bind(this.exportValueFormatter, gObj, dataSource)
excelProcessGroupedRows.apply(this, arguments)
this.exportValueFormatter.formatCellValue = _formatCellValue
}


RS Rajapandiyan Settu Syncfusion Team November 8, 2021 08:54 AM UTC

Hi Bill, 

Thanks for contacting Syncfusion support. 

Based on the query we could understand that your requirement is to customize the group caption value on exporting the Grid. This can be achieved by using the Grid’s exportGroupCaption event which allows to customize the group caption text as required. This is demonstrated in the below code snippet, 


 
 
<template> 
  <div id="app"> 
    <ejs-grid 
      ref="grid" 
      :dataSource="data" 
      --- 
      :groupSettings="groupOptions" 
      :exportGroupCaption="exportGroupCaption" 
    > 
      --- 
    </ejs-grid> 
  </div> 
</template> 
<script> 
 
Vue.use(GridPlugin); 
 
export default { 
  data() { 
    return { 
      groupOptions: { 
        captionTemplate:  '<span class="groupItems" style="color:blue">${field}: ${key}</span>', 
      }, 
    }; 
  }, 
  methods: { 
    exportGroupCaption: function (args) { 
      // Here you can customize the groupcaption text as per your requirement 
      args.captionText = args.captionText.split("-")[0].trim(); 
    }, 
  }, 
}; 
</script> 
 

We have prepared a sample for your reference. You can find it below, 


Please get back to us if you require any further assistance. 

Regards, 
Rajapandiyan S 


BN Bill Naples November 8, 2021 10:28 AM UTC

Hi Rajapandiyan,


Thank you for that information. I hadn't noticed the exportGroupCaption event. However, that event doesn't provide all the arguments I need:

https://ej2.syncfusion.com/vue/documentation/api/grid/exportGroupCaptionEventArgs/#exportgroupcaptioneventargs

I need the dataSource argument passed into:

PdfExport.prototype.processGroupedRecords = function (pdfGrid, dataSource, gridColumns, gObj, border, level, font, brush, backgroundBrush, returnType, pdfExportProperties, helper, index) {
ExcelExport.prototype.processGroupedRows = function (gObj, dataSource, headerRow, level, startIndex, excelExportProperties, excelRows, helper) {

This dataSource argument enables access to the rows that are part of that group. The patch in my previous message acquires access to the dataSource. Can you add dataSource to exportGroupCaptionEventArgs?

The use-case os that my custom caption text includes data from associated fields in any of those rows. I can't just make a column that has all of that text and group by it, because the text itself may have duplicates in another groups that I don't want to combine. For example, when grouping by user, the userId column is what is grouped specifically, but want to display userName in the group  caption. userName can't be grouped, in case there are two users with the same name. Perhaps if the column definition could contain a groupKey function, then it would alleviate that issue.



RS Rajapandiyan Settu Syncfusion Team November 11, 2021 07:01 AM UTC

Hi Bill,
Thanks for your update.
Based on your requirement, you want to get the grouped item details while exporting the group caption cell in the Grid.
Currently, we are checking the feasibility to achieve this at our end. So, we will update the further details on Nov 11th 2021.
We appreciate your patience until then.
Regards,
Rajapandiyan S



RS Rajapandiyan Settu Syncfusion Team November 11, 2021 12:21 PM UTC

Hi Bill, 
  
Thanks for your patience. 
 
Based on your requirement, you want to get the grouped item details while exporting the group caption cell in the Grid. We have confirmed this is an issue from our side and logged a bug for the same as “Pass the groupcaption details in the exportGroupCaption event args”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on Nov 24th 2021.  
  
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   
  

  
Regards,  
Rajapandiyan S  


RS Rajapandiyan Settu Syncfusion Team November 24, 2021 01:56 PM UTC

Hi Bill, 
  
Thanks for your patience. 
  
We are glad to announce that our Essential Javascript2 patch release (v19.3.55) has been rolled out successfully and in that release we have added the fix of “Pass the groupcaption details in the exportGroupCaption event args” issue. So, please update your Syncfusion packages to the current version and use latest style script to get this. 
  
By using below code, you can get the grouped items detail in the exportGroupCation event. 
  
  
  methods: {  
    exportGroupCaption: function (args) {  
      var groupedItemDetail = args.data; // get the grouped item detail 
      args.captionText = args.captionText.split('-')[0].trim(); 
} 
} 
  
  
Screenshot: 
 
  
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
  
Regards, 
Rajapandiyan S 


BN Bill Naples November 24, 2021 08:09 PM UTC

Thanks Rajapandiyan. That's very helpful.


RS Rajapandiyan Settu Syncfusion Team November 25, 2021 03:18 AM UTC

Hi Bill, 

You’re welcome. Please get back to us if you need further assistance. 
  
Regards,  
Rajapandiyan S  


Loader.
Up arrow icon