2 Replies Latest reply on Jul 3, 2009 8:44 AM by Eliezer Reis

    DataGrid Using an item renderer that spans an entire row

    Eliezer Reis

      Anyone know how can I do this using DataGrid?

        • 1. Re: DataGrid Using an item renderer that spans an entire row
          *Prashant Shelke* Level 4

          Width for Outermost container you can give as 100%

          • 2. Re: DataGrid Using an item renderer that spans an entire row
            Eliezer Reis Level 1

            I dont understand how Can I do it. Below I have a source code that I'm working with this case. I have 2 columns and I would like when i click in combobox my item renderer fill all rows.

             

            Look I have this code (Main Application and Renderer):

             

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/halo">
                 
                 <mx:transitions>
                      <mx:Transition fromState="*" toState="*">
                           <mx:Resize target="{this}"/>
                      </mx:Transition>
                 </mx:transitions>
                 
                 <mx:states>
                      <mx:State name="normal"/>
                      <mx:State name="expanded"/>
                 </mx:states>
                 
                 <fx:Script>
                 <![CDATA[
                      import mx.collections.ArrayCollection;
                      [Bindable]
                      public var ac:ArrayCollection;
                      
                      private function changeState(event:Event) : void {
                           
                           if( event.target.selected ) 
                                currentState = "expanded";
                           else
                                currentState = "normal";
                      }
                      override public function set data(value:Object) : void {
                           super.data = value;
                           ac = new ArrayCollection(value.models);
                      }
                 ]]>
                 </fx:Script>
                 
                 <mx:CheckBox label="{data.title}" click="changeState(event)"/>
                 <mx:List dataProvider="{ac}" y="20" width="100%" includeIn="expanded"/>
                 
            </mx:Canvas>
            

             

            <s:Application 
                 xmlns:fx="http://ns.adobe.com/mxml/2009"    
                 xmlns:mx="library://ns.adobe.com/flex/halo"     
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:ct="*"
                 height="100%" width="100%">
                 
                 <fx:Script>
                 <![CDATA[
                      import mx.collections.ArrayCollection;
                      
                      [Bindable]
                      public var dp:ArrayCollection = new ArrayCollection([ 
                      {title:"Ford", style: 'Modern', models:["Fusion","Taurus","Mustang"]},
                           {title:"Volkswagen",  style: 'Normal', models:["Passat","Jetta","Beetle", "Golf", "GTI"]},
                           {title:"Infiniti", style: 'Modern', models:["FX35","GX35","Q45","M35"]},
                           {title:"Audi",  style: 'Esport', models:["A3","A4","A6"]}
                           ]);
                 ]]>
                 </fx:Script>    
                 
                 <mx:DataGrid dataProvider="{dp}" variableRowHeight="true" height="100%" width="100%">
                      <mx:columns>
                           <mx:DataGridColumn dataField="title" headerText="title" itemRenderer="DetailItem"/>
                           <mx:DataGridColumn dataField="style" headerText="style" />
                      </mx:columns>
                 </mx:DataGrid>
            </s:Application>