Demos
Documentation
API
More Samples
Download Wijmo

Drawing cells manually

This sample shows how to draw cells manually using the formatItem callback function.

Besides the simple cell customization, such as changing backround color, font, cell value etc the formatItem function allows user to draw cell manually.

The following steps are required:

  • Define the formatItem function within the export settings.
  • Perform custom drawing on the document canvas using PdfDocument API in that function.
  • Set the args.cancel property to true to disable default content drawing or set the args.cancelBorders property to true to disable default borders drawing.

To perform custom drawing the formatItem function argument provides the following properties:

  • canvas: Gets the PdfPageArea class instance that represents a canvas to perform the custom painting on.
  • clientRect: Gets the client rectangle of the cell being rendered in canvas coordinates.
  • contentRect: Gets the content rectangle of the cell being rendered in canvas coordinates.
  • cancel: If true disables default drawing behavior. Default is false.
  • cancelBorders: If true disables default borders drawing behavior. Default is false.

In this sample the content of cells of "Country" column is drawn manually using PdfDocument API. The drawImage method is used to draw flag image at the specified position. The measureText method is used to get the size of the text to center it vertically. The drawText method is used to draw text at the specified position. The args.cancel property is setted to true to cancel default cell content drawing.