How to override GWT obfuscated style for DataGrid header

Question

I'm trying to figure out how to override the dataGridHeader style defined in DataGrid.css! GWT core. The GWT style name is obfuscated with adler32 so I can't simply use .dataGridHeader in my css. In my case I wish a simple change of white-space:normal.

I've seen may articles here about injecting css but they all appear to be class level rather than a sub style used within a component like DataGrid.

How do I override a header style used within a component like DataGrid?

Answer 1

Just like with any ClientBundle and CssResource: create an interface that extends Datagrid.Resources and overrides the dataGridStyle method with a @Source annotation pointing to your own CSS file (or possibly to both the original file and your own file, so they'll be combined together).

Doing it that way will override the style for all DataGrids in your app though (it actually depends on which CssResource instance gets ensureInjected() first: the one from the original DataGrid.Resources or the one from your sub-interface): because you use the same return type (DataGrid.Style), the obfuscated class names will be the same.

If you want to change the style on a case-by-case basis then, in addition, declare an interface that extends DataGrid.Style and use that as the return type to your dataGridStyle override: because the obfuscated class name is based on both the interface fully-qualified name and the method name, your DataGrid.Style sub-interface will generate different obfuscated class names than the original DataGrid.Style interface.

Then of course, GWT.create() your DataGrid.Resources sub-interface and pass it as an argument to the DataGrid constructor.

See also http://code.google.com/p/google-web-toolkit/issues/detail?id=6144

Answer 2

Thanks Thomas.

Just to make it easier for the readers...

Create a new Interface

public interface GwtCssDataGridResources extends DataGrid.Resources {
      @Source({Style.DEFAULT_CSS, "gwtDataGrid.css"})
      Style dataGrid();
}

Use a static reference

public static final GwtCssDataGridResources gwtCssDataGridResources = GWT.create(GwtCssDataGridResources.class);

    static {
        gwtCssDataGridResources.dataGrid().ensureInjected();
    }

Finally create a new CSS file gwtDataGrid.css. Note that if you need to override a style, you have to use !important on each definition.

.dataGridHeader {
    color: #FF0000 !important;
}

.dataGridFirstColumnHeader {
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
}

.dataGridLastColumnHeader {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
}

That's it