More Samples
Download Wijmo

Custom cell content

This sample describes the custom cell content exporting mode.

FlexGridPdfConverter has two export modes to choose from, which is defined by the IFlexGridDrawSettings.customCellContent boolean property:

wijmo.grid.pdf.FlexGridPdfConverter.export($scope.ctx.grid, 'FlexGrid.pdf', {
    customCellContent: true

In first mode (customCellContent = false), which is the default one, the appearance of the cells of the exported grid is determined by the IFlexGridDrawSettings.styles property, and cell values are retrieved with FlexGrid.getCellData method.

In second mode (customCellContent = true), the appearance and content of the cells is retrieved directly from the HTML DOM. FlexGridPdfConverter obtains the element which is a DOM-representation of the exported cell; element.textContent property defines the cell content, and its style settings (background color, fore color, border color and font) are calculated with window.getComputedStyle(element).

Besides the fact that in custom cell content mode the exported grid will have the appearance close to original, this mode is also useful if FlexGrid contains Angular cell templates. This mode has lower performance due to DOM evaluation.

Important: to instantiate cell templates properly the whole export code should be run outside Angular digest (typically it should be done in window.setTimeout) in case of Angular 1.

In this sample the same grid gets exported with different value of customCellContent property. Following differences are noticeable between the two first grids:

  • Content of the cells of the "Country" column looks different because of custom cell formatter used in grid.
  • The grid exported using non-customCellContent mode has no styles, but the second exported grid does (the IFlexGridDrawSettings.styles property is left blank for clarity).

The third button shows the ability to export grid with flag images using the IFlexGridDrawSettings.formatItem callback and PdfDocument API. This technique will be explained in detail in the next topics.