DataGrid / CellTable styling frustration — overriding row styles

Question

I\'m trying mightily to style my GWT 2.4 DataGrid, and hit roadblocks at every turn. I\'ve added the following row styling to my DataGrid:

dataTable.setRowS         


        

Answer 1

See http://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3 (which is not a bug!)

In short extend the DataGrid.Style (the goal is only to have a new type, you don't have to add anything to it) and have your dataGridStyle overridden method return your own subtype rather than DataGrid.Style (and it'll work because of return-type covariance)

Answer 2

You can create a custom CSS file and provide this to the DataGrid through defining a new style resource. This is done by creating a type that extends DataGrid.Resources, which knows about your CSS file. You then pass this to the constructor of the datagrid.

To provide a fairly complete example, first create a new type for the DataGrid style. (Defining a new type like this just uniquely identifies your style within GWT).

public interface MyStyle extends DataGrid.Style {
}

Then, define an interface which overrides the dataGridStyle() method stub in DataGrid.Resources. The dataGridStyle method should return the previously defined MyStyle.

Note the two elements given to the @Source annotation - you can just override any of the class names in the default CSS (DataGrid.css) in the second file you provide ("DataGridOverride.css" here).

public interface DataGridResource extends DataGrid.Resources {

  @Source({ DataGrid.Style.DEFAULT_CSS, "DataGridOverride.css" })
  MyStyle dataGridStyle();
};

To construct your newly-styled datagrid all you need to do is:

DataGridResource resource = GWT.create(DataGridResource.class);
    dataGrid = new DataGrid<T>(pageSize, resource)

One subtlety is as you're increasing the precedence of the overridden styles, you may need to override any other styles that require higher precedence, for example the row hover rules need to come after the row styling rules.