Get Free Trial
Get Free Trial
  1. API reference
    1. Introduction
    2. Flexmonster()
  2. Objects
    1. All objects
    2. Report Object
    3. Data Source Object
    4. Mapping Object
    5. Slice Object
    6. Options Object
    7. Filtering
      1. Filter Object
      2. Number Query Object
      3. String Query Object
      4. Date Query Object
      5. Time Query Object
      6. Value Query Object
    8. Format Object
    9. Conditional Format Object
    10. Cell Data Object
    11. Chart Data Object
    12. Toolbar Object
  3. Methods
    1. All methods
    2. addCalculatedMeasure
    3. addCondition
    4. alert
    5. clear
    6. clearFilter
    7. clearXMLACache
    8. closeFieldsList
    9. collapseAllData
    10. collapseData
    11. connectTo
    12. customizeCell
    13. customizeContextMenu
    14. dispose
    15. expandAllData
    16. expandData
    17. exportTo
    18. getAllConditions
    19. getAllHierarchies
    20. getAllMeasures
    21. getCell
    22. getColumns
    23. getCondition
    24. getFilter
    25. getFormat
    26. getMeasures
    27. getMembers
    28. getOptions
    29. getReport
    30. getReportFilters
    31. getRows
    32. getSelectedCell
    33. getSort
    34. getXMLACatalogs
    35. getXMLACubes
    36. getXMLADataSources
    37. getXMLAProviderName
    38. load
    39. off
    40. on
    41. open
    42. openCalculatedValueEditor
    43. openFieldsList
    44. openFilter
    45. print
    46. refresh
    47. removeAllCalculatedMeasures
    48. removeAllConditions
    49. removeCalculatedMeasure
    50. removeCondition
    51. removeSelection
    52. runQuery
    53. save
    54. setFilter
    55. setFormat
    56. setOptions
    57. setReport
    58. setSort
    59. showCharts
    60. showGrid
    61. showGridAndCharts
    62. sortingMethod
    63. sortValues
    64. updateData
  4. Events
    1. All events
    2. afterchartdraw
    3. aftergriddraw
    4. beforegriddraw
    5. beforetoolbarcreated
    6. cellclick
    7. celldoubleclick
    8. chartclick
    9. datachanged
    10. dataerror
    11. datafilecancelled
    12. dataloaded
    13. exportcomplete
    14. exportstart
    15. fieldslistclose
    16. fieldslistopen
    17. filterclose
    18. filteropen
    19. loadingdata
    20. loadinglocalization
    21. loadingolapstructure
    22. loadingreportfile
    23. localizationerror
    24. localizationloaded
    25. olapstructureerror
    26. olapstructureloaded
    27. openingreportfile
    28. printcomplete
    29. printstart
    30. querycomplete
    31. queryerror
    32. ready
    33. reportchange
    34. reportcomplete
    35. reportfilecancelled
    36. reportfileerror
    37. runningquery
    38. update
Table of contents

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.

Please note, you can define customizeCell 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. 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.
  • dataCell Data Object 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("alter1");
    } else {
      cell.addClass("alter2");
    }
  }
}

"alter1" and "alter2" CSS classes are 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");
  if (data.isGrandTotalRow) cell.addClass("fm-grand-total-r");
  if (data.isGrandTotalColumn) cell.addClass("fm-grand-total-c");
}

This example has 3 different CSS classes and they are added to a subtotal row in classic view, to grand total row, and to a grand total column. 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:

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.