6 Replies Latest reply on Aug 14, 2008 8:39 AM by nikos101

    I  want to put some radiobuttons in some of the datagrid cell colums

    nikos101 Level 2
      I am making a fancy form where I will be using a datagrid where users will be entering data to be passed to the server. I want to put some radiobuttons in some of the datagrid cell colums. Does anyone know how to do this?
        • 1. I  want to put some radiobuttons in some of the datagrid cell colums
          Karl_Sigiscar_1971 Level 3
          You need to create an MXML item renderer that contains a radio button. Then you want to set it to be the item renderer for each concerned column.

          An item renderer is a regular MXML file.

          You can either start with

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

          or

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

          Then create a script section in the item renderer and use the data property (this.data) in order to access the object of the current row.
          • 2. Re: I  want to put some radiobuttons in some of the datagrid cell colums
            nikos101 Level 2
            Thanks Karl for that advice but I am slightly unsure how to apply your code.

            How would I fit the radio buttons in this MXML into the datagrid?

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" >






            <mx:RadioButtonGroup id="radiogroup1"/>
            <mx:RadioButtonGroup id="radiogroup2"/>
            <mx:RadioButtonGroup id="radiogroup3"/>
            <mx:RadioButtonGroup id="radiogroup4"/>
            <mx:VBox verticalGap="12" horizontalAlign="center">
            <mx:HBox horizontalAlign="left">
            <mx:RadioButton groupName="radiogroup1" id="_1button1"/>
            <mx:RadioButton groupName="radiogroup1" id="_1button2"/>
            <mx:RadioButton groupName="radiogroup1" id="_1button3"/>
            <mx:RadioButton groupName="radiogroup1" id="_1button4"/>
            </mx:HBox>
            <mx:HBox>
            <mx:RadioButton groupName="radiogroup2" id="_2button1"/>
            <mx:RadioButton groupName="radiogroup2" id="_2button2"/>
            <mx:RadioButton groupName="radiogroup2" id="_2button3"/>
            <mx:RadioButton groupName="radiogroup2" id="_2button4"/>
            </mx:HBox>
            <mx:HBox>
            <mx:RadioButton groupName="radiogroup3" id="_3button1"/>
            <mx:RadioButton groupName="radiogroup3" id="_3button2"/>
            <mx:RadioButton groupName="radiogroup3" id="_3button3"/>
            <mx:RadioButton groupName="radiogroup3" id="_3button4"/>
            </mx:HBox>
            <mx:HBox>
            <mx:RadioButton groupName="radiogroup4" id="_4button1"/>
            <mx:RadioButton groupName="radiogroup4" id="_4button2"/>
            <mx:RadioButton groupName="radiogroup4" id="_4button3"/>
            <mx:RadioButton groupName="radiogroup4" id="_4button4"/>
            </mx:HBox>

            </mx:VBox>
            <mx:DataGrid y="355" x="125">
            <mx:columns>
            <mx:DataGridColumn headerText="Behaviour" dataField="col1"/>
            <mx:DataGridColumn headerText="Indicators" dataField="col2"/>
            <mx:DataGridColumn headerText="1" dataField="col3"/>
            <mx:DataGridColumn headerText="2" dataField="col4"/>
            <mx:DataGridColumn headerText="3" dataField="col5"/>
            <mx:DataGridColumn headerText="4" dataField="col6"/>
            <mx:DataGridColumn headerText="N/A" dataField="col7"/>
            </mx:columns>
            </mx:DataGrid>


            </mx:Application>
            • 3. Re: I  want to put some radiobuttons in some of the datagrid cell colums
              Karl_Sigiscar_1971 Level 3

              Example of setting an item renderer on a datagrid column:

              <mx:DataGridColumn id="maturityDate"
              dataField="maturityDate"
              itemRenderer="com.mycompany.core.view.itemrenderers.DRMaturityDateRenderer">
              </mx:DataGridColumn>
              • 4. Re: I  want to put some radiobuttons in some of the datagrid cell colums
                Karl_Sigiscar_1971 Level 3

                Concerning the script part of the item renderer, you want to make sure you do not access null data:

                <?xml version="1.0" encoding="utf-8"?>

                <mx:Label
                xmlns:mx=" http://www.adobe.com/2006/mxml"
                textAlign="center">

                <mx:Script>
                <![CDATA[

                private function set onDataChange(value:Object):void
                {
                // Ensure data is not null

                if(this.data)
                {
                {
                this.setStyle("color", "#AA0000");
                }
                else
                {
                this.setStyle("color", "#000000");
                }
                }
                }

                ]]>
                </mx:Script>

                <mx:Binding source="{ this.data }" destination="onDataChange" />

                </mx:Label>
                • 5. Re: I  want to put some radiobuttons in some of the datagrid cell colums
                  nikos101 Level 2
                  Thanks for your help again karl.

                  If you look at the following code, it produces 1 column of radio buttons that are grouped.

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#ffffff, #ffffff]">
                  <mx:Model id="model">
                  <items>
                  <item>
                  <col1>Row 1</col1>
                  <col2>ABCabc DEFdef</col2>
                  <col3>More content</col3>
                  <col4>Some content</col4>
                  <col5>ABCabc DEFdef</col5>
                  <col6>More content</col6>
                  </item>
                  <item>
                  <col1>Row 2</col1>
                  <col2>ABCabc DEFdef</col2>
                  <col3>Long content that will wrap</col3>
                  <col4>Some content</col4>
                  <col5>ABCabc DEFdef</col5>
                  <col6>More content</col6>
                  </item>
                  <item>
                  <col1>Row 3</col1>
                  <col2>ABCabc DEFdef</col2>
                  <col3>More content</col3>
                  <col4>Some content</col4>
                  <col5>ABCabc DEFdef</col5>
                  <col6>More content</col6>
                  </item>
                  <item>
                  <col1></col1>
                  <col2>ABCabc DEFdef</col2>
                  <col3>Long content that will wrap</col3>
                  <col4>Some content</col4>
                  <col5>ABCabc DEFdef</col5>
                  <col6>More content</col6>
                  </item>
                  <item>
                  <col1>Row 4</col1>
                  <col2>ABCabc DEFdef</col2>
                  <col3>Long content that will wrap</col3>
                  <col4>Some content</col4>
                  <col5>ABCabc DEFdef</col5>
                  <col6>More content</col6>
                  </item>
                  <item>
                  <col1>Row 5</col1>
                  <col2>ABCabc DEFdef</col2>
                  <col3>More content</col3>
                  <col4>Some content</col4>
                  <col5>ABCabc DEFdef</col5>
                  <col6>More content</col6>
                  </item>
                  <item>
                  <col1>Row 6</col1>
                  <col2>ABCabc DEFdef</col2>
                  <col3>Long content that will wrap</col3>
                  <col4>Some content</col4>
                  <col5>ABCabc DEFdef</col5>
                  <col6>More content</col6>
                  </item>
                  <item>
                  <col1>Row 7</col1>
                  <col2>ABCabc DEFdef</col2>
                  <col3>More content</col3>
                  <col4>Some content</col4>
                  <col5>ABCabc DEFdef</col5>
                  <col6>More content</col6>
                  </item>
                  </items>
                  </mx:Model>
                  <mx:DataGrid y="10" left="10" right="10" height="179"
                  dataProvider="{model.item}" resizableColumns="false" sortableColumns="false"
                  variableRowHeight="true" useRollOver="false"
                  draggableColumns="false" dragEnabled="false" allowDragSelection="false" textAlign="center">
                  <mx:columns>
                  <mx:DataGridColumn dataField="data" headerText="" width="25">
                  <mx:itemRenderer>
                  <mx:Component>
                  <mx:RadioButton value="{data}" groupName="rgroup1" height="200%" width="100%"/>
                  </mx:Component>
                  </mx:itemRenderer>
                  </mx:DataGridColumn>
                  <mx:DataGridColumn headerText="Column 1" wordWrap="true" dataField="col1"/>
                  <mx:DataGridColumn headerText="Column 2" wordWrap="true" dataField="col2"/>
                  <mx:DataGridColumn headerText="Column 3" wordWrap="true" dataField="col3"/>
                  <mx:DataGridColumn headerText="Column 4" wordWrap="true" dataField="col4"/>
                  <mx:DataGridColumn headerText="Column 5" wordWrap="true" dataField="col5"/>
                  <mx:DataGridColumn headerText="Column 6" wordWrap="true" dataField="col6"/>
                  </mx:columns>
                  </mx:DataGrid>

                  </mx:Application>


                  However I want to have 1 row of radiobuttons that span all the columns. Is this possible using the datagrid?
                  • 6. I  want to put some radiobuttons in some of the datagrid cell colums
                    nikos101 Level 2
                    I guess it would be better to make the row of radiobuttons as a component and put them into the 1 column