How do you call "getCellForEvent()" for all GWT Grid mouse events?

Question

For GWT when you have a Grid I want to get events for what row and column.

So I extended GWT grid to add mouse events:

@Override
public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
    return this.addDomHandler(handler, MouseOverEvent.getType());
}

@Override
public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
    return this.addDomHandler(handler, MouseOutEvent.getType());
}

@Override
public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) {
    return this.addDomHandler(handler, MouseMoveEvent.getType());
}

Then I register the event handler for clicking the mouse:

// mouse event handler
g.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        Cell cell = ((HTMLTable)event.getSource()).getCellForEvent(event);
        System.out.println("GridClickHandler: ("+cell.getRowIndex()+","+cell.getCellIndex()+")");
    }
});

So now i get events for specific cells... but only for when you click the mouse. How do you call "getCellForEvent()" for all the mouse events?

Answer 1

public class MyTable extends Grid {
    public MyTable(){
       sinkEvents(Event.ONMOUSEOVER | Event.ONMOUSEOUT);
    }

    @Override
    public void onBrowserEvent(Event event) {
      super.onBrowserEvent(event);
      Element td = getEventTargetCell(event);
      if (td == null) {
         return;
      }
      Element tr = DOM.getParent(td);
       switch (DOM.eventGetType(event)) {
         case Event.ONMOUSEOVER: {
            tr.addClassName("my-tbl-item-sel");
            break;
         }
         case Event.ONMOUSEOUT: {
            tr.removeClassName("my-tbl-item-sel");
            break;
         }
    } 
}

Try this one

Answer 2

I got the getCellForEvent() function working for all the mouse event types (instead of just click events).

The way to get the desired behavior was to, extend gwt's Grid. Then dig into where getCellForEvent() is located and copy this bit of code into the new extended Grid. Change the getCellForEvent() from "ClickEvent" to "MouseEvent".

onModuleLoad():

    /*------ Create the main grid display ------*/
    // grid object
    final GridWithMouse g = new GridWithMouse(2, 2);
    // mouse over event handler
    g.addMouseOverHandler(new MouseOverHandler() {
        @Override
        public void onMouseOver(MouseOverEvent event) {
            Cell cell = ((GridWithMouse)event.getSource()).getCellForEvent(event);
            if(cell!=null) {
                System.out.println("Over: ("+cell.getRowIndex()+","+cell.getCellIndex()+")");
            }
        }
    });
    // mouse move event handler
    g.addMouseMoveHandler(new MouseMoveHandler() {
        @Override
        public void onMouseMove(MouseMoveEvent event) {
            Cell cell = ((GridWithMouse)event.getSource()).getCellForEvent(event);
            if(cell!=null) {
                System.out.println("Move: ("+cell.getRowIndex()+","+cell.getCellIndex()+")");
            }
        }
    });
    // mouse click event handler
    g.addClickHandler(new ClickHandler() {
        @SuppressWarnings("rawtypes")
        @Override
        public void onClick(ClickEvent event) {
            Cell cell = ((GridWithMouse)event.getSource()).getCellForEvent((MouseEvent)event);
            if(cell!=null) {
                System.out.println("Click: ("+cell.getRowIndex()+","+cell.getCellIndex()+")");
            }
        }
    });

The new extended Grid class:

package com.agilent.gridDisplay.client;

import com.google.gwt.dom.client.*
import com.google.gwt.event.dom.client.*
import com.google.gwt.event.shared.*
import com.google.gwt.user.client.*
import com.google.gwt.user.client.ui.*;

public class GridWithMouse 
       extends Grid
       implements HasMouseOutHandlers, HasMouseOverHandlers, HasMouseMoveHandlers
{

    /**
     * Return value for {@link HTMLTable#getCellForEvent}.
     */
    public class Cell extends com.google.gwt.user.client.ui.HTMLTable.Cell{
        public Cell(int rowIndex, int cellIndex) {
            super(rowIndex, cellIndex);
        }
    }

    public GridWithMouse(int rows, int cols) {
        super(rows,cols);
        for(int i = 0; i < 2; i++) {
            for(int j = 0; j < 2; j++) {
                this.setWidget(i,j,new Label("hello"+i));
            }
        }
    }

    /**
     * Given a click event, return the Cell that was clicked, or null if the event
     * did not hit this table.  The cell can also be null if the click event does
     * not occur on a specific cell.
     * 
     * @param event A click event of indeterminate origin
     * @return The appropriate cell, or null
     */
    @SuppressWarnings("rawtypes")
    public Cell getCellForEvent(MouseEvent event) {
        Element td = getEventTargetCell(Event.as(event.getNativeEvent()));
        if (td == null) {
            return null;
        }

        int row = TableRowElement.as(td.getParentElement()).getSectionRowIndex();
        int column = TableCellElement.as(td).getCellIndex();
        return new Cell(row, column);
    }

    @Override
    public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) {
        return this.addDomHandler(handler, MouseOverEvent.getType());
    }

    @Override
    public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
        return this.addDomHandler(handler, MouseOutEvent.getType());
    }

    @Override
    public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) {
        return this.addDomHandler(handler, MouseMoveEvent.getType());
    }

}

Now instead of getting pixel locations for all your mouse events you get grid locations for all your mouse events... which is really what Grid needed from the start!