4 Replies Latest reply on Aug 19, 2010 10:18 PM by selvakumar p

    Use togglebuttonbar as itemrenderer for column

    Jokken123

      Hi,

       

      I want to use a ToggleButtonBar as an itemrenderer for a column in an advanceddatagrid. I really don't know how to implement this. The problem is how to initialize the buttonbar with the value in the column and how to store the data back to the dataprovider (after click on one of the buttuns). Here is as far as I got, does anybody have an example or advice on how to achieve this?

       

      Thank you

       

      <?xml version="1.0"?>

      <mx:Application

       

       

      xmlns:mx="http://www.adobe.com/2006/mxml">

       

       

       

      <mx:Script>

      <![CDATA[

       

       

      import mx.collections.ArrayCollection;

       

      [

      Bindable]

       

      public var initDG:ArrayCollection = new ArrayCollection([

      { Company:

      'Acme', Contact: 'Bob Jones', Sex: 'M',

      Phone:

      '413-555-1212', Date: '5/5/05'},

      { Company:

      'Allied', Contact: 'Jane Smith', Sex: 'F',

      Phone:

      '617-555-3434', Date: '5/6/05'},

      { Company:

      'Test1', Contact: 'Test1', Sex: null,

      Phone:

      'Test1', Date: '5/6/05'},

      { Company:

      'Test2', Contact: 'Test2', Sex: 'M',

      Phone:

      'Test2', Date: '5/6/05'},

      { Company:

      'Test3', Contact: 'Test3', Sex: 'F',

      Phone:

      'Test3', Date: '5/6/05'},

      { Company:

      'Test4', Contact: 'Test4', Sex: null,

      Phone:

      'Test4', Date: '5/6/05'}

      ]);

       

      [

      Bindable]

       

      public var sexDG:ArrayCollection = new ArrayCollection([

      { code:

      'M', label: 'Male'},

      { code:

      'F', label: 'Female'}

      ]);

       

      ]]>

       

      </mx:Script>

       

       

       

      <mx:Panel paddingTop="10" paddingBottom="10"

      paddingLeft="

      10" paddingRight="10"

       

      >

       

       

       

      <mx:AdvancedDataGrid id="myGrid" dataProvider="{initDG}"

      height="

      150" sortableColumns="false" sortExpertMode="true">

       

      <mx:columns>

       

       

      <mx:AdvancedDataGridColumn dataField="Company"

       

      />

       

       

      <mx:AdvancedDataGridColumn dataField="Contact"

       

      />

       

       

      <mx:AdvancedDataGridColumn dataField="Phone"

       

      />

       

      <mx:AdvancedDataGridColumn dataField="Date"

       

      />

       

      <mx:AdvancedDataGridColumn dataField="Sex" width="300">

       

      <mx:itemRenderer>

       

      <mx:Component>

       

      <mx:ToggleButtonBar dataProvider="{outerDocument.sexDG}" toggleOnClick="true"/>

       

      </mx:Component>

       

      </mx:itemRenderer>

       

      </mx:AdvancedDataGridColumn>

       

      </mx:columns>

       

      </mx:AdvancedDataGrid>

       

      </mx:Panel>

      </mx:Application>