2 Replies Latest reply on Sep 18, 2007 8:40 PM by aceinc

    DatGrid with multiple row definitions...

    aceinc
      I am converting an app to Flex from ASP/HTML. In the HTML I have a table that displays a few static fields, and a long text field. The way it currently works, I put the static data on a <TR> with a number of <TD>s, and the long text goes in its own <TR> with one <TD colspan="5">, using <TH>, a <div> and some CSS magic I have a nice table that displays the data and scrolls as needed.

      What is the best way of accomplishing this in flex?

      Specifically what I need is;

      1) A static Header row.
      2) Multiple two row pairs;
      ---a) Row 1 contains 5 smallish fields
      ---b) Row 2 contains a variable length text area that can get quite large (100s of words)
      3) 2)a & b need to be treated as a single unit for style and selection purposes.
      4) There will be no direct editing of the data in the Grid.

      Datagrid doesn't seem to have this capability by default. If I am missing something regarding datagrid point me to the docs where it describes how to do this.

      Otherwise if somebody has a component, or a blog about how to do this I would be appreciative.

      Paul
        • 1. Re: DatGrid with multiple row definitions...
          JKohn99 Level 1
          You may want to consider not using a grid. You might look into creating a custom component and using a mx:repeater or an itemRendererer in a list.

          • 2. Re: DatGrid with multiple row definitions...
            aceinc Level 1
            JKohn99,

            Yes both of those are the right approach, depending on what you would like to do. Below is some sample code I used to learn how to do what I needed to do.

            The first part uses a repeater, which I was able to accomplish quickly due to some good examples. The second part uses a list component with an item renderer, while it is not much different, took me quite a while to figure out since I couldn't find examples similar to what I needed to do.

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
            <mx:Script>
            <![CDATA[
            [Bindable]
            public var myArray:Array=[1,2,3,4];
            ]]>
            </mx:Script>

            <mx:ArrayCollection id="myAC" source="{myArray}"/>
            <mx:VBox x="10" y="112" width="520" height="150" paddingBottom="0" paddingLeft="0"
            paddingRight="0" paddingTop="0" verticalGap="0" horizontalGap="0">
            <mx:Grid x="0" label="testGrid" borderStyle="solid"
            horizontalGap="0" verticalGap="0" borderThickness="1" paddingLeft="0" paddingRight="0"
            paddingTop="0" paddingBottom="0" dropShadowEnabled="false" autoLayout="false">
            <mx:GridRow>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Text text="header 1"/>
            </mx:GridItem>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Text text="header 2"/>
            </mx:GridItem>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Text text="header 3"/>
            </mx:GridItem>
            <mx:GridItem width="16" height="100%" borderStyle="solid" borderThickness="1">
            </mx:GridItem>
            </mx:GridRow>
            </mx:Grid>
            </mx:VBox>
            <mx:VBox x="10" y="133" width="468" height="150" paddingBottom="0" paddingLeft="0" paddingRight="0"
            paddingTop="0" verticalGap="0" horizontalGap="0">
            <mx:Repeater id="myrepx" dataProvider="{myAC}">
            <mx:Grid x="0" label="testGrid" borderStyle="solid"
            horizontalGap="0" verticalGap="0" borderThickness="1" paddingLeft="0" paddingRight="0" paddingTop="0"
            paddingBottom="0" dropShadowEnabled="false" autoLayout="false">
            <mx:GridRow>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Label id="Label5" text="This is loop #{myrepx.currentItem} Column A"/>
            </mx:GridItem>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Label id="Label6" text="This is loop #{myrepx.currentItem} Column B"/>
            </mx:GridItem>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Label id="Label7" text="This is loop #{myrepx.currentItem} Column C"/>
            </mx:GridItem>
            </mx:GridRow>
            <mx:GridRow width="100%" height="100%">
            <mx:GridItem colSpan="3" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Label id="Label8" text="This is loop #{myrepx.currentItem} Row 2"/>
            </mx:GridItem>
            </mx:GridRow>
            </mx:Grid>
            </mx:Repeater>
            </mx:VBox>

            <mx:VBox x="10" y="388" width="520" height="150" paddingBottom="0" paddingLeft="0"
            paddingRight="0" paddingTop="0" verticalGap="0" horizontalGap="0">
            <mx:Grid x="0" label="testGrid" borderStyle="solid"
            horizontalGap="0" verticalGap="0" borderThickness="1" paddingLeft="0" paddingRight="0"
            paddingTop="0" paddingBottom="0" dropShadowEnabled="false" autoLayout="false">
            <mx:GridRow>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Text text="header 1"/>
            </mx:GridItem>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Text text="header 2"/>
            </mx:GridItem>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Text text="header 3"/>
            </mx:GridItem>
            <mx:GridItem width="18" height="100%" borderStyle="solid" borderThickness="1">
            </mx:GridItem>
            </mx:GridRow>
            </mx:Grid>
            </mx:VBox>

            <mx:List id="xList" dataProvider="{myAC}" x="10" y="409" height="148" width="470"
            paddingBottom="0" paddingLeft="0" paddingRight="0"
            paddingTop="0">
            <mx:itemRenderer>
            <mx:Component>
            <mx:Grid x="0" label="testGrid" borderStyle="solid"
            horizontalGap="0" verticalGap="0" borderThickness="1"
            paddingLeft="0" paddingRight="0" paddingTop="0"
            paddingBottom="0" dropShadowEnabled="false" autoLayout="false">
            <mx:GridRow>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Label id="Label15" text="This is loop #{data} Column A"/>
            </mx:GridItem>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Label id="Label16" text="This is loop #{data} Column B"/>
            </mx:GridItem>
            <mx:GridItem width="150" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Label id="Label17" text="This is loop #{data} Column C"/>
            </mx:GridItem>
            </mx:GridRow>
            <mx:GridRow width="100%" height="100%">
            <mx:GridItem colSpan="3" height="100%" borderStyle="solid" borderThickness="1">
            <mx:Label id="Label18" text="This is loop #{data} Row 2"/>
            </mx:GridItem>
            </mx:GridRow>
            </mx:Grid>
            </mx:Component>
            </mx:itemRenderer>
            </mx:List>
            </mx:Application>