GWT Ext - How to set tooltip for a grid cell

In the previous article we show how to set the background color of a grid cell. Now it's time to learn how to set the individual tooltips for each grid cell, not for the entire grid.

So, the drill is quite similar, we play with the CellMetaData from the renderer, like in the below code:

ColumnConfig cc = new ColumnConfig();
...
final String title = "Current Date";
cc.setRenderer(new Renderer() {
   public String render(Object value,
       CellMetadata cellMetadata, Record record,
       int rowIndex, int colNum, Store store) {
          String text = (value != null ? value.toString() : null);
          if (text != null) {
              String html_attr = "ext:qtitle='" + Format.htmlEncode(title) + "'";

              html_attr += " ext:qtip='" + Format.htmlEncode(text) + "'";
              cellMetadata.setHtmlAttribute(htmlAttr);
          }
          return text;
   } 
}); 

So, assuming that the current column is a "date" called "Current Date" we want to display the tooltip with the name and value (Current Date / 2008 January 22  11:25:00 PM) and nothing when the cell value is null. The above code is doing exactly just this.

Note: a solution for the exact problem, but using the GXT (Ext GWT) library, we have solved in this article.

Cheers!

13 comments:

  1. Tiago Mesquita de Araujo CunhaJanuary 26, 2010 at 10:05 PM

    Hi, i tried with this way here, but don't work...

    I tried too setting a directly css like this: cellMetadata.setCssClass("testando");in cellMetadata but it don't work too... keep occurring an error that don't let the values appear in the grid.

    ReplyDelete
  2. Tiago Mesquita de Araujo CunhaJanuary 26, 2010 at 10:05 PM

    Hi, i tried with this way here, but don't work...

    I tried too setting a directly css like this: cellMetadata.setCssClass("testando");in cellMetadata but it don't work too... keep occurring an error that don't let the values appear in the grid.

    ReplyDelete
  3. It's working for me very well :-) Can you post your code, please? maybe we'll be able to fix it...

    Cheers

    ReplyDelete
  4. Hi,how to set the tooltip on the columns of a columnTree. The structure is as follows

    ColumnTree.Column cols[] = new ColumnTree.Column[9];
    cols[0] = columnTree.new Column("header", 290, "dataIndex");
    cols[1] = columnTree.new Column("",50,"dataIndex");
    cols[2] = columnTree.new Column("",100,"dataIndex");
    cols[3] = columnTree.new Column("",170 , "dataIndex");
    cols[4] = columnTree.new Column("",170,"dataIndex");
    cols[5] = columnTree.new Column("", 70, "dataIndex");
    cols[6] = columnTree.new Column("", 120, "dataIndex");
    cols[7] = columnTree.new Column("", 70, "dataIndex");
    cols[8] = columnTree.new Column("", 70, "dataIndex");

    Columns are valued with the TreeLoader

    ReplyDelete
  5. Do you like the tooltip only for the columns? is this ColumnTree editable?

    @[non-editable tree-grid]
    hack the ColumnNodeUI.js to add 'title="text"' to the cell div.

    @[editable tree-grid]
    beside the previous hack, you need to override the function 'ColumnTreeEditor.completeEdit(boolean b)' and to set the title attribute for the ELEMENT with your tooltip value ...

    Cheers!

    PS: I'll provide some a hotfix file later, when the time allows me to do it :-)

    ReplyDelete
  6. Hi Faber, here's the solution for your question:

    How to set the tooltip for TreeColumn

    Hope it's working for you -- 'cause in my test it worked.

    Cheers!

    ReplyDelete
  7. Thanks it works, only that the tooltip is only displayed when click on value. I do not want this behavior, I would like the column is not editable on click but you see the tooltip on mouseover

    ReplyDelete
  8. I fixed the .js file to put the title attribute to the parent div -- get it again from the same link.

    What browser do you use? because with FF 3.6 the tooltip works fine, on mouse over, not click.

    Anyhow, you can play with the attribute "qtip" instead of "title" (in both files: javascript and java) -- see if it's better :O)

    Cheers!

    ReplyDelete
  9. Hi, as truncate/mask the path browser in gwt-ext? I deploy with a ant file on tomacat

    ReplyDelete
  10. I do not understand the question? Can you explain more please?

    Cheers!

    ReplyDelete
  11. Ok, a web application in gwt-ext with server side and client side, I compile the application with google gwt through a Ant file which is addressed to file.gwt.xml with '<'entry-point class='xx.xxxxxx.xxx.xxx.file' '/>' . In web service is the index.html page that include the application JS. Now I do not want to see in the browser url the path xx.xxxxxx.xxx.xxx.file (the xxx are the names of package). I hope I was clear.
    Thanks

    ReplyDelete
  12. You have to create an entry-point servlet, mapped to any URL you like (in web.xml). In this you generate the HTML that loads the GWT application (remove the file index.html and put its content in the servlet response).

    Client ----request---> EntryPointServlet
    |
    <----HTML page loading GWT---+
    |
    +----------loads GWT app----->

    ReplyDelete
  13. Ok,I understand the idea, you have an example of the web.xml end servlet
    Thanks

    ReplyDelete