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.

Note that customizeCell can be defined in two ways:

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

Parameters

customizeCellFunction function or null in case you do not need to change anything. Data passed to the customizeCellFunction:

• cell (starting from v2.4) – Cell builder. The object that contains the current representation of the cell on the grid and through which the cell representation can be customized. It has the following properties and methods:
  • 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.
  • classes – Array of strings. The array of classes assigned to the cell. The addClass() method should be used to add the new class.
  • style – Object. CSS object of the element that will be put in the style attribute of the element for inline styling.
  • tag – String. The tag of the element (each cell has tag: "div").
  • text – String. The text of the element which may also contain HTML, e.g., icons for expand, collapse, drill up and down, sorting, etc.
  • addClass(value: String) – Method. Use this method to add new classes to the element.
  • 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 which 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. Check out a live sample on JSFiddle.

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 view, 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. Try on JSFiddle.

3) Highlighting levels through the entire grid:

function customizeCellFunction(cell, data) {
  if (data.level != undefined) {
    cell.addClass("fm-level-" + data.level);
  }
}

customizeCellFunction is used here to add different CSS classes for different levels. This live sample on JSFiddle highlights the first three levels in rows.

4) Highlighting cells based on their semantics – member, hierarchy, measure:

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

5) Styling rows 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. Check out on JSFiddle.

6) 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.

7) 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.

See also

Customizing the grid
customizeChartElement()
customizeContextMenu()