R – Datagrid with RadioButtonGroup itemrenderer

apache-flexdatagriditemrenderer

I don't know how to do this, tried several things now, so I will ask. The below shows what I want. I just don;t know how to get it working.

I have an AC with several questions and assoicated answers. These must be shown in a DG, and the idea is that the rows and colums of the DG are bound to the AC. For example, if the answer to question1 is Yes, the Yes-button must be true, and both the others must be false (as in normal radiobuttongroup behaviour). But when I change a button by clicking it, the actions datafield of the AC should change accordingly. Am I clear enough here?

It is ment for dynamic questionnaires. Any help is highly appreciated.

<?xml version = "1.0"?>
<mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            public var questions : ArrayCollection = new ArrayCollection([
                { question: 'Question 1', anwer: 'Yes' },
                { question: 'Question 2', anwer: 'No' },
                { question: 'Question 3', anwer: 'Unknown' }, ]);
        ]]>
    </mx:Script>

    <mx:Panel title = "Questionaire example" height = "100%" width = "100%" paddingTop = "10"
              paddingLeft = "10" paddingRight = "10">

        <mx:DataGrid id = "dg" width = "100%" height = "100%" dataProvider = "{questions}">
            <mx:columns>
                <mx:DataGridColumn dataField = "question" headerText = "Questions"/>
                <mx:DataGridColumn width = "80" textAlign = "center" editable = "false"
                                   headerText = "Yes">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox horizontalAlign = "center" verticalAlign = "middle">
                                <mx:RadioButton/>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn width = "80" textAlign = "center" editable = "false"
                                   headerText = "No">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox horizontalAlign = "center" verticalAlign = "middle">
                                <mx:RadioButton/>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn width = "80" textAlign = "center" editable = "false"
                                   headerText = "Unknown">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox horizontalAlign = "center" verticalAlign = "middle">
                                <mx:RadioButton/>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>


    </mx:Panel>
</mx:Application>

Best Answer

the ToggleButtonBar is a lot easier to use than a RadioButton and it's functionally the same component (set the selectedIndex -- only one can be selected at a time).

Instead of putting each radio button in its own column, just put the ToggleButtonBar in one column.

Related Topic