DataGrid Using an item renderer that spans an entire row

Question

Anyone know how can I do this using DataGrid?

Answer 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>