New GWT 2.4 DataGrid -- not styling -- annotation bug?

Question

I have followed the example code laid out in an earlier posting regarding styling GWT CellTables, replicating the code for the new GWT 2.4 DataGrids. Unfortunately, nothing seemed to work. All I want to do is set the font-size of the cells smaller, so in my local css file (see the second parameter of the @Source annotation in the linked post) I included:

.dataGridCell {
    font-size: 6px;
}

Nothing happened. The font size stubbornly refused to change. Then I noticed this in the DataGrid code:

  @ImportedWithPrefix("gwt-CellTable")
  public interface Style extends CssResource {

I copied DataGrid into my workspace, along with the related three gif files, and commented out the one dependency on a protected method in AbstractCellTable (no empty table widgets -- oh well). I changed the prefix defined in the annotation to gwt-DataGrid -- and pfffft! -- still it didn't work.

So what am I missing here? Is that gwt-CellTable prefix correct in the annotation? Seems fishy to me, though I failed to get it to work with my change.

Turns out the names matter. Duh!

OK, got it working. Turns out it matters to use the same names. Duh!

import com.google.gwt.core.client.GWT;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Style;
import com.google.gwt.user.cellview.client.DataGrid.Resources;

public interface MyDataGridResources extends Resources {

  public static final MyDataGridResources INSTANCE = GWT.create(MyDataGridResources.class);

  @Override
  @Source({DataGrid.Style.DEFAULT_CSS, "../resources/styling/mydatagridstyles.css"})
  Style dataGridStyle();  // ***********************

}

When I made the name of the style the same as the name of the style interface in DataGrid.java ("dataGridStyle") then it started working.

I sorta kinda get it...but not quite. I will need think more about scoping rules, and also study exactly what happens to the resources parameter passed into the DataGrid constructor.

"Turns out it matters to use the same names" - have no idea what you are saying. Did you mean to say the css file name has to be the same? I don't think so. Did you mean the style names have to be the same as the original? - Of course! Otherwise, how would GWT know which style name to use, unless you specifically set a new style name for each of the myriads of element. — Blessed Geek, Dec 02 '11 at 21:02

score 2 · Answer 1 · edited May 23 '17 at 11:55

2

I just did it as described in the post you are linking to, and it works as expected. My Resources class looks like that:

import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Resources;

public interface CustomDataGridResources extends Resources {

    @Source({DataGrid.Style.DEFAULT_CSS, "../resources/customDataGrid.css"})
    CustomStyle dataGridStyle();

    interface CustomStyle extends DataGrid.Style {

    }

}

And then use that class when creating the DataGrid instance:

    DataGrid.Resources resources = GWT.create(CustomDataGridResources.class);
    gridUnits = new DataGrid<Unit>(50, resources, new UnitKeyProvider());

edited May 23 '17 at 11:55

Community

1
1

answered Sep 12 '11 at 12:37

tsauerwein

5,841
3
36
49

Thanks for trying it out. That helps me a lot, since I know that I must be doing something wrong, instead of following the wrong path. A quick question. Do you need to call ensureInjected() for the styles in the resource package that you are providing to the DataGrid, or is that done for you? Or maybe that question doesn't make sense for some reason that I don't know about. I'll start reviewing my code. – Steve J Sep 12 '11 at 13:55
No, I am not using `ensureInjected()`. All I do is passing an instance to the `DataGrid` constructor. – tsauerwein Sep 12 '11 at 15:16
OK, got it working. Turns out it matters to use the same names. Duh! See above. – Steve J Sep 12 '11 at 17:37
Darnit, half working. Putting .dataGridCell {font-size: 80% } into my style sheet shrinks the fonts correctly. Yay! But .dataGridEvenRow {background: #ff0000} did nothing to the colour. Basically, I want to be able to colour a column, but adding a column style with a background colour only affects the header cell. The main content cells seem to take the grey-white colours in preference to anything else. – Steve J Sep 12 '11 at 18:25
Changing the background-color in `.dataGridEvenRow` and `.dataGridOddRow` works for me. Maybe some other CSS style is interfering? – tsauerwein Sep 13 '11 at 07:07

score 1 · Answer 2 · answered Sep 14 '11 at 00:12

1

When you overwrite a style which is being set by the GWT CSS file, you need to add "!important" in your own CSS definition. Like this:

.dataGridCell {
    font-size: 6px !important;
}
.dataGridEvenRow {
    background: #ff0000 !important;
}

answered Sep 14 '11 at 00:12

Andrei Volgin

40,755
6
49
58

score 1 · Answer 3 · edited Feb 02 '12 at 14:17

1

be careful when using the line

@Source({DataGrid.Style.DEFAULT_CSS, "../resources/customDataGrid.css"})

it means gwt uses both the default and your own css. i know it is coded like that but when you use copy & paste you may get confused like me why do you have both styles together.

edited Feb 02 '12 at 14:17

shanethehat

15,460
11
57
87

answered Feb 02 '12 at 12:26

Lego

11
1

New GWT 2.4 DataGrid -- not styling -- annotation bug?

3 Answers3