bugs printing grid

Question

There are two bugs printing a a grouped grid with a group caption template:

1) Doesn't display column headers properly

2) Doesn't render group caption template.

The bugs can be reproduced on this sandbox:

https://codesandbox.io/s/syncfusion-v19-grid-print-broken-rg00v?file=/src/components/Grid.vue

Here is a separate sandbox that fixes the two bugs:

https://codesandbox.io/s/syncfusion-v19-grid-print-fixes-z16br?file=/src/components/Grid.vue

The two bug fixes are:

1) The printed grid object needs to be copy the "isVue" property from the html grid object.

const appendTo = Grid.prototype.appendTo;
Grid.prototype.appendTo = function () {
  appendTo.apply(this, arguments);
  // There's a bug in SyncFusion grid printing where they don't copy isVue value on the
  // the html grid object to the print grid object, and it causes the GroupCaptionCellRenderer
  // to not invoke the custom groupSettings caption template properly.
  // See caption-cell-renderer.js:GroupCaptionCellRenderer.prototype.render for where isVue is needed.
  // The number 7 below is the CellType enum for GroupCaption.
  // It would seem more intuitive to override Grid.prototype.initializeServices, and invoke this code
  // afterwards. However, it causes various grid modules to break. Maybe that function is overridden
  // somewhere during runtime?
  this.serviceLocator
    .getService("cellRendererFactory")
    .getCellRenderer(7).parent.isVue = true;
};

2) When printing the grouping gutter columns need to be hidden.

    beforePrint(args) {
      // console.log('beforePrint', args)

      const gridEl = args.element;

      // Fix SyncFusion print bug where header row not rendering properly.
      // Had to figure this out in Chrome Inspector by going to file @syncfusion/ej2-base/src/util.js?9798,
      // add breakpoint to line that does printWindow.close(), and then change the close function to an
      // empty no-op function.
      for (const col of gridEl.querySelectorAll(
        ".e-gridheader .e-group-intent"
      )) {
        col.style.display = "none";
      }
    }

Pavithra Subramaniyam · Answer

Hi Bill, 
 
Thanks for contacting Syncfusion support. 
 
Currently we are validating the reported issue in our source and we will update further details on November 15th , 2021. Until then we appreciate your patience. 
 
Regards, 
Pavithra S

Pavithra Subramaniyam · Answer

Hi Bill, 

Thanks for your patience. 

We have validated your query and we have confirmed it as a bug and logged the defect report “Printing Grid is not working properly with GroupCaptionTemplate” for the same. 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 technological feasibility and Product Development Life Cycle) and including the defect fix in our weekly release which is expected to be rolled out by the December 1st  , 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.     

Feedback: https://www.syncfusion.com/feedback/30378/printing-grid-is-not-working-properly-with-groupcaptiontemplate 

Regards, 
Pavithra S

Bill Naples · Answer

Thank you Pavithra for addressing the issue with printing GroupCaptionTemplate. Will you also be addressing issue # 2 with regards to the column headers?

Note that since I opened this issue, I found a more effective solution than the beforePrint solution above. This more effective solution involves css as well as manipulating the colSpans in beforePrint, in order to indent the group captions to match the html. The css is as follows:

<style lang="scss">
.e-print-grid-layout {
  .e-group-intent {
    display: table-column !important;
  }

  .e-grouptopleftcell {
    display: table-cell !important;
  }

  .e-recordplusexpand, .e-indentcell {
    display: table-cell !important;
  }
}
</style>

Rajapandiyan Settu · Answer

Hi Bill, 
 
Thanks for your update. 
 
You can use the shared CSS if it achieves your requirement. If you facing any issue, kindly confirm us are you want to hide the indent cell while printing the Grid? Also share the video demo of your issue. 
 
Regards, 
Rajapandiyan S

Bill Naples · Answer

Thank you Rajapandiyan. I've had to override a lot things in order to make print, pdf, and excel use nested indenting for groups to match the html display. Also, I've had to change colspans of group footers and do special custom formatting of the footers when exporting, as well as work around showGroupedColumn always being true/false instead of allowing a setting to do nothing. I'll probably need to open up several discrete issues on each of these, else it'll become too confusing.

Pavithra Subramaniyam · Answer

Hi Bill, 

By default, the indent cell will not be shown in Print Grid. But the col group has issue in Print grid header element. We have consider this scenario also in the defect report shared previously and it is expected to be rolled out by the December 1st , 2021.   

Until then we appreciate your patience.            

Regards, 
Pavithra S

Pavithra Subramaniyam · Answer

Hi Bill, 

Thanks for your patience. 

We are glad to announce that our Essential Javascript2 patch release (v19.3.56) has been rolled out successfully and in that release, we have added the fix for the issue –“ Printing Grid is not working properly with GroupCaptionTemplate”. So please update your packages to this version to include the fix. 

Release Notes: https://ej2.syncfusion.com/vue/documentation/release-notes/19.3.56/?type=all#grid 

  We thank you for your support and appreciate your patience in waiting for this release. Please contact us if you would require any further assistance. 

Regards, 
Pavithra S