2 Replies Latest reply on Jan 8, 2009 11:48 PM by amol bhandwale

    Radiogroups and Datagrids

    Rand1234
      I am trying to have a radio group for each line of data. The choice is either "yes" or "no". For instance.

      Datagrid

      Name Send Email?
      Mike ( * ) Yes ( ) No
      John ( * ) Yes ( ) No
      Al ( ) Yes ( * ) No

      I have tried creating ItemRenderers for this, but all I can do is get a radiobutton that spans the column, i.e., you can only select one item in the column for the radio button.

      <mx:RadioButtonGroup id="radiogroup1"/>
      <mx:DataGridColumn dataField="email" editable="true" editorDataField="selected" rendererIsEditor="true">
      <mx:itemRenderer>
      <mx:Component>
      <mx:RadioButton groupName="radiogroup1" label="yes">
      </mx:RadioButton>
      </mx:Component>
      </mx:itemRenderer>

      This code doesn't work since I need 2 radio button choices on each row, and selecting between the two instead of across the column.

      I could do this easily in HTML. Is it possible in Flex? Or perhaps someone could recommend a better approach to this problem?

      Thank you,
      Mike

        • 1. Re: Radiogroups and Datagrids
          rtalton Level 4
          I only see one radio button in your item renderer?
          Inside the component, insert a HBox and put two radio buttons inside that. Adjust the HBox paddings, gaps, radio button sizes, label sizes, etc. Maybe adjust column width, row height.
          • 2. Re: Radiogroups and Datagrids
            amol bhandwale
            try this example

            <?xml version="1.0"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init();">
            <mx:Script>
            <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            [Bindable]
            public var arrColl:ArrayCollection = new ArrayCollection();
            public function init():void
            {
            arrColl.addItem({name:"Jan1", sendmail:'No'});
            arrColl.addItem({name:"Jan2", sendmail:'No'});
            arrColl.addItem({name:"Jan3", sendmail:'No'});
            arrColl.addItem({name:"Jan4", sendmail:'No'});
            arrColl.addItem({name:"Jan5", sendmail:'No'});
            }
            public function alertArrColl():void
            {
            var str:String = "";
            for(var cnt:int = 0 ; cnt<arrColl.length ; cnt++)
            {
            str = str + arrColl.getItemAt(cnt).name + " " + arrColl.getItemAt(cnt).sendmail + '\n';
            }
            Alert.show(str);
            }
            ]]>
            </mx:Script>
            <mx:Panel title="RadioButtonGroup Render In Datagrid Example" height="75%" width="75%"
            paddingTop="10" paddingLeft="10">
            <mx:DataGrid width="358" height="209" dataProvider="{arrColl}">
            <mx:columns>
            <mx:DataGridColumn headerText="Send Email" dataField="name">
            <mx:itemRenderer>
            <mx:Component>
            <mx:HBox horizontalGap="3">
            <mx:Script>
            <![CDATA[
            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
            private function handleCard(event:ItemClickEvent):void {
            data.sendmail = sendOption.selectedValue;
            }
            ]]>
            </mx:Script>
            <mx:Label width="100%" color="blue"
            text="{data.name}"/>
            <mx:RadioButtonGroup id="sendOption" itemClick="handleCard(event);"/>
            <mx:RadioButton groupName="sendOption" id="yes" value="Yes" label="Yes" />
            <mx:RadioButton groupName="sendOption" id="no" value="No" label="NO" />
            </mx:HBox>
            </mx:Component>
            </mx:itemRenderer>
            </mx:DataGridColumn>
            </mx:columns>
            </mx:DataGrid>
            <mx:Button label="Alert arrColl" click="alertArrColl()"/>
            </mx:Panel>
            </mx:Application>

            Thanks,
            Amol