Dear visitor, despite the COVID-19 outbreak, our team continues operating at full speed.

Also, here is the form where you can apply for a special discount and we will contact you with possible options. Stay safe and continue achieving your business goals.

Fill the form
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
    13. Chart Legend Data 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. customizeAPIRequest
    13. customizeCell
    14. customizeChartElement
    15. customizeContextMenu
    16. dispose
    17. expandAllData
    18. expandData
    19. exportTo
    20. getAllConditions
    21. getAllHierarchies
    22. getAllMeasures
    23. getCell
    24. getColumns
    25. getCondition
    26. getFilter
    27. getFlatSort
    28. getFormat
    29. getMeasures
    30. getMembers
    31. getOptions
    32. getReport
    33. getReportFilters
    34. getRows
    35. getSelectedCell
    36. getSort
    37. getXMLACatalogs
    38. getXMLACubes
    39. getXMLADataSources
    40. getXMLAProviderName
    41. load
    42. off
    43. on
    44. open
    45. openCalculatedValueEditor
    46. openFieldsList
    47. openFilter
    48. print
    49. refresh
    50. removeAllCalculatedMeasures
    51. removeAllConditions
    52. removeCalculatedMeasure
    53. removeCondition
    54. removeSelection
    55. runQuery
    56. save
    57. setFilter
    58. setFlatSort
    59. setFormat
    60. setOptions
    61. setReport
    62. setSort
    63. showCharts
    64. showGrid
    65. showGridAndCharts
    66. sortingMethod
    67. sortValues
    68. 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. drillthroughclose
    14. drillthroughopen
    15. exportcomplete
    16. exportstart
    17. fieldslistclose
    18. fieldslistopen
    19. filterclose
    20. filteropen
    21. loadingdata
    22. loadinglocalization
    23. loadingolapstructure
    24. loadingreportfile
    25. localizationerror
    26. localizationloaded
    27. olapstructureerror
    28. olapstructureloaded
    29. openingreportfile
    30. printcomplete
    31. printstart
    32. querycomplete
    33. queryerror
    34. ready
    35. reportchange
    36. reportcomplete
    37. reportfilecancelled
    38. reportfileerror
    39. runningquery
    40. update
  5. Custom data source API
    1. All requests
    2. /handshake request
    3. /fields request
    4. /members request
    5. /select request for the pivot table
    6. /select request for the flat table
    7. /select request for the drill-through view
    8. Field Object
    9. Filter Object
  6. MongoDB Connector API
    1. All methods
    2. getSchema
    3. getMembers
    4. getSelectResult
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.

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