How to set CSS Resource for DataGrid in UIBinder?

I have two questions.

Question #1. this question (post title) comes directly from the last comment from @Cataclysm on the first answer from here:

dataGrid = new DataGrid<T>(pageSize, resource), how to set CSS Resource for UIBinder ?

I am attempting to style a DataGrid defined in a UIBinder:

<g:south size="400">
    <c:DataGrid ui:field="documentDataTable" />
</g:south>

With this ClientBundle interface code:

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

/**
 * Resources = "DataGrid.Resources"
 * Style     = "DataGrid.Style"
 * 
 * http://federico.defaveri.org/?p=157
 * https://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3
 * https://stackoverflow.com/questions/7394151/datagrid-celltable-styling-frustration-overriding-row-styles/7395175#comment26605442_7395175
 */
public interface CustomDataGridResource extends Resources {

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

    interface CustomStyle extends Style {
        String dataGridHeader();
    }
}

And CDD_DataGridStyle.css:

.dataGridHeader {
    background-color: purple;
}

Using these references:

From what I have understood from the answer to Reference 1, this resource style sheet is not "injected" like an ordinary client bundle, but rather should be passed in as a resource to a programmatically-instantiated data grid:

"To construct your newly-styled datagrid all you need to do is:
DataGridResource resource = GWT.create(DataGridResource.class);
dataGrid = new DataGrid<T>(pageSize, resource)"

Oddly, although I have a reference to the DataGrid @UIField, there does not appear to be any method in the DataGrid.java API documentation to "set" the resource (Hence the question as a repost of the last comment on this question about a DataGrid already defined in UIBinder -- DataGrid / CellTable styling frustration -- overriding row styles).

Question #2: What is the difference between DataGrid vs. CellTable, and which is the correct implementation syntax?

Why does the Google GWT API documentation for DataGrid.java (Reference 2) only detail a CellTable instantiation programmatically? I understand that DataGrid.java extends AbstractCellTable.java but why not use any of the seven DataGrid constructors in the API Example code?

To make matters more confusing, References 4 and 5 suggest that my client bundle interface should be extending CellTable.Resources, while Reference 1 suggests extending DataGrid.Resources (see also this link: http://federico.defaveri.org/?p=157).

I tried adapting the the "After" code example from the last post (#13) from Reference 5 but the nested interfaces threw an error:

public interface NxoCellTableResources extends CellTable.Resources {
    public interface NormalStyle extends CellTable.Style {}

    @Source({ CellTable.Style.DEFAULT_CSS, "NxoCellTable.css" })
    public NormalStyle cellTableStyle();
}

public interface NxoCellTableThinResources extends CellTable.Resources {
    public interface ThinStyle extends CellTable.Style {}

    @Source({ CellTable.Style.DEFAULT_CSS, "NxoCellTable.css", "NxoCellTableThin.css" })
    public ThinStyle cellTableStyle();
}

In summary, I am looking for the simplest way to style all elements in a DataGrid defined in a UIBinder with a clear explanation of which Resource syntax to use (DataGrid vs. CellTable). I am open to removing the reference from UIBinder and inserting programmatically into the view if necessary, thanks in advance!

Solution

Question 1:

Everything you said, is correct.

Make sure you pass provided=true to your DataGrid's UiField:

@UiField(provided = true)
DataGrid<MyDTO> dataGrid;

Then in the constructor you would create the DataGrid like this:

public MyView() {
   CustomDataGridResource resource = GWT.create(CustomDataGridResource.class);
   resource.dataGridStyle().ensureInjected();
   dataGrid = new DataGrid<MyDTO>(pageSize, resource)"
   binder.createAndBindUi(this);
}

Make sure you call ensureInjected() on the style. Also if you have an Inject on your constructor. You can pass the CustomDataGridresource and GWT.create() will be automatically called:

@Inject
public MyView(CustomDataGridResource resource) {
   resource.dataGridStyle().ensureInjected();
   dataGrid = new DataGrid<MyDTO>(pageSize, resource)"
   binder.createAndBindUi(this);
}

Question 2:
Regarding the difference between CellTable and DataGrid refer to this thread:

https://groups.google.com/forum/#!topic/google-web-toolkit/PBhu6RtP4G8

Basically if you use LayoutPanels DataGrid is a good fit as it contains fixed headers and a scrollable content area. CellTable will also work with FlowPanel and normal Panels.