PLEASE NOTE: Since we update Flexmonster Pivot with new features biweekly, the information might become outdated. Please check our latest news.

CustomizeCell: the new level of grid customization

CSS gives us a lot of possibilities to change the look and feel of the component (read more in the Сustomizing appearance tutorial). But sometimes it is not enough. For example, what if we have a report with countries and want to make countries clickable (hyperlinks) and show additional details for each of them?

UPDATE: This blog post relates to the general idea of customizeCell function and its API in 2.3 version. API was changed in 2.4 version. Additionally, you are welcome to read the new blog post "Grid customization and styling beyond CSS: 7 cases how customizeCell can be used in 2.4 version".

customize-cell

View live sample - Customize cells (add hyperlinks) in 2.3 version

Here comes the customizeCell hook that enables editing HTML for every cell before it becomes rendered.

Let’s take a look at the following sample:

$("#pivot").flexmonster({
    report: {...},
    customizeCell: function(html, data) {
        if (data.hierarchy && data.hierarchy.uniqueName == "Country" && data.member) {
            var url = "https://en.wikipedia.org/wiki/" + data.member.caption;
            return "<a href='" + url + "'>" + html + "</a>";
        }
    }
});

As you can see, we are wrapping a country name with <a> link that points to the appropriate Wikipedia article. Inside the data (Cell Object) the following properties are available:

  • columnIndex - Number. Index of the cell column.
  • rowIndex - Number. Index of the cell row.
  • label - String. Cell label.
  • value - Number. Cell value.
  • type - String. Type of the cell. Can be "header" or "value".
  • isTotal - Boolean. Identifies whether the cell contains total value.
  • hierarchy - Object. Hierarchy connected with the cell.
  • measure - Object. Measure connected with the cell.
  • member - Object. Member connected with the cell.
  • rows - Object[]. Cell row tuple.
  • columns - Object[]. Cell column tuple.
  • height - Number. Cell height in px.
  • width - Number. Cell width in px.
  • x - Number. Absolute X position of the cell on the page.
  • y - Number. Absolute Y position of the cell on the page.

Full sample on JSFiddle: Customize cells (add hyperlinks) in 2.3 version.
API documentation: customizeCell.

Adding hyperlinks is only a small example of what can be done. You can use Cell Object properties to implement a variety of use cases.

Subscribe to our news: