Flex Vertical Datagrid

Question

Can i have a datagrid that displays data vertically instead of horizontally ?

for example, if this is my dataprovider:

array('firstname':'John','lastname':'Doe'),
array('firstname':'Jack','lastname':'Jill')

I want the data to be displayed like this :

Fields        Value1    Value2
Firstname     John      Jack
Lastname      Doe       Jill

and so on .... whats the best way to achieve this .. If i have to extend the datagrid component, please explain how ..

Assuming you don't need sortable headers (or whatever the equivalent to a header is on the left hand side) you could get similar functionality out of a DataGroup and a custom ItemRenderer. — Jason Towne
– Jason Towne, Commented Jun 2, 2011 at 17:25
could u post some code to help me understand how to do that ? — Lin
– Lin, Commented Jun 3, 2011 at 3:23

Jonathan Rowny · Accepted Answer · 2011-06-06 20:15:11Z

So this is a hack... but it turns out you can't easily change the flow of the spark datagrid. From what I can tell, you'd need to override just about every component inside it and it'd take a long time. The DataGrid uses its own layout and it seems very set on the subject of 1 row = 1 piece of data.

So... commence hack:

<s:DataGrid rotation="270">
  <s:columns>
    <s:ArrayList>
      <s:GridColumn itemRenderer="unrotate" headerRenderer="headerUnrotate"/>
      <s:GridColumn itemRenderer="unrotate" headerRenderer="headerUnrotate"/>
    </s:ArrayList>
  </s:columns>
</s:DataGrid>

Okay... what did I do? I just rotate the whole datagrid. How do I fix it so we don't have to tilt your head? I un-rotate each column in the itemrenderer. HOLY HACK batman.

here's the item renderer unrotate:

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">

<fx:Script>
    <![CDATA[
        override public function prepare(hasBeenRecycled:Boolean):void {
            lblData.text = data[column.dataField]
        }
    ]]>
</fx:Script>

<s:Label id="lblData" top="9" left="7" rotation="90"/>

</s:GridItemRenderer>

The header code is similar, just rotate 90 to get back to where we started. I know this solution is far from perfect but it's the best I could think of without completely messing with the DataGrid class

You probably also need to override the skin to provide a WIDER header... which is actually a TALLER header since we're rotated 270 degrees. Other then that it should actually work okay...

Collectives™ on Stack Overflow

Flex Vertical Datagrid

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related