GWT - DataGrid table with Filter in the same view / panel

Question

I'm trying to add a DataGrid on my view. I know that a DataGrid can only stay in a Layout Panel, because of the ProvidesResize and RequiresResize interfaces.

The thing is, I want to add a filter on top of the DataGrid Table, and the filter can't have a fixed height, it could be bigger or smaller.

No Layout Panel would accept more then one child to be resized, but the LayoutPanel itself. But still, each layer needs a height to be set in percentage, and that's not OK as well.

If I change the DataGrid with a CellTable and then add both in a Flow Panel, the problem would be solved, but the table has to be scrollable.

What I would need is a FlowLayoutPanel but there is no such Panel in GWT

I was thinking that the only way would be to try to create a custom panel which would implement ProvidesResize and RequiresResize interfaces.

This is how it looks like using a LayoutPanel :

    <g:layer left="2%" right="68%" top="2%" bottom="93%">                                   
        <g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
    </g:layer>

    <g:layer left="2%" right="68%" top="9%" bottom="56%">                                   
        <g:SplitLayoutPanel>
            <g:center>
                <g:HTMLPanel>
                    <g:FlowPanel ui:field="criteriaPanel" visible="false" />
                    <g:FlowPanel>
                        <g:Button ui:field="refresh">
                            <ui:text from="{text.refreshButtonCaption}" />
                        </g:Button>
                    </g:FlowPanel>
                </g:HTMLPanel>
            </g:center>
        </g:SplitLayoutPanel>
    </g:layer>

    <g:layer left="2%" right="2%" top="45%" bottom="5%">                                    
        <g:SplitLayoutPanel>
            <g:center>
                <c:DataGrid ui:field='table' />
            </g:center>
        </g:SplitLayoutPanel>
    </g:layer>

    <g:layer left='2%' right='2%' top="95%" bottom="0%">                                    
        <g:HTMLPanel>
            <table style="width:100%">
                <tr>
                    <td align='center'>
                        <c:SimplePager ui:field='pager' />
                    </td>
                </tr>
            </table>
        </g:HTMLPanel>
    </g:layer>

</g:LayoutPanel>

Can anyone help me with this ? Many thanks in advance.

Answer 1

If you don't care about very old browsers, use flexbox CSS layout model - I use it with DataGrid (and for everything else) all the time.

Then you simply add display: flex; to your container (i.e. what you used LayoutPanel for), and then set flex-grow: 1 on your DataGrid. This will tell DataGrid to take all the available space after other widgets in the container have been rendered.

P.S. For the past few years I try to avoid LayoutPanels as much as possible for performance reasons, especially on mobile devices.

Answer 2

looks like the CSS did the trick. Many thanks. This is how it looks like :

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:g="urn:import:com.google.gwt.user.client.ui" 
                xmlns:c="urn:import:com.google.gwt.user.cellview.client">

    <ui:with field='res' type='com.vsg.vraweb.client.resource.Resources' />
    <ui:with field='text' type='com.vsg.vralang.client.GlobalConstants' />


    <!-- 

        CSS Tricks tutorial : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

        1) 'display: flex;' - enables a flex context for all its direct children. 

        2) 'flex-direction: row | row-reverse | column | column-reverse;' - This establishes 
        the main-axis, thus defining the direction flex items are placed in the flex 
        container.

        3) flex-grow: <number>; - This defines the ability for a flex item to grow if necessary. 
    -->

    <ui:style>
        .container {
            display: flex;
            flex-direction: column;
        }

        .dataGrid {  
            width: 100%;
            flex-grow: 1;
        }
    </ui:style>

    <g:FlowPanel addStyleNames="{style.container}">
        <g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
        <g:HTMLPanel>
            <g:FlowPanel ui:field="criteriaPanel" visible="false" />
            <g:FlowPanel>
                <g:Button ui:field="refresh">
                    <ui:text from="{text.refreshButtonCaption}" />
                </g:Button>
            </g:FlowPanel>
        </g:HTMLPanel>
        <c:DataGrid ui:field='table' addStyleNames="{style.dataGrid}"/>
        <g:HTMLPanel>
            <table style="width:100%">
                <tr>
                    <td align='center'>
                        <c:SimplePager ui:field='pager' />
                    </td>
                </tr>
            </table>
        </g:HTMLPanel>
    </g:FlowPanel>

</ui:UiBinder>