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?

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.