DataGrid vs CellTable

[Hamzeh]

Hello,
Can anyone tell me what is the difference between DataGrid and
CellTable? When should we use which one?
It seems GWT documentations uses CellTable in DataGrid API page as an
example (http://google-web-toolkit.googlecode.com/svn/javadoc/latest/
com/google/gwt/user/cellview/client/DataGrid.html).
Are they same?
Thanks.

[Thomas Broyer]

DataGrid and CellTable both display data in similar ways; but DataGrid has fixed column headers with scrollable content (have a look at the Showcase: http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellTable vs. http://gwt.google.com/samples/Showcase/Showcase.html#!CwDataGrid )

Note that DataGrid comes with a few constraints: it's a RequiresResize so it must be put inside a ProvidesResize widget or be explicitly sized, and it has fixed-width columns.

[Thomas Broyer]

On Sunday, December 2, 2012 1:29:22 AM UTC+1, Tony B wrote:

So does this means they cannot be used interchangeably?  For instance, I have a table.  When I define it as a "CellTable", it works fine.  But when I simple change it to a DataGrid ( no other changes ), it does not work.

"Does not work" is not really helpful.

 

Your comments suggest that I need to do some extra steps for DataGrid.  I am just trying to confirm my understanding.  Thanks

• CellTable example:

private AbstractCellTable<FacilityModel> facilityTable;
facilityTable = new CellTable<FacilityModel>();

• DataGrid example:

private AbstractCellTable<FacilityModel> facilityTable;
facilityTable = new DataGrid<FacilityModel>();

As stated above, the ONLY difference is the creation statement, which I highlighted in yellow above.  Thanks.

On Saturday, December 31, 2011 5:38:52 AM UTC-5, Thomas Broyer wrote:

DataGrid and CellTable both display data in similar ways; but DataGrid has fixed column headers with scrollable content (have a look at the Showcase: http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellTable vs. http://gwt.google.com/samples/Showcase/Showcase.html#!CwDataGrid )

Note that DataGrid comes with a few constraints: it's a RequiresResize so it must be put inside a ProvidesResize widget or be explicitly sized, and it has fixed-width columns.

So, which is the parent widget of facilityTable?

To read more about RequiresResize/ProvidesResize, see https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#Resize 

[Tony B]

Nothing fills in, no values go into the table, it is empty.  Thus "does not work".  The only difference is the creation of the object.

[Tony B]

Ooops, missed your second question, about the parent widget.  Here is the path:
FlowPanel -> WidgetList -> DataGrid

Your comments above about the contraints are what made me ask my question in the first place.  I even set the size of the DataGrid to 100% on the hunch that that would meet your rule that it must be "explicitly sized".  Granted,  I am not sizing the columns, which you also mention.  Regardless, if my understanding is correct, in order to use DataGrid and CellTable interchangeably, I would have to make some changes.

On Sunday, December 2, 2012 4:26:24 PM UTC-5, Thomas Broyer wrote:

[Thomas Broyer]

On Monday, December 3, 2012 12:05:49 AM UTC+1, Tony B wrote:

Ooops, missed your second question, about the parent widget.  Here is the path:
FlowPanel -> WidgetList -> DataGrid

Your comments above about the contraints are what made me ask my question in the first place.  I even set the size of the DataGrid to 100% on the hunch that that would meet your rule that it must be "explicitly sized".

100% isn't reliable. RequiresRzsize widgets have to be informed when their size change, so you have to give them a size that won't change on your behalf (I think EMs and EXs will be detected –i.e. when the user changes his browser font settings–, though probably not by each and every RequiresResize widget; better stick with pixels).

[Tony B]

Well, that makes sense, I guess.  Granted, I don't know what size to expect, thus the percentage :-).  I cannot just assume a PC browser, but also need to plan for mobile devices.


There is a really good example out there ( here ).  Maybe I should just rework my code to mimic this example more closely.  Maybe that will help me wrap my head around things.

It looks like my assumption was right: CellTable and DataGrid are not, strictly speaking, interchangeable ( not without extra work ).  To bad.

Thanks.

Tony

[Chris Lercher]

The 100% won't help you, because the FlowPanel (which contains your DataGrid as I understand it) has a height of 0 unless you fill it with widgets that mount their own height.

In other words, you are creating a cycle: The FlowPanel asks its children for the height they need, and the child (DataGrid) conversely asks the parent FlowPanel for its height. Obviously, this doesn't work, and in CSS, it always ends up with a height of 0 (not a special GWT thing).

It's not, that DataGrid and CellTable aren't interchangeable. To the contrary: They are highly interchangeable, but they differ basically in exactly this point: CellTables span up their own height from "inside out", whereas DataGrids require the size from "outside in".

(Note: Almost the only real reason for the requiresResize() is, that DataGrid uses a HeaderPanel, which performs one of the few JavaScript tricks still needed today, because CSS still can't do HeaderPanel-like layouts by itself.)

[Tony B]

Thanks so much.  That makes a lot of sense.  So I just need to experiment with the data grid height.

I would think using using "com.google.gwt.user.client.ui.ScrollPanel" instead would fix this, but it does not.  I am still going to play with various height values, but just seemed weird because ScrollPanel implements ProvidesResize.

Tony

[Thomas Broyer]

On Monday, December 3, 2012 10:58:03 PM UTC+1, Tony B wrote:

Thanks so much.  That makes a lot of sense.  So I just need to experiment with the data grid height.

I would think using using "com.google.gwt.user.client.ui.ScrollPanel" instead would fix this, but it does not.  I am still going to play with various height values, but just seemed weird because ScrollPanel implements ProvidesResize.

…and RequiresResize, so you just moved the problem to another widget.

[Tony B]

Yep, that makes sense as well.  I finally got it working by explicitly defining the height ( 100px, for instance ).  I guess I need to use something like "ResizeLayoutPanel" to get around such issues.  we shall see.


Thanks again.  I do believe I am getting it.

Tony