Re: Need to style DataGrid's header <table> element

[Jeremy Ross]

bump

On Wednesday, June 13, 2012 2:42:22 PM UTC-5, Jeremy Ross wrote:

I need to set "border-collapse: collapse" on the table element that makes up the DataGrid's header. I don't see a style class in DataGrid.Style that would allow me to do this. Also, the generated HTML table doesn't appear to reference a style class. dataGridHeader() allows one to style the cells (<th> elements), but I need to get at the table element. 

Anyone have an idea how to accomplish this?

[Joseph Lust]

Jeremy,

A less than glamorous way to apply CSS changes that are either not exposed, or not supported (i.e. CSS3) are to do it yourself at load time.

For example, in the constructor (if you're extending) or directly after the instantiation of your DataGrid, walk its DOM and get that <th> element you're looking for and apply that CSS style explicitly (element.setAttribute("border-collapse","collapse")).

It is not pretty, but I've had to do this a few times. Ideally there is a better way, but if not, do what you must.

Sincerely,

Joseph

[Thomas Broyer]

On Friday, June 22, 2012 4:46:00 AM UTC+2, Joseph Lust wrote:

Jeremy,

A less than glamorous way to apply CSS changes that are either not exposed, or not supported (i.e. CSS3) are to do it yourself at load time.

For example, in the constructor (if you're extending) or directly after the instantiation of your DataGrid, walk its DOM and get that <th> element you're looking for and apply that CSS style explicitly (element.setAttribute("border-collapse","collapse")).

Yes, getTableHeadElement().getParentElement().getStyle().setProperty("borderCollapse", "collapse"); should do it.

(you'd probably have to do it for getTableBodyElement().getParentElement() too to make sure the tables are aligned).

And because those methods are protected, you have to extend DataGrid, or call them through JSNI to bypass access control.

 

[Jeremy Ross]

Thanks for the recommendation. This solved my problem.

On a related note, I'm providing my own Resource implementation:

public interface DataGridResources extends DataGrid.Resources {

    @Override

    @Source({ "WorksheetDataGrid.css" })

    DataGrid.Style dataGridStyle();

}

This works well, with the exception that the widget seems to not use the dataGridWidget style class. It simply doesn't show up anywhere in the output. I'd think the outermost element in the HTML would reference this style class. Is this a bug or am I doing something wrong?