How to Override Gwt Obfuscated Style for Datagrid Header

How to override GWT obfuscated style for DataGrid header

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

How to apply different css style to gwt datagrid widget in the same page?

From the Q/A you linked to:

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 https://code.google.com/p/google-web-toolkit/issues/detail?id=6144

How to remove text-shadow from column headers in GWT DataGrid?

How are you overriding this css ? Did you just add the .dataGridHeader class to your own css stylesheet ?
Please have a look at this question detailing how to properly override the css of a DataGrid. This is a recurring question that has already been answered multiple times here on SO.

Overridden GWT CSS styles not being applied after deployment

Your problem ist that the styles are not obfuscated in dev mod, so they will look like .com-google-gwt-user-cellview-client-DataGrid-Style-dataGridEvenRow. When you compile and deploy a war file then all files are usually obfuscated and will look like .GKY5KDJCI. so in production you are not overriding the styles.

you can change the obfuscation level in your gwt.xml file with the property:

<set-configuration-property name="CssResource.style" value="pretty"/>
other available options are: debug, stable, stable-shorttype, stable-notype. default is obfuscated.

anyway you should follow the apporach suggested by Youssef Lahoud and provide a custom css resource for your datagrid.

Any other way to style CellTables in GWT, other than ClientBundle?

"Is there a way to reference a CSS file that is not in the same package as the interface, and say is in a different source directory than the base src dir of the project?"

Just reference it in your .html file

<link rel="stylesheet" type="text/css" href="relative/path/to/your/CSS">

Styling Data Grids in GWT - Multiple Grids in one project

You have to declare a DataGrid.Style sub-interface or they'll all share the same obfuscated class names. See also: https://code.google.com/p/google-web-toolkit/issues/detail?id=6144

---

Related Topics