p_mcp
p_mcp

Reputation: 2791

Datagrids on Flex Mobile

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!

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)!enter image description here

Upvotes: 7

Views: 5261

Answers (2)

Vijendra
Vijendra

Reputation: 1

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

Upvotes: 0

J_A_X
J_A_X

Reputation: 12847

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.

Upvotes: 8

Related Questions