Grid questions regarding width and height (7.4 beta 3)

Hi!

First of all I want to thank you for organziging gwt.create - it was really a great event!
As a result of the conference I immediately wanted to try your new Grid-Widget using plain GWT. To do so I just downloaded/upgraded to beta 3 of Version 7.4 but somehow I’m facing problems which I guess are caused by not using it correctly.

[code]
myGrid = new Grid();
myGrid.setWidth(“100%”);

    myGrid.addColumn(getColumn1());
    myGrid.addColumn(getColumn2());
    myGrid.addColumn(getColumn3());
    myGrid.addColumn(getColumn4());
    
    myGrid.setDataSource(createMyDataSource());

    dataPanel.add(myGrid);

[/code]dataPanel is a simple GWT-HTMLPanel.
For Column 3 I’m calling column.setExpandRatio(2) - for 1 and 4 column.setExpandRatio(1) - for none of the columns I’m setting any onther width information.

The result of this simple test is a table with minimal with and a fixed height of 400px (even though I currently only have 1 record in the table).

So based on this - could you please point me into a direction how I can get following result:

  • The width of the table (and not only the surrounding DIV) is 100% of available space
  • The width of each column uses as much space as possible (based on the given ratio)
  • The height of the table is not fixed with 400px - but maybe just has a maximum height of 400px

Find below also the generated DOM:

<div>
    <div class="v-grid" tabindex="0" style="height: 400px; width: 100%;">
        <div tabindex="-1" class="v-grid-scroller v-grid-scroller-vertical" style="width: 17px; height: 380px; top: 20px; display: none;">
            <div style="width: 17px; height: 20px;"/>
        </div>
        <div tabindex="-1" class="v-grid-scroller v-grid-scroller-horizontal" style="height: 17px; width: 1140px; left: 0px; display: none;">
            <div style="height: 17px; width: 40px;"/>
        </div>
        <div class="v-grid-tablewrapper" style="height: 400px; width: 1140px;">
            <table>
                <thead class="v-grid-header">
                    <tr class="v-grid-row" style="width: 40px;">
                        <th class="v-grid-cell" colspan="1" style="height: 20px; width: 10px;">_Date</th>
                        <th class="v-grid-cell" colspan="1" style="height: 20px; width: 10px;">_State</th>
                        <th class="v-grid-cell" colspan="1" style="height: 20px; width: 10px;">_Text</th>
                        <th class="v-grid-cell" colspan="1" style="height: 20px; width: 10px;">_Location</th>
                    </tr>
                </thead>
                <tbody class="v-grid-body" style="margin-top: 20px; transform: translate3d(0px, 0px, 0px);">
                    <tr class="v-grid-row v-grid-row-focused v-grid-row-has-data" style="width: 40px; transform: translate3d(0px, 0px, 0px);">
                        <td class="v-grid-cell v-grid-cell-focused" colspan="1" style="height: 20px; width: 10px;">date goes here</td>
                        <td class="v-grid-cell" colspan="1" style="height: 20px; width: 10px;"/>
                        <td class="v-grid-cell" colspan="1" style="height: 20px; width: 10px;">some more information here</td>
                        <td class="v-grid-cell" colspan="1" style="height: 20px; width: 10px;">location</td>
                    </tr>
                </tbody>
                <tfoot class="v-grid-footer"/>
            </table>
        </div>
        <div class="v-grid-header-deco" style="width: 17px; height: 20px; display: none;"/>
        <div class="v-grid-footer-deco" style="width: 17px; display: none;"/>
        <div class="v-grid-horizontal-scrollbar-deco" style="height: 17px; display: none;"/>
    </div>
</div>

Used Browser: Chrome 40

Thanks for your support!

Kind regards,
david

What does your data source implementation look like? I remember having some sizing issues while hacking together https://github.com/Artur-/unicode-grid, related to the fact that I never called dataChangeHandler.dataAvailable in my data source. This apparently caused Grid to think data fetching was still going on and deferring size calculations indefinitely.

Hi!

Thanks for your reply - actually I’m not calling dataChangeHandler.dataAvailable explicitly - but in fact I think I’m not even able to do so … I’m using AbstractRemoteDataSource and as far as I see there is only the callback.onResponse() method - which should call the dataAvailable() method internally from within setRowData()??

So my datasource basically looks like shown below:

    private DataSource<MyBean> createMyBeanDataSource(){
        return new AbstractRemoteDataSource<MyBean>() {

            @Override
            protected void requestRows(final int firstRowIndex, final int numberOfRows,
                    final com.vaadin.client.data.AbstractRemoteDataSource.RequestRowsCallback<MyBean> callback) {
                myBeanDataSource.retrieveData(firstRowIndex, numberOfRows, new IDataSourceCallback<List<MyBean>>() {

                    @Override
                    public void onDataRetrieved(final int totalSize, final List<MyBean> data) {
                        callback.onResponse(data, totalSize);
                    }

                    @Override
                    public void onDataRetrieveFailed(final BasicException exception) {
                        // TODO handle the exception
                        Window.alert("Ooops...");
                    }
                });
            }

            @Override
            public Object getRowKey(final MyBean row) {
                return row.getId();
            }
        };
    }

Kind regards,
David

I just start using vaadin 7.4.2 version, but I am facing issues Grid.
When ever I try to load the page where we are using Grid feature, it gives me an error that widgetset does not contain the implementation for com.vaadin.ui.Grid.

Any idea for this

It seems you didn’t recompile your widgetset ( so you are still using an old one, in which Grid didn’t exist) …could be it?