How to show all cell data on hover without increasing the grid column width

Displaying all cell data when hovering over it may prove to be useful for some of you, especially if you need to keep the same width for the grid column.

Fortunately, there is a simple solution for solving this, as all you need is to add a HTML expression, such as:

<span data-qtip="#COLUMN_ALIAS#">#COLUMN_ALIAS#</span>

 

Here’s an example of how we’ve used it:

foex-grid-cell-tooltip-html-expression

Apex 4.2.x

 

Page_Designer

Apex 5.0.x

An the result looks like this:

foex-grid-cell-tooltips

Grid cell tooltips

 

You may want to have more control over how the information is displayed, for example splitting a comma separated list of names into multiple rows. To do this you’ll need to override the column renderer using:

"renderer": /**/function(value){ 
    return '<span data-qtip="<b>Names:</b><br />'+value.split(',').join('<br />')+'">'+value+'</span>';
}/**/

Note: the required PLJSON syntax around the code we don’t want escaped i.e. /**/…/**/

FOEX Grid cell tooltip

APEX 4.2.x

Page_Designer

APEX 5.0.x

Which will display all the names in a cell, like this:

FOEX Treegrid tooltip

Tree Grid Cell Tooltips

 

If you’re using the treegrid from FOEX v1.x,  you’ll need to add it to the column comments section/attribute encapsulated in ext${ ... }$ext:

ext${
"renderer": /**/function(value){ 
    return '<span data-qtip="<b>Names:</b><br />'+value.split(',').join('<br />')+'">'+value+'</span>';
}/**/ 
}$ext

 

As a side note, the simplest way to add tooltips anywhere in your application within HTML markup is to use the data-qtip="My Tip" attribute in your HTML tag.

<span data-qtip="<b>Title</b><br />This is a tooltip example">Some Text</span>
<div data-qtip="<b>Title</b><br />This is a tooltip example">Some Text</div>
<input type="text" data-qtip="<b>Title</b><br />This is a tooltip example"></input>

 

For more information on the examples provided above please refer to the Sencha documentation as follows:

For FOEX v1.x, use:

For FOEX v2.x, use:

 

Looking to build large-scale web applications fast? Sign up and start developing with FOEX!

Categories FOEX FOEX How To Grid
Add your comment

Your email address will not be published. Required fields are marked *