Make GWT Flextable column resizeable - gwt

Question

I'm trying to make my flextables columns resizeable.
So the user can decide how width a column should be.
One solution is to use css resize property but this doesn't work in IE.
Does someone has an idea how to make this working in IE?
My idea was to catch the onBrowserEvent and register some mousehandlers but I don't get the right element to resize.
I hove you can help me.
Thanks in advance!

Answer 1

Hi I found a solution for my own. Maybe this can help someone.
public class ResizableFlexTable
extends FlexTable
{
private int mouseDownX;
private boolean mouseDown;
private int columnWidth;
private TableCellElement headerElem;
private int column;
private ResizeMode resizeMode;
/**
*
*/
public ResizableFlexTable()
{
super();
sinkEvents( Event.ONMOUSEMOVE );
sinkEvents( Event.ONMOUSEDOWN );
sinkEvents( Event.ONMOUSEUP );
sinkEvents( Event.ONCLICK );
Event.setEventListener( getElement(), this );
}
#Override
public void onBrowserEvent( Event event )
{
if ( event.getType().equals( "change" ) )
{
super.onBrowserEvent( event );
return;
}
boolean eventMouseUp = event.getType().equals( "mouseup" );
boolean eventClick = event.getType().equals( "click" );
boolean eventMouseDown = event.getType().equals( "mousedown" );
boolean eventMouseMove = event.getType().equals( "mousemove" );
if ( eventMouseUp )
{
mouseDownX = -1;
mouseDown = false;
}
if ( resizeMode == ResizeMode.RESIZING && eventClick )
{
resizeMode = ResizeMode.ENDING;
}
TableCellElement tableCellElement = findNearestParentCell( (Element) event.getEventTarget()
.cast() );
if ( tableCellElement == null )
{
super.onBrowserEvent( event );
return;
}
Element trElem = tableCellElement.getParentElement();
if ( trElem == null )
{
super.onBrowserEvent( event );
return;
}
TableRowElement tr = TableRowElement.as( trElem );
// Element sectionElem = tr.getParentElement();
if ( tr == null )
{
super.onBrowserEvent( event );
return;
}
int col = tableCellElement.getCellIndex();
if ( tr == getTableHeadElement() )
{
int mouseX = event.getClientX();
int right = tableCellElement.getAbsoluteLeft() + tableCellElement.getOffsetWidth();
if ( !mouseDown && eventMouseDown )
{
if ( mouseX <= right && mouseX >= right - 10 )
{
headerElem = tableCellElement;
column = col;
mouseDownX = event.getClientX();
mouseDown = true;
columnWidth = headerElem.getOffsetWidth();
}
}
else if ( eventMouseMove )
{
if ( mouseDown || mouseX <= right && mouseX >= right - 10 )
{
tableCellElement.getStyle().setCursor( Cursor.COL_RESIZE );
}
else
{
tableCellElement.getStyle().setCursor( Cursor.AUTO );
}
}
}
else
{
super.onBrowserEvent( event );
}
if ( headerElem != null && eventMouseMove && mouseDown )
{
int move = event.getClientX() - mouseDownX;
#SuppressWarnings ( "hiding")
int columnWidth = this.columnWidth + move;
if ( columnWidth > 24 )
{
getColumnFormatter().getElement( column ).setAttribute( "width", columnWidth + "px" );
resizeMode = ResizeMode.RESIZING;
}
}
if ( resizeMode != ResizeMode.RESIZING && resizeMode != ResizeMode.ENDING && eventClick )
{
super.onBrowserEvent( event );
}
else if ( resizeMode == ResizeMode.ENDING )
{
resizeMode = ResizeMode.NO;
}
}
/**
* #return
*/
private TableRowElement getTableHeadElement()
{
TableRowElement row = getRowFormatter().getElement( 0 ).cast();
return row;
}
/**
* Diese Methode ist 1 zu 1 aus der Oberklasse übernommen. Nicht ändern!!!
*/
private TableCellElement findNearestParentCell( Element elem )
{
while ( (elem != null) && (elem != getElement()) )
{
String tagName = elem.getTagName();
if ( "td".equalsIgnoreCase( tagName ) || "th".equalsIgnoreCase( tagName ) )
{
return elem.cast();
}
elem = elem.getParentElement();
}
return null;
}
}
This is not very nice but it works for me.