customizeCell

customizeCell(customizeCellFunction: Function)

[starting from version: 2.306]

This API call allows the customizing of separate cells. For example, you can add links, custom styles or formatting. Learn more in this guide: Customizing the grid. To see all available examples of customizeCell usage, visit the Examples page.

customizeCell can be defined in two ways:

1. As a regular API call: pivot.customizeCell(customizeCellFunction).
2. As an initialization parameter: new Flexmonster({customizeCell: customizeCellFunction, ...}).

Parameters

The customizeCellFunction function. If set to null, no customization is applied.
Data passed to the customizeCellFunction:

Parameter/Type	Description
cell Object	The cell builder object that contains the current representation of the cell on the grid and through which the cell representation can be customized.
cell.attr Object	All attributes and their values for the HTML element. Custom attributes can be added to the cell and, for example, used in CSS selectors to identify the cell. Read more info about CSS attribute selectors.
cell.classes String[]	The array of classes assigned to the cell. The addClass() method should be used to add the new class.
cell.style Object	optional CSS object of the element that will be put in the style attribute of the element for inline styling.
cell.tag String	The tag of the element (each cell has tag: "div").
cell.text String	The text of the element, which may also contain HTML, e.g., icons for expand, collapse, drill up and down, sorting, etc.
cell.addClass(value: String) Method	Use this method to add new classes to the element.
cell.toHtml() Method	Returns HTML string that represents the cell. It gathers all the properties of the cell builder object into HTML. This is how the cell will be added to the grid.
data CellDataObject	Contains information about the cell.

Examples

1) Alternating row colors:

function customizeCellFunction(cell, data) {
  if (data.type == "value") {
    if (data.rowIndex % 2 == 0) {
      cell.addClass("alter");
    } else {
      return;
    }
  }
}

The alter CSS class is specified additionally.

Live example

2) Styling subtotals and grand totals:

function customizeCellFunction(cell, data) {
  if (data.isClassicTotalRow)
    cell.addClass("fm-total-classic-r");
}

To style subtotals in the classic (tabular) form, customizeCell adds the fm-total-classic-r CSS class to subtotal cells. Grand totals already have the needed classes, so they are not defined in customizeCell Live example.

3) Highlighting cells based on their semantics - member, hierarchy, measure:

• Highlighting a certain member on the grid
• Highlighting a certain measure on the grid
• Highlighting cells based on its semantic

4) Customizing cells based on conditional formatting.

Demonstrates highlighting of the entire row in the pivot table if the condition of the conditional formatting is true for at least one cell in this row. Also, this sample shows how to use beforegriddraw and aftergriddraw events Live example.

5) Representing numbers by icons

In this sample cell values are replaced with the images depending on to which interval the value belongs: high, middle, etc.

6) Adding hyperlinks

This example illustrates how to add links to some cells. Click the Clear Customizing button to remove customization and click Start Customizing to add it back.

To see more examples of customizeCell usage, visit the Examples page.

See also

Customizing the grid
customizeChartElement()
customizeContextMenu()