GWT Tooltip (GXT) on Grid Line

Question

I am developing my own tooltip using Ext GWT (GXT) for my project, and this tooltip should appear above the grid lines when they are selected. I cannot use the default tooltip or the GXT tooltip because I need to be able to add components (e.g. buttons) to this tooltip.

The problem is that the GXT Grid component does not represent mousing events related to the row (although there are RowClick and RowMouseDown). In any case, I tried to add a listener to the grid with the OnMouseOver and OnMouseOut events, but it does not work properly. It fires these events every time you hover over any of the sections and intervals that make up the line.

The only way I see to solve this problem is to subclass the GridView component and make each row of the Component itself, but this will be a lot of work and will probably affect performance. I cannot help but think that there is a better way to do this.

Can anyone more experienced with the GXT give me the light?

Answer 1

try it

QuickTip quickTip = new QuickTip(grid); grid.addListener(Events.OnMouseOver, new Listener<GridEvent<BeanModel>>(){ @Override public void handleEvent(GridEvent<BeanModel> ge) { com.google.gwt.dom.client.Element el= grid.getView().getCell(ge.getRowIndex(),ge.getColIndex()); String html = "<span qtip='" + el.getFirstChildElement().getInnerText() + "'>" + el.getFirstChildElement().getInnerText() + "</span>"; el.getFirstChildElement().setInnerHTML(html); } }); 

Answer 2

onComponentEvent () (defined in com.extjs.gxt.ui.client.widget.Component with an empty body and redefined in com.extjs.gxt.ui.client.widget.grid.Grid) also accepts events of type Event.ONMOUSEOVER and Event.onmouseuse

The default implementation in the Grid class does not handle these events, so you can override this function in a subclass.

Additionally, at the end of onComponentEvent (), the Grid calls the handleComponentEvent () function of the GridView.

Answer 3

I found 2 ways to do this:

1. For a particular grid column, describe a renderer, for example:

 { width: 200, dataIndex : 'invoice', renderer:addTooltip } 

And your rendering function:

 function addTooltip(value, metadata){ metadata.attr = 'ext:qtip="' + value + '"'; return value; } 

But this method will only work when the mouse pointer is above the specified column.

2. For "rendering" the grid events apply / use this function:

 var myGrid = grid; myGrid.on('render', function() { myGrid.tip = new Ext.ToolTip({ view: myGrid.getView(), target: myGrid.getView().mainBody, delegate: '.x-grid3-row', trackMouse: true, renderTo: document.body, listeners: { beforeshow: function updateTipBody(tip) { tip.body.dom.innerHTML = "Over row " + tip.view.findRowIndex(tip.triggerElement); } } }); }); 

I hope this will be useful for you :)

Answer 4

I know this is old, but there is no accepted answer, and I think I found a better way:

 grid.addListener(Events.OnMouseOver, new Listener<GridEvent<Model>>() { @Override public void handleEvent(GridEvent<Model> ge) { if (grid.getToolTip() != null) { grid.getToolTip().hide(); } ModelData model = ge.getModel(); if (model != null) { Object someValue = model.get("someProperty"); String label = someValue.toString(); grid.setToolTip(label); } if (grid.getToolTip() != null) { grid.getToolTip().show(); } } }); 

Answer 5

I use GWT 2.6 and GXT 3.1.0, and I managed to do it this way .... Here the RowSet class is similar to Map

  GridView<RowSet> view = new GridView<RowSet>() { private Element cell; @Override protected void handleComponentEvent(Event event) { switch (event.getTypeInt()) { case Event.ONMOUSEMOVE: cell = Element.is(event.getEventTarget()) ? findCell((Element) event.getEventTarget().cast()) : null; break; } super.handleComponentEvent(event); } @Override protected void onRowOut(Element row) { grid.hideToolTip(); grid.setToolTipConfig(null); super.onRowOut(row); } @Override protected void onRowOver(final Element row) { super.onRowOver(row); grid.hideToolTip(); grid.setToolTipConfig(null); ToolTipConfig config = new ToolTipConfig(); int rowIndex = grid.getView().findRowIndex(row); // Through "rowIndex" you can get the Row like this : // grid.getStore().get(rowIndex) config.setBodyHtml("Your tool tip text here"); config.setTitleHtml("Tool Tip Title"); config.setCloseable(true); grid.setToolTipConfig(config); int absoluteRight = (cell != null) ? cell.getAbsoluteRight() : row.getAbsoluteRight(); int absoluteTop = (cell != null) ? cell.getAbsoluteTop() : row.getAbsoluteTop(); Point point = new Point(absoluteRight, absoluteTop); grid.getToolTip().showAt(point); } }; view.setAutoFill(true); grid.setView(view);