We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • API Reference for older versions
  • 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/TypeDescription
    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:

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