How to override GWT obfuscation style for DataGrid header

Question

I am trying to figure out how to override the dataGridHeader style defined in DataGrid.css ! GWT core. The GWT style name is obfuscated by adler32, so I can't just use .dataGridHeader in my css. In my case, I want a simple change in white space: normal.

I saw articles about introducing css here, but they all look like a class level, not the extra style used in a component like DataGrid.

How to override the header style used in 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 the @Source annotation pointing to your own CSS file (or, possibly, to the source file and your own file, therefore they will be combined together).

Doing this will override the style for all DataGrid in your application (actually it depends on which instance of CssResource gets ensureInjected() ): one from the original Datagrid.Resources or one from your sub-interface): since you use one and the same type of return value ( DataGrid.Style ), the names of entangled classes will be the same.

If you want to change the style in each case, then also declare an interface that extends DataGrid.Style , and use this as the return type for your overriding dataGridStyle : because the obfuscated class name is based on both the full name of the interface and by the method name, your sub-interface of DataGrid.Style will generate different names of tangled classes than the original interface of DataGrid.Style .

Then, of course, GWT.create() your sub-interface of Datagrid.Resources 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 to Thomas.

Just to make it easier for readers ...

Create a new interface

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

Use static link

 public static final GwtCssDataGridResources gwtCssDataGridResources = GWT.create(GwtCssDataGridResources.class); static { gwtCssDataGridResources.dataGrid().ensureInjected(); } 

Finally, create a new gwtDataGrid.css CSS file. Please note: if you need to override the style, you must use ! Important for 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; } 

What he