How to customize group captions when printing and export to excel/csv/pdf?

[Bill Naples]

Here is a sample for using captionTemplate in groupSettings in order to customize the display of the group caption for the grid:

https://codesandbox.io/s/vue-template-eknh7?file=/src/App.vue:991-1006

But when printing or exporting to Excel/CSV/PDF, the caption is blank. How do we customize the group caption when printing or exporting?

Thanks.

[Rajapandi Ravi]

Hi Bill, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you are maintaining a group caption in Grid and facing a problem with exporting. So we have check checked your shared sample at our end and try to reproduce the issue. But it was working fine from our end. Group caption was not blank in exported document. For your reference we have attached a screenshot. 

Screenshot: 

ExcelExport                                                                                  PdfExport                                                                                                  Print 

                                                                                                                             

                 

If you still face the issue, please reproduce the issue with your previously shared sample and share the video demonstration of the issue. 

Regards,
Rajapandi R 

[Bill Naples]

Here is an example based on the original. I added a "Custom:" string to the beginning of each caption. It shows up when printing, but not when exporting to excel or pdf. It just uses the default caption format of "{HeaderTitle}: {GroupValue} - {Count} item(s)". It does not have the custom format from the function.

https://codesandbox.io/s/sync-fusion-export-sample-4y0ig

Thanks.

[Rajapandi Ravi]

Hi Bill, 

Thanks for the update 

From your query we can understand that you want to customize the excel export groupCaption. You can use exportGroupCaption event for your requirement. Please refer the below code example and sample for more information.  

 

<template> 

  <div id="app"> 

    <ejs-grid 

      id="Grid" 

      ref="grid" 

      :dataSource="data" 

      :allowPaging="true" 

      :allowGrouping="true" 

      :groupSettings="groupSettings" 

      :allowExcelExport="true" 

      :allowPdfExport="true" 

      :exportGroupCaption="exportGroupCaption" 

    > 

      <e-columns> 

     .  .  .  .  .  .  . 

     .  .  .  .  .  .  . 

      </e-columns> 

    </ejs-grid> 

    <div @click="exportExcel" class="export-buttonone">Export to Excel</div> 

    <div @click="exportPdf" class="export-buttontwo">Export to PDF</div> 

    <div @click="print" class="export-buttonthree">Print</div> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Aggregate, 

  Group, 

  Page, 

  PdfExport, 

  ExcelExport, 

} from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource"; 

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: data.slice(0, 7), 

      groupSettings: { 

        captionTemplate: "<div>${format(data)}</div> ", 

        columns: ["CustomerID"], 

      }, 

    }; 

  }, 

  provide: { 

    grid: [Page, Aggregate, Group, PdfExport, ExcelExport], 

  }, 

  methods: { 

    exportGroupCaption: function (args) { 

// here you can customize the groupcaption text as per your requirement 

      args.captionText = "Customized template: " + args.captionText; 

    }} 

</script> 

Sample: https://codesandbox.io/s/sync-fusion-export-sample-forked-l84nl?file=/src/App.vue 

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

Regards, 

Rajapandi R