CellTable column and cell style

[divStar]

Hi there,

I'm using a cellTable to display items from a character. The table
header consists of various columns such as "Image", "Name", "Amount",
"Type" and "Character".
Then I made a custom widget that acts like a dropdown listbox - using
a toggle button and a celltable. It contains all the rows that can be
hidden by checking/unchecking the checkboxes.

See here for a screenshot: http://www.abload.de/img/odrop_v2_00036u4r.jpg

While I managed to hide the rows upon checking/unchecking that
checkbox in the dropdown menu, I can't seem to make the column headers
disappear.
I hide a cell in a row by getting the column index and writing
something like this:

cellTable.getRowElement(i).getCells().getItem(cellTable.getColumnIndex((Column<ItemDTO, ?
>) event.getColumn())).addClassName("hiddenCell");

.hiddenCell is defined in my css file and just contains "display:
none;".
It works well on the cells, but how do I approach the column header
cells? I'd like to be able to hide them too.

I've read something about overwriting the render-method or the
getCellStylesName() method of the column, but the latter doesn't work
for me (the method get's called when the rows appear - not on checking/
unchecking and I don't know what event to fire) and I don't know much
about the former.

Please help me find a way to assign a style to the header cell - or
maybe a whole new (better?) way of hiding a whole column? (I'd like
for the column to stay in tact so if I retry my data it gets pushed
into the hidden columns as well - I just want to be able to display
some of the columns and hide other columns)

Thank you in advance!
Igor.

[divStar]

Okay .. I managed to modify the style of the row cells by simply
calling "setCellStyleNames" with the appropriate CSS-class as well as
calling cellTable.redraw() afterwards.
What I am still unable to do is make it so the column headers actually
receive a style.

I call

cellTable.addColumnStyleName(cellTable.getColumnIndex(event.getColumn()),
style);

where event.getColumn is the column I am changing (hiding or applying
the style to).
When inspecting using Firebug I see no difference (no TH-elements seem
to be modified) and even calling cellTable.redrawHeaders() doesn't fix
it.

After looking into the CellTable-class I can see that it applies the
style using DOM directly. However even when I tried to do that - it
just won't change the headers appearances.

Does anyone know how to fix that? I just want to be able to assign an
additional class to each TH (column) element. Is it maybe a bug -
since it seems to not care what style I'm trying to add using
"addColumnStyleName"?

Thanks in advance!

[Sudhakar Abraham]

You can do it entirely with CSS. Extend CellTable.Resource and
CellTable.Style to provide your own .cellTableHeader. Change the
property of ".cellTableHeader" in CellTableStyle css file.

S. Abraham
www.DataStoreGwt.com
Persist objects directly in Google App Engine

//CellTableStyle.css

.cellTableHeader
{
height: 25px;
border-bottom: 2px solid #60a6bf;
padding: 3px 25px;
text-align:right;
color: blue;
text-shadow: #ddf 1px 1px 0;
overflow: hidden;
cursor:pointer;
margin-right:0px;
border:solid 1px red;
background-image: url(bollon.gif);
background-repeat:no-repeat;
background-position:80% 50%;

}

// in java class.

CellTable<your_domain_object> studentTable = new
CellTable<your_domain_object>(15, GWT.<TableResources>
create(TableResources.class));

[divStar]

Thank you very much!

I still got a question though: I want to change the style of the
CellTable-header depending on whether the attribute "visible" of
ColumnEx<?,?> (derived from Column<?,?>) is set to true or false.
Everytime a column is meant to be hidden or shown, the setter
"setVisible" of the column is called. Is there a way to assign a style
depending on this attribute?

If it was a regular widget, I might have added a custom attribute and
added that to the CSS via selector. However: this does not work here
as I am not able to "getElement()" of that Column.

Thank you once again. I hope you can help me with this problem I have.
Overriding the CSSResource of the CellTable was definitely the right
thing - thank you!

[divStar]

I can't seem to be able to hide the column... it's easy to hide the
column-cells (the data cells), but I just can't hide the column
header. I'd like to hide the column header by e.g. setting one of the
Column-objects to .setVisible(false) or something.. it just doesn't
react :/. Do I need to override the renderer or something? Any help is
greatly appreciated!

[divStar]

I still couldn't manage to find a way to hide the column header names.
Does noone really have an idea of how to solve this issue? I tried
everything I could, but I just can't seem to make it work. Please,
help me.

[Thomas Broyer]

Have you tried using add/removeColumnStyleName with a CSS class that sets display:none?

As a last resort, have you tried removing/adding the columns from the CellTable?

[divStar]

Hello Thomas!

Thank you very much for your reply.

This is a ColumnVisibilityChangeEventHandler. It is called once I
select/deselect the column in a panel.
Hiding the data cells works flawlessly as calling "setCellStyleNames"
with the CSS class containing "display: none" works exactly as it's
meant to.
Hiding the column cells (header) however just does not work. I've
added the method-code below. I know the code is executed, because
event.getColumn().setCellStyleNames... works just as it's supposed to.

// Begin of ColumnVisibilityChangeEventHandler-methods
@Override
public void onColumnVisibilityChanged(final
ColumnVisibilityChangeEvent event) {
if (event.getColumn() != null) {
String style = "hiddenCell";
if (event.getColumn().isVisible()) {
event.getColumn().setCellStyleNames("");

cellTable.removeColumnStyleName(cellTable.getColumnIndex((Column<ItemOnCharacterDTO,?
>)event.getColumn()), ((BelongingsCellTableStyle)
cellTableResources.cellTableStyle()).cellTableHeaderHidden());
} else {
event.getColumn().setCellStyleNames(style);

cellTable.addColumnStyleName(cellTable.getColumnIndex((Column<ItemOnCharacterDTO,?
>)event.getColumn()), ((BelongingsCellTableStyle)
cellTableResources.cellTableStyle()).cellTableHeaderHidden());
}
cellTable.redrawHeaders();
cellTable.redraw();
}
}
// End of ColumnVisibilityChangeEventHandler-methods

Deleting the columns does work. However: this also means, that I
cannot show the data they should contain, once I decide to readd them.
Therefore it'd be really awesome if there was a way to make it
understand the styles..
I've used the following to apply custom styles:

interface BelongingsCellTableResources extends CellTable.Resources {
@Source(value = {CellTable.Style.DEFAULT_CSS,
"BelongingsCellTableStyle.css"})
BelongingsCellTableStyle cellTableStyle();
}

interface BelongingsCellTableStyle extends CellTable.Style {
public abstract String cellTableHeaderHidden();
}

Additionally I've included a BelongingsCellTableStyle.css in the same
package as this page. I could confirm that it sees and uses this
file..
According to Firebug the "cellTableHeaderHidden" never gets applied
(nor does "display: none" ever get applied to the header elements).
Maybe I'm doing something wrong? If you happen to have another hint,
I'd gladly try it - removing the columns is not an option though,
because the data is lost then.

Thanks!

[divStar]

Hello GWT People!

I think I've at least found the reason why I am not able to style the
whole column with a given style.

Let's say I want to apply "display: none;" to each cell (EXCLUDING the
header), I was successful in doing so using the "setCellStyleNames"-
method from the Column<?,?>-object.
However: if I want to apply something to each cell INCLUDING the
header (or just the header), I should be able to do so using
"addColumnStyleName". But this does not work, because it applies the
style to the <col>-element within the CellTable's <colgroup> - which
is pretty much useless, because there's hardly any browser that'd
interpret the class properly let alone apply the class to each cell
(INCLUDING! the header).

This means that there are no means to change the style of the header -
at least I have not found any to date. Removing the column entirely is
not an option, as it'd lose all the data it contains.

I hope someone on here can prove me wrong, but that's what I found out
in a simple project that I've created (3 classes - I can upload it
somewhere if someone wants to have a look; I've stripped it of
anything unnecessary). I've heard there will be changes to the
celltable in 2.5 - is that so? Is there a way to test it? or at least
work around my issue? I want to be able to hide the column-header or
the entire column if I can't hide just the header (note: I want to
hide each column's header separately as I'm intending to allow the
user to hide selected columns if he decides he doesn't need certain
information).

Greetings,
Igor.

[Václav Mach]

Hello!

I've been searching for proper solution for hours. There is no way, how to do it "nicely".

Basically I add the class to the columns using:

// the THs

SafeHtml memberIdColumnHeader = SafeHtmlUtils.fromSafeConstant("<span class=\"toHide\">Member ID</span>");

SafeHtml userIdColumnHeader = SafeHtmlUtils.fromSafeConstant("<span class=\"toHide\">User ID</span>");

table.addColumn(memberIdColumn, memberIdColumnHeader);

table.addColumn(userIdColumn, userIdColumnHeader);

// the TDs

memberIdColumn.setCellStyleNames("toHide");

userIdColumn.setCellStyleNames("toHide");

And then I use jQuery to hide/show it it:

private static native void showHide(boolean show) /*-{

if(show)

{

$wnd.jQuery(".toHide").show(); // the TDs

$wnd.jQuery("span.toHide").parent().show(); // the THs

}else{

$wnd.jQuery(".toHide").hide();

$wnd.jQuery("span.toHide").parent().hide();

}

}-*/;

It's not the finest solution, but it works :-)