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
  2. Welcome
    1. Component overview
    2. Quick start
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
    6. Migrating from WebDataRocks to Flexmonster
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Connecting to JSON using Flexmonster Data Server
      3. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Data types in CSV
    3. Database
      1. Connecting to SQL databases
      2. Connecting to a MySQL database
      3. Connecting to a Microsoft SQL Server database
      4. Connecting to a PostgreSQL database
      5. Connecting to an Oracle database
      6. Connecting to other databases
    4. MongoDB
      1. Introduction to Flexmonster MongoDB Connector
      2. Getting started with the MongoDB Connector
      3. Embedding the MongoDB Connector into the server
    5. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with the Accelerator
      3. Installing the Accelerator as a Windows service
      4. Referring the Accelerator as a DLL
      5. Configuring the authentication process
      6. Configuring a secure HTTPS connection
      7. Troubleshooting
    6. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with the Accelerator
      3. Configuring Mondrian roles
      4. Configuring username/password protection
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    7. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
    8. Custom data source API
      1. Introduction to the custom data source API
      2. A quick overview of a sample Node.js server
      3. A quick overview of a sample .NET Core server
      4. Implementing the custom data source API server
      5. Implementing filters
      6. Supporting more aggregation functions
      7. Returning data for the drill-through view
    9. Flexmonster Data Server
      1. Getting started with Flexmonster Data Server
      2. Installation guide
      3. Configurations reference
      4. Data sources guide
      5. Security and authorization guide
      6. The Data Server as a DLL
        1. Getting started with the Data Server as a DLL
        2. Referring the Data Server as a DLL
        3. Implementing the API controller
        4. DLL configurations reference
  4. Security
    1. Security in Flexmonster
    2. Security aspects of connecting to an OLAP cube
      1. Ways of connecting to an OLAP cube
      2. The data transfer process
      3. Data security
      4. Data access management
  5. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Mapping
    6. Number formatting
    7. Conditional formatting
    8. Set the report for the component
    9. Get the report from the component
    10. Date and time formatting
    11. Configuring global options
    12. Export and print
    13. Calculated values
    14. Custom sorting
  6. Integration with frameworks
    1. Available tutorials
    2. Integration with AngularJS (v1.x)
    3. Integration with Angular
    4. Integration with React
    5. Integration with React Native
    6. Integration with Vue
    7. Integration with Python
      1. Integration with Django
      2. Integration with Jupyter Notebook
    8. Integration with R Shiny
    9. Integration with Webpack
    10. Integration with ASP.NET
    11. Integration with jQuery
    12. Integration with JSP
    13. Integration with TypeScript
    14. Integration with Ionic
    15. Integration with RequireJS
    16. Integration with PhoneGap
  7. Charts
    1. Flexmonster Pivot Charts
    2. Integration with Highcharts
    3. Integration with Google Charts
    4. Integration with FusionCharts
    5. Integration with any charting library
  8. Customizing
    1. Customizing the Toolbar
    2. Customizing appearance
    3. Customizing the context menu
    4. Customizing the grid
    5. Localizing the component
  9. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.7 to 2.8
    4. Migration guide from 2.6 to 2.7
    5. Migration guide from 2.5 to 2.6
    6. Migration guide from 2.4 to 2.5
    7. Migration guide from 2.3 to 2.4
    8. Migration guide from 2.2 to 2.3
    9. Documentation for older versions
Table of contents

Customizing the grid

Besides appearance customization of the component in general, Flexmonster also provides functionality for extended grid customization. The customizeCell API call allows styling up entire columns, rows, or specific cells according to a certain requirement. 

About the customizeCell API call

The customizeCell function is triggered for each table cell during rendering, and it has two parameters:

  • the cell builder, which contains the cell’s current HTML representation and through which the representation can be customized;
  • the Сell Data Object, which contains information about the cell, e.g., its position on the grid and the semantics of data this cell represents. 

Check out a full description of the customizeCell parameters.

This guide contains seven examples illustrating how customizeCell helps in achieving visualization goals:

Alternating row colors

This sample explains how to highlight every other row on the grid.

Here’s how the customizeCellFunction can be defined:

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

Here is the CSS code sample:

#fm-pivot-view #fm-grid-view div.alter1 {
background-color: #f7f7f7;
}

#fm-pivot-view #fm-grid-view div.alter2 {
 background-color: #fcfcfc;
}

In this sample, CSS classes are applied only to cells where data.type is "value", which means that the cell contains data.

Try a live sample on JSFiddle: Alternating row colors.

The same approach can be used for alternating column colors.

Styling subtotals and grand totals

Totals in rows and columns can be styled independently. The Cell Data Object has properties specifying if the cell is subtotal in the compact pivot table, subtotal in the classic form or grand total. Based on the values of these properties in each cell, a CSS class can be added to it. Here is an example:

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

The CSS code sample:

#fm-pivot-view #fm-grid-view .fm-grand-total-r {
background-color: #70C1B3;
}

Try it on JSFiddle: Styling subtotals and grand totals.

Highlighting levels through the entire grid

Highlighting entire levels in the pivot table, including data cells, is available through the Cell Data Object’s level property. In this example, classes with colors for three levels are added to cells depending on their level property.

Note that .fm-level-{n} classes are already assigned to the row header cells, and customizeCellFunction adds classes to cells with data to highlight the entire level.

The CSS code sample:

#fm-pivot-view #fm-grid-view div.fm-level-0 {
background-color: #6869aa;
}

#fm-pivot-view #fm-grid-view div.fm-level-1 {
background-color: #8e8ebf;
}

#fm-pivot-view #fm-grid-view div.fm-level-2 {
background-color: #aeaecf;
}

The customizeCellFunction can be defined as follows:

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

Live sample on JSFiddle: Highlighting levels through the entire grid.

Highlighting cells based on their semantics – member, hierarchy, measure

The Cell Data Object has measure, rows, and columns properties that contain info about the cell’s semantics. Take a closer look at several samples demonstrating the usage of these properties.

4.a. Highlighting data about a certain member

This example describes how to highlight cells containing info about Canada regardless of their position:

function customizeCellFunction(cell, data) {
if (data.rows) {
for (var i = 0; i < data.rows.length; i++) {
if (data.rows[i]["hierarchyCaption"] == "Country"
&& data.rows[i]["caption"] == "Canada") {
cell.attr["hierarchy"] = data.rows[i]["hierarchyCaption"];
cell.attr["member"] = data.rows[i]["caption"];
}
}
}
if (data.columns) {
for (var i = 0; i < data.columns.length; i++) {
if (data.columns[i]["hierarchyCaption"] == "Country"
&& data.columns[i]["caption"] == "Canada") {
cell.attr["hierarchy"] = data.columns[i]["hierarchyCaption"];
cell.attr["member"] = data.columns[i]["caption"];
}
}
}
}

Then, after the attributes were added, the following CSS selector can be written:

#fm-pivot-view #fm-grid-view div[hierarchy="Country"][member="Canada"] {
background-color: #CCCCCC;
}

Try a live sample on JSFiddle: Highlighting Country Canada in any place in rows or columns.

4.b. Highlighting the rows with a certain measure

This sample is similar to the previous sample, but information about the measure is added to cells as follows:

function customizeCellFunction(cell, data) {
if (data.measure) {
cell.attr["measure"] = data.measure.name;
}
}

Each HTML cell will have a measure attribute, and the following CSS selector will highlight the rows with Price:

#fm-pivot-view #fm-grid-view div[measure="Price"] {
background-color: #B2DBBF;
}

Live sample on JSFiddle: Highlighting rows with measure Price.

4.c. Adding all the semantic info to cell builder attributes

This JSFiddle example demonstrates another way of adding all the semantic info to cell builder attributes: Highlighting cells based on their semantic.

This sample takes into account the position of the hierarchies in rows and columns.

Styling rows based on conditional formatting

It is also possible to highlight the entire row in the pivot table if the condition of the conditional formatting is true for at least one cell in this row. 

The Cell Data Object has the conditions property containing a list of the conditional formatting ids that are true for this cell.

Check the JSFiddle example that applies formatting to the entire row if the condition is true for at least one cell in this row: Styling rows based on the conditional formatting.

Representing numbers by icons

This example demonstrates how to replace cell values with the images depending on which interval the value belongs to: high, middle, and so forth. Try it on JSFiddle: Cell renderer demo.

This case describes adding links to all the countries in the report. It can be done through the text property of the cell builder. Try a live sample on JSFiddle: Add hyperlinks.

The possibilities of customizeCell are not limited by the above seven cases. This API call covers many variants of visualization. To learn more about the customizeCell function and the Cell Data Object, see the API documentation:

What’s next?

You may be interested in the following articles: