Datagrids on Flex Mobile

Question

Adobe tells us to not use Datagrid on mobile devices. I'm creating a Blackberry Playbook application that has more screen space to potentially display a table of data. So a few questions arise!

• If I shouldn't use DataGrid, what should I use? (List doesn't count because in my application I have 10's of tables each with different numbers of columns and column widths)

• Ok, if I have to use a Datagrid, how can I set the size of it to show exactly all the data? For example, some tables have rows of different lengths, so requestedRowCount='-1' doesn't seem to work (See example below)

The Code

    <s:DataGrid  requestedRowCount="-1" requestedColumnCount="-1" variableRowHeight="true"  styleName="dataGrid" id="partiesGrid" dataProvider="{arr1}"  skinClass="skins.DataGridSkin" click="navigator.pushView(view.AssessmentInvolvementEditView)">
        <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="name" headerText="Name" width="150"/>
            <s:GridColumn dataField="role" headerText="Role" width="150"/>
            <s:GridColumn dataField="startdate" headerText="Start" width="100"/>
            <s:GridColumn dataField="enddate" headerText="End" width="100"/>
            <s:GridColumn dataField="presponsibility" headerText="Response" width="150"/>
            <s:GridColumn dataField="pcarer" headerText="Carer" width="110"/>
            <s:GridColumn dataField="kworker" headerText="Worker" width="110"/>
            <s:GridColumn dataField="kteam" headerText="Team" width="110"/>
        </s:ArrayList>
        </s:columns>
    </s:DataGrid>`

The Result (Notice how the height doesnt fit the 3 rows, it adds space at the bottom)!

Jube

Answer 1

It's not impossible to make the datagrid show only the data that's added, but it's not what I would do, especially for a mobile application.

Personally, I would use a DataGroup (using virtualLayout=true) wrapped in a Scroller set to height/width 100% (which would only show when the data 'overflows'). The DataGroups default settings to show all data. You'll have to create your own item renderers for the data and can create your own 'headers'.

By doing this, you're removing a lot of functionality from the grid, but it's something that's rarely used in mobile applications. Plus, if you create the datagroup, you can add your own touch functionality and gestures to do things, while keeping the 'weight' of the grid low to give a good user experience.

Theadora

Answer 2

use width="100%" and height="100%"

Cutwater