GWT 2.2 CellTable dragging column widths with mouse ...

[cloudycity]

The new celltable does support setting column widths on the fly and
works great but ...
We would like to be able to use the mouse to drag the column widths to
a desired size by grabbing an edge of the header with the mouse. I
don't know how to accomplish this - I know it's not 'built-in' and we
would have to write some code.
If anyone has made this work I would appreciate a pointer on how to
get started.

Thanks

[Sky]

I haven't done this, but it would be fun and not too hard, but not
exactly trivial.

You'll need to have very skinny cells that will represent your borders
and have either a graphic or a background color so it looks like a
border. Put some mouse handlers on these cells or use handlers on the
entire table and determine which cell the event has taken place on.
OnMouseOver you'll change the cursor to the appropriate sizing cursor.
OnMouseOut change cursor back to default. OnMouseDown record the fact
that the mouse is now down and the x/y coords of the pointer.
OnMouseUp record the fact that the mouse is now up. OnMouseMove check
to see if the mouse is down and then calculate the distance the mouse
has moved from the original x/y coords the pointer had on the
OnMouseDown event. Resize your cells accordingly.

Done. Just a bit of thought needs to go into those calculations but
thats nothing I haven't done before and probably same for you.

[dflorey]

Did you check out the tables in the gwt incubator? They support resizing of columns, fixed headers etc.

[Musicman75]

@Sky
Nice idea to include resizing on mouse dragging.

Any implementation available?
I checked out the ScrollTable from incubator, but it's too slow
(rendering with more than 100000 rows is impossible).

The resizing functionallity from the Scrolltable implemented together
with CellTable would be a great thing.

Thanks
Stephan

[Gal Dolber]

why would you want to render 100000 rows? :)

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Guit: Elegant, beautiful, modular and *production ready* gwt applications.

http://code.google.com/p/guit/

[Diego Lovison]

If you would like rende 10000000 rows I suggest you use lazy render...
you can find this in gxt and smartgwt

On 8 abr, 09:23, Gal Dolber <gal.dol...@gmail.com> wrote:
> why would you want to render 100000 rows? :)
>

[Musicman75]

I don't want to render 100000 rows, that's why I use the celltable and
it's paging functionality.
To handle the whole datatable on client side (sorting, filtering, ..)
without server calls every time.

CellTable can handle a big amount of data, the only thing I miss is
column resizing on mouse dragging.

GXT, SmartGWT look nice, but the datastructure needed to fit with this
framework isn't useful for me and I don't want to use third party
libraries in my project.

[Diego Lovison]

you have 1000000...
the time to order in database is more fast that you return 100000 and
sort on a client side...
;)

[meyertee]

I'll have to implement the same in pure html/js soon, my strategy so far was to put some markup in the table header that creates an element on the right side of the header to trigger the resize-cursor and the mouse-events.

I saw the same thing here and in other places.

I did a quick test a few weeks ago with this markup and the styles below, which worked on the browsers I had available (Webkit/FF). Not exactly legal markup, but it seems to work.

<th class="resizable"><div class="resizeWrapper"><div class="label">Title</div><div class="handle"></div></div></th>

th.resizable {padding-right: 0;}

th.resizable .resizeWrapper {position: relative;}

th.resizable .label {position:relative;margin-right: 20px;}

th.resizable .handle {position:absolute;height:100%;width:3px;top: 0;right: 0;cursor: e-resize;}

The rest is as Sky describes an exercise in picking up mouse-events and doing some calculations depending on the desired resize behavior - flexible table width (Excel-like) or fixed width (for example Mac-Mail).

Sky's idea of puting an extra column in between is also interesting. I'll have to think about that. Might complicate some of the calculations and spanning in the table-body etc.

Best,Thomas.

[Musicman75]

Here's my implementation to handle column resizing.
I created the CellTable class in my SourceTree with same package name
as Google named it.

I extended the onBrowserEvent2 function with my resizing function:

....
// Forward the event to the associated header, footer, or column.
boolean isClick = "click".equals(eventType);
int col = tableCell.getCellIndex();

// Control resizing of columns
boolean resizing = resizeColumns(event, target, col,
tableCell);

if (resizing) {
return;
}

if (section == thead) {
....


The resizing function looks like this. I added a function to calculate
the column width if no with are set. Setting width must be done with
Unit.PX at the moment.

/** The mouse down. */
private boolean mouseDown = false;

/** The resize value. */
private int oldXValue = -1;

/** The column to resize. */
private int columnToResize = -1;

/**
* Resize columns.
*
* @param event
* the event
* @param target
* the target
* @param col
* the col
* @param tableCell
* the table cell
* @return true, if successful
*/
private boolean resizeColumns(Event event, Element target, int
col, TableCellElement tableCell) {
String eventType = event.getType();
int xValue = event.getClientX();
int offsetRight = xValue - (tableCell.getAbsoluteLeft() +
tableCell.getClientWidth());
int offsetLeft = xValue - tableCell.getAbsoluteLeft();
boolean resize = false;
if (offsetRight > -10) {
resize = true;
} else {
resize = false;
}
if (resize || mouseDown) {
DOM.setStyleAttribute((com.google.gwt.user.client.Element)
target, "cursor", "col-resize");
} else {
DOM.setStyleAttribute((com.google.gwt.user.client.Element)
target, "cursor", "auto");
return false;
}

if ("mousedown".equals(eventType)) {
mouseDown = !mouseDown;
if (mouseDown && columnToResize == -1 && oldXValue == -1)
{
columnToResize = col;
oldXValue = xValue;
} else {
calculateActualColumnWidths();
int offset = 0;
offset = xValue - oldXValue;

if (offset != 0 && columnToResize > -1) {
this.setColumnWidth(
columns.get(columnToResize),

Double.valueOf(columnWidths.get(columns.get(columnToResize)).replace(Unit.PX.getType(),
""))
+ offset, Unit.PX);
}
this.redraw();

columnToResize = -1;
oldXValue = -1;
}
}

return true;
}

/**
*
*/
private void calculateActualColumnWidths() {
if (columnWidths.size() == 0) {
GWT.log("Calculate column width");
int width = this.getOffsetWidth() / columns.size();
for (Column<T, ?> col : columns) {
this.setColumnWidth(col, width, Unit.PX);
}
}

}


Resizing is done at the last 10 px of each column. No other actions
are performed in this area.

First click activated resizing, set the column index for resizing and
takes the actual x value.
Second click releases resizing, calculates the offset of saved x value
and actual x value and set the width of saved column index.

Not very nice, but the celltable don't fire mouseup event. Other
solutions are welcome.
Perhaps we could create a nice and performant column resizing
together.

I'd like to show resizing with a small line. Some ideas how to draw a
line at a given position with GWT?

On 9 Apr., 13:02, meyertee <meyer...@gmail.com> wrote:
> I'll have to implement the same in pure html/js soon, my strategy so far was
> to put some markup in the table header that creates an element on the right
> side of the header to trigger the resize-cursor and the mouse-events.

> I saw the same thing here <http://bz.var.ru/comp/web/resizable.html> and in