Configuration Options – Interactive HTML in cells

In the previous section we look at a very common requirement, one that of formatting column values. We saw that there are numerous ways to customize the content of the cells. We explored a rich API that allows you to pretty much customize every single grid cell.

In this section, let’s take that concept further, and embed interactive content within cells. By interactive content, we mean things like tooltips, programmatic interactive html, etc. We will continue to use the example from the previous section, just enhance the label function like so:

     myCompanyNameSpace.labelFunctionExample = function (item, column) {

         var html = "<a href='#' onclick='showTooltip(this)'> Click :"+column.getHeaderText()+" for tooltip : </a> Item: " + item.type ;

         return html;

     };

     function showTooltip(trigger) {

         alert(" Show Tooltip for " + trigger.parentNode.parentNode.component.rowInfo.getData().type)

     }

We will also make one small change to the configuration XML:

                                   '                                        <column dataField="" headerText="Label Function Example" enableCellClickRowSelect="false" filterControl="TextInput" filterOperation="Contains" labelFunction="myCompanyNameSpace.labelFunctionExample"/>' +

And here is what we see:

So let’s look at what we did here.

First, we set enableCellClickRowSelect="false"

This prevents the click on the anchor from selecting the row.

Second, in the HTML we generate, we added an onClick handler:

var html = "<a href='#' onclick='showTooltip(this)'> Click :"+column.getHeaderText()+" for tooltip : </a> Item: " + item.type ;

         return html;

Finally, we provided the callback for the handler:

     function showTooltip(trigger) {

         alert(" Show Tooltip for " + trigger.parentNode.parentNode.component.rowInfo.getData().type)

     }

There are a few things to keep in mind in this method.

1. First, we pass in the anchor that the user clicked on. This lets us get a handle on what the user clicked on.
2. Second, we navigate up the HTML hierarchy until we reach the DIV component that map to the FlexDataGridDataCell object. This div has a component property that is the call back that JavaScript has to reach into the FlexDataGrid API. This gives you the hook into the FlexDataGridCell, which has a reference to its rowInfo object. This is an object of class flexiciousNmsp.RowInfo, that has among other things, a getData() method, that will get the row data that you are displaying in the row.
3. Once you have a handle to the row data, you can do whatever you wish with it, in this case, we simply show it as an alert.