1 Reply Latest reply on Mar 1, 2011 9:06 PM by Shongrunden

    Loading controls in Datagroup

    Flex Rock Level 1

      Hi,

              I have a Datagroup  in which i have an ItemRenderer of  Label and HRule. The length of dataprovider is  4. So label and Hrule appears four times. But i need the Hrule to be  appeared only three times.

       

      example.

       

      I need the layout to be like this.

      Layout.jpg

       

      Regards,

      Jayagopal.

        • 1. Re: Loading controls in Datagroup
          Shongrunden Adobe Employee

          You can use the itemIndex property of ItemRenderer and compare it against the length of the DataGroup's dataProvider.

           

          Here is a simple example:

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark">

           

              <s:DataGroup width="100">

                  <s:layout>

                      <s:VerticalLayout gap="0" horizontalAlign="justify" />

                  </s:layout>

                  <s:dataProvider>

                      <s:ArrayList>

                          <fx:String>0</fx:String>

                          <fx:String>1</fx:String>

                          <fx:String>2</fx:String>

                          <fx:String>3</fx:String>

                      </s:ArrayList>

                  </s:dataProvider>

                  <s:itemRenderer>

                      <fx:Component>

                          <s:ItemRenderer>

                              <fx:Script>

                                  <![CDATA[

                                      import spark.components.DataGroup;

           

                                      override public function set data(value:Object):void {

                                          super.data = value;

                                          if (!data)

                                              return;

           

                                          // set the Label text

                                          lbl.text = data as String;

           

                                          // find the number of items in the dataProvider

                                          var d:DataGroup = owner as DataGroup;

                                          var numItems:int = d.dataProvider.length;

           

                                          // only show the separator if its not the last item

                                          if (itemIndex == numItems - 1){

                                              separator.visible = false;

                                          } else {

                                              separator.visible = true;

                                          }

                                      }

                                  ]]>

                              </fx:Script>

                              <s:Label id="lbl" />

                              <s:Rect id="separator" width="100%" height="1" bottom="0">

                                  <s:fill>

                                      <s:SolidColor color="black" />

                                  </s:fill>

                              </s:Rect>

                          </s:ItemRenderer>

                      </fx:Component>

                  </s:itemRenderer>

              </s:DataGroup>

           

          </s:Application>