Demos
Documentation
API
More Samples
Download Wijmo

Customize cell rendering

This sample shows how to use the formatItem callback function to сustomize the appearance of cells.

Export settings can contain user-defined callback function formatItem, which is called for every exported cell just before rendering on the document canvas:

wijmo.grid.pdf.FlexGridPdfConverter.export($scope.ctx.grid, 'FlexGrid.pdf', {
    formatItem: function (args) {
        // ...
    }
});

Using this function the user can alter the appearance (such as background color, fore color, font) and content of the cell.

Function takes an argument of PdfFormatItemEventArgs type, which is derived from wijmo.grid.CellRangeEventArgs class and has following members (look into documentation for the full list):

  • panel: Gets the GridPanel related to the cell being rendered.
  • row: Gets the row index of the cell within the panel.rows collection.
  • col: Gets the column index of the cell within the panel.columns collection.
  • data: Gets or sets the data of the cell.
  • style: Gets or sets the style of the cell.
  • cell: If IFlexGridDrawSettings.customCellContent is set to true then contains reference to the DOM element that represents the grid cell being rendered; otherwise, a null value.
  • getFormattedCell: Function that returns a reference to the DOM element that represents the grid cell being rendered.

The getFormattedCell function is useful if IFlexGridDrawSettings.customCellContent is set to false (so the cell property will be null), but the user needs to retrive the DOM element that represents the grid cell being rendered.

Initially, the args.data and args.style properties contain different values, depending on IFlexGridDrawSettings.customCellContent property value:

  • customCellContent = false (default): args.data stores the value retrieved with FlexGrid.getCellData method. args.style contains combination of IFlexGridDrawSettings.styles export setting, according to the row type of exported cell.
  • customCellContent = true: args.data contains the textContent value, retrieved from the DOM element that represents the grid cell being rendered. args.style is obtained from the same element with window.getComputedStyle.

User can change args.data and args.style, these changes will be reflected upon cell rendering.

In this sample the current row number is added to the row header cell via changing the args.data property. The background of a cell of the "Color" column is changed according to its value via changing the args.style.backgroundColor.