GWT-Ext: How to show tooltips for the ColumnTree (tree-grid, tree-column) widget

One day, a friend of ours has asked this:

"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 ."

The answer cannot be that simple, due to the defunct library GWT-Ext, which isn't under dev for long time. Anyhow, because I used this library first time, and I really like it, I found a way to solve this problem.

The column tree is the implementation of the very known tree-column, or tree-grid widget. This can be editable as well.

So the solution contains 2 files:
- 1. an updated ColumnNodeUI.js that sets the title DOM attribute for each cell with the value of the cell.
- 2. a Java class, called SccColumnTreeEditor.java that updates the title attribute of the cell element, after the completion of the edit action.



 You can download these files from here:
- ColumnNodeUI.js
- SccColumnTreeEditor.java
- GWTExt_TreeColumn.java -- a test class, where you can see how everything is used.


Cheers!


Here's the solution found by our friend Faber:

Hi SCC, I wanted to post my solution on a tooltip using the TreeLoader. I did not want to change the javascript so I did the following:

- a function:

private String getToolTip (Integer value, String tooltip) {
   StringBuilder text = new StringBuilder ();
   text.append ("<div ext:qtitle = \"\" " + "ext:qtip = \"");
   text.append (tooltip);
   text.append ("\"/> "+ value + "</div>");
   return text.toString();
}

and then inside the JSONObject build my tooltip with data that I want.

StringBuilder tooltip = new StringBuilder ();
MyJSon JSONObject = new JSONObject (); / / JsonObject data
tooltip.append ("Label");
tooltip.append (myBean.getValue ()+"  ");
myJSon.put ("value", getToolTip (myBean.getValue (), tooltip.toString ()));
 
This obviously is server-side.

Thanks Faber!

3 comments:

  1. The tooltip appears on mouse-over (hover) on the value text, you don't need to click on it -- if you want to have it on the whole cell (even on the empty space), then move the "title" attribute to the parent <div> element.

    Cheers!

    ReplyDelete
  2. See the solution in the last comment, here:

    Moved the title on parent div. Cheers!

    ReplyDelete
  3. Hi SCC, I wanted to post my solution on a tooltip using the TreeLoader. I did not want to change the javascript so I did the following:
    a function
    private String getToolTip (Integer value, String tooltip) {
    StringBuilder text = new StringBuilder ();
    text.append ("div \" ext: qtitle = \ "\" "+"ext: Qtip = \ "");
    text.append (tooltip);
    text.append ("\"> "+ value +" / div ");
    text.toString return ();
    }
    and then inside the JSONObject build my tooltip with data that I want

    StringBuilder tooltip = new StringBuilder ();
    MyJSon JSONObject = new JSONObject (); / / JsonObject data
    tooltip.append ("Label");
    tooltip.append (myBean.getValue ()+"
    ");
    myJSon.put ("value", getToolTip (myBean.getValue (), tooltip.toString ()));
    This obviously server-side

    ReplyDelete