Page 1 of 2 12 LastLast
Results 1 to 10 of 17

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

  1. #1

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

    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;
    }
    }

  2. #2

    Default Here is some sample code for QuickTip

    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 ) {
    [email protected]::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.

  3. #3
    Ext GWT Premium Member
    Join Date
    Mar 2007
    Location
    Sweden
    Posts
    45

    Default Solution

    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

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

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

    Code:
    new QuickTip(grid);

  5. #5

    Default

    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.

  6. #6

    Default Suggested Solution has problems

    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.

  7. #7
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

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

  8. #8
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Fixed in SVN.

  9. #9
    Ext User
    Join Date
    Oct 2008
    Location
    Atlanta ,GA
    Posts
    239

    Default

    Thanks sbarkdull,
    your post was really helpful

  10. #10
    Sencha User
    Join Date
    Oct 2007
    Posts
    585

    Default

    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?

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •