[1.2]Need sample code for placing QuickTip in grid cell using GridCellRenderer

[sbarkdull]

I need sample code for placing a QuickTip in grid cell using GridCellRenderer.

Based on the QuickTip java docs, it sounds like the following should work, but it doesn't.

public class TimeRenderer implements GridCellRenderer<BeanModel> {

public TimeRenderer() {
};

public String render(BeanModel model, String property,
ColumnData config, int rowIndex, int colIndex,
ListStore<BeanModel> store) {

String strTime = model.get( "time" );
String html = "<span ext:qtip='my tool tip text'>" + strTime + "</span>";
return html;
}
}

[sbarkdull]

After struggling with the QuickTip and ToolTip, I finally came up with this solution that works very well for displaying a tooltip with different text in each cell of the Grid. The solution creates one tool tip for the entire Grid, which is reused for each cell.

For the column in the grid whose cells should display a tooltip, I have this custom renderer:

public class MyRenderer implements GridCellRenderer<BeanModel> {

public MyRenderer() {
};

public String render(BeanModel model, String property,
ColumnData config, int rowIndex, int colIndex,
ListStore<BeanModel> store) {

String tooltip = "The text of my tooltip";
String myColumnData = model.get( "myColumnData" );

String html = "<span onmouseover=\"javascript::showTooltip" + "( '" + tooltip + "' );\">"
+ myColumnData + "</span>";

return html;
}
}

My view class contains 2 member variables, one for the Grid, one for the QuickTip, like this:
private Grid<BeanModel> grid;
private QuickTip tooltip;

In my view class where I create the Grid instance, I also create a member variable that is the tool tip, like this:
grid = new Grid<BeanModel>( store, columnModel );
tooltip = new QuickTip( grid );

My view class also has a method to show the tool tip, like this:
public void showToolTip( String text ) {
tooltip.hide();
ToolTipConfig c = new ToolTipConfig( text );
tooltip.update( c );
tooltip.show();
}

Notice the javascript function called "showTooltip()" referenced in the html generated by the renderer's render() method. My view class contains a native java method to register the showTooltip() function with JSNI, like this:

public native void exportShowTooltip( MyView view ) /*-{
$wnd.showTooltip = function( text ) {
view.@com.company.MyView::showTooltip(Ljava/lang/String;)( text );
}
}-*/;

My view class calls exportShowTooltip() in it's initialization code to register the javascript function with JSNI.

That's it. When the mouse cursor is over the <span> element inside a Grid cell, the span element's onmouseover event fires, calling showTooltip(), causing the tooltip to be rendered in the browser.

[fredrikhultin]

Thanks for offering a solution to the problem. However this does more look like a work around then a good solution in the framework. Are there any plans on fixing this in the framework or is this the official solution?

Regards
Fredrik

[sven]

String html = "<span qtip='my tool tip text'>" + strTime + "</span>";

and


new QuickTip(grid);

[sbarkdull]

Hi Sven,

Thank you for your response, your solution works very well, and eliminates most of the code I had to write with my "work around" solution.

My new code looks like this (compare it to the old code):
public class MyRenderer implements GridCellRenderer<BeanModel> {

public MyRenderer() {
};

public String render(BeanModel model, String property,
ColumnData config, int rowIndex, int colIndex,
ListStore<BeanModel> store) {

String myColumnData = model.get( "myColumnData" );
String tooltip = "The text of my tooltip " + myColumnData;

String html = "<span qtip='" + tooltip + "'>"
+ myColumnData + "</span>";

return html;
}
}

My view class contains 1 member variable for the Grid:
private Grid<BeanModel> grid;

In my view class where I create the Grid instance, I also create the tool tip, like this:
grid = new Grid<BeanModel>( store, columnModel );
new QuickTip( grid );

Notice that I do not need to maintain a reference to the QuickTip. And I didn't have to write any JSNI code, and I didn't have to provide an onmouseover callback.

The result is that each cell in the grid has its own tooltip text.

[sbarkdull]

I responded with my previous post too quickly. Sven's suggestion has a problem when used in a grid. More specifically, if the html for EVERY cell in the grid has a qtip attribute, then Sven's solution works fine. The problem occurs when some cell's do not have a qtip attribute.

When hovering over a cell in the grid that does not have a qtip attribute, a tooltip will be displayed containing the text of whatever the most recently displayed tooltip was.

For instance, supposed I initially hovered over cell 3,2, and its html has a qtip attribute that says "cell 3,2". Next I move the mouse cursor to cell 4,2, and cell 4,2 's html does not have a qtip attribute. GXT will still display a tooltip, containing the text "cell 3,2", which is the text of the last cell that did have a qtip attribute.

For now I am reverting to my first solution. Is this a bug in GXT? It seems GXT's grid should not display a tooltip for cells that do not have a qtip attribute.

[sven]

Seems to be a bug. I will look into it.

[sven]

Fixed in SVN.

[kolli]

Thanks sbarkdull,
your post was really helpful

[bhomass]

I got this tooltip code to work. however, it appears that the tooltip is generated when the cell first renders. I have a tool tip which changes over time. how would you get this to work with a tooltip that is dynamically generated right before showing?

alternatively, how can I get the gridcellrenderer to run again?

[micgala]

For a renderer to run again, you need to do a refresh in the GridView...
You can do it in the whole grid, or by row (but for that you will need to override the GridView, making the refreshRow method public.

Hope this helps you.

Regards,
Michel.

[cuetumayu]

Hello,

I am currently implementing an EditorGrid whose values I validate in the server-side via a RPC call. Once I receive the errors back from the server I need to display them to the user on the level of the properties, I mean, if there is an error in a property of a record, I have to highlight this situation using a red frame around that particular cell/property.

This implies that I have to dinamicaly change the content of the tool tip, and the styles of the cell. Plus, at the beginning my cells shouldn't have any Tooltip at all.

What I am currently doing is modifying the inner HTML for the cell to set the error message as the value of a qtip attribute (I am using QuickTip as suggested before in this forum), but this results in empty tooltips:

Here you are my code:

protected static String INNER_STYLE = "\" style='background-color=#FFCCCC; border-style:solid; border-width:1px; border-color:red;'/>";

/**
* The grid to display the data
*/
protected EditorGrid<T> m_grid;

/**
* The quick tip that sets how the tool tips will be displayed
*/
protected QuickTip m_quickTip;

...

public String composeInnerCellDivStyle(Element cell, String errorMessage){
//IMPORTANT: It is necessary to have previously set QuickTip for the grid!
if(m_quickTip == null){
GWT.log("No QuickTip set for the grid. Validation error tooltip are not going to work!", null);
}
//compose the inner HTML code for the cell
//add the 'error' style to the <div>
String innerHTML = cell.getInnerHTML().replaceFirst("\">", INNER_STYLE);
//wrap the inner div with a <span> tag containing the tool tip
String html = "<span onmouseover=\"javascript::showToolTip" + "( '" + errorMessage + "' );\">" +
(innerHTML != null ? innerHTML : "") + "</span>";
return html;
}

Has anybody done something similar? I am looking forward to reading your answers!

Thanks in advance!

Carlos

[cuetumayu]

Sorry, but in fact my code when setting the Tooltip is this one:

String html = "<span qtip=" + errorMessage + "'\">" +
(innerHTML != null ? innerHTML : "") + "</span>";

Cheers,

Carlos

[micgala]

Sorry, but in fact my code when setting the Tooltip is this one:

String html = "<span qtip=" + errorMessage + "'\">" +
(innerHTML != null ? innerHTML : "") + "</span>";


This is wrong.

Try this:



String html = "<span qtip='" + errorMessage + "'\">" +
(innerHTML != null ? innerHTML : "") + "</span>";


Please notice that the ' was missing after qtip=

You can try again...
Also, why aren't you using the a CellRenderer? This would simplify your stuff...

Regards,
Michel.

[micgala]

Hi.
He was able to fix it.

More info here:
http://www.extjs.com/forum/showthread.php?p=390814

[jorel2]

Is this still the way to set tooltips for grid cells?


column.setRenderer(new GridCellRenderer<RelDescModel>(){
@Override
public Object render( RelDescModel model, String property, ColumnData config,
int rowIndex, int colIndex,
ListStore<RelDescModel> store,
Grid<RelDescModel> grid) {
String desc = model.getDesc();
String html = "<span qtip='" + desc + "'>" + desc + "</span>";
return html;
}
});



??

If so, I am wondering why we need to be exposed to GXT implementation details. Couldn't there just be an override-able method like render called 'setToolTip' in the GridCellRenderer?

Seems awkward to need to know about an underlying implementation detail like the qtip attribute.
If this 'concern' is misplaced, please, someone inform me and I'll go away. thanks.

[sven]

Seems awkward to need to know about an underlying implementation detail like the qtip attribute.
If this 'concern' is misplaced, please, someone inform me and I'll go away. thanks.
Its nothing underlaying. This is how QuickTip is working and this is even documented in the javadocs of quicktip