The following example shows how you can display a series of CheckBox controls using the Flex Repeater with an Array data provider.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/29/displaying-checkbox-controls-using-the-repeater-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.CheckBox;

            private function button_click(evt:Event):void {
                var selArr:Array = [];
                var idx:int;
                var len:int = arr.length;
                for (idx=0; idx<len; idx++) {
                    if (checkBox[idx].selected) {
                        selArr.push(checkBox[idx].label);
                    }
                }

                var title:String = selArr.length + " of " + len + " item(s) selected.";
                var message:String = selArr.join("\\n");
                Alert.show(message, title);
            }

            private function doFilter(element:*, index:int, arr:Array):Boolean {
                return element.selected;
            }

            private function checkBox_change(evt:Event):void {
                var ch:CheckBox = evt.currentTarget as CheckBox;
                Alert.show(ch.getRepeaterItem().data);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red" data="red" />
        <mx:Object label="Orange" data="haloOrange" />
        <mx:Object label="Yellow" data="yellow" />
        <mx:Object label="Green" data="haloGreen" />
        <mx:Object label="Blue" data="haloBlue" />
    </mx:Array>

    <mx:Panel id="panel" width="50%" paddingLeft="10" verticalGap="10">
        <mx:Repeater id="checkBoxRepeater" dataProvider="{arr}">
            <mx:CheckBox id="checkBox"
                    label="{checkBoxRepeater.currentItem.label}"
                    data="{checkBoxRepeater.currentItem.data}"
                    change="checkBox_change(event);" />
        </mx:Repeater>
        <mx:ControlBar horizontalAlign="right">
            <mx:Button id="button"
                    label="Click me"
                    emphasized="true"
                    click="button_click(event);" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

14 Responses to Displaying CheckBox controls using the Repeater in Flex

  1. steve says:

    oh common! no demo app today? gettin lazy now huh? ;P

  2. peterd says:

    steve,

    SWF posted.

    Peter

  3. Anonymous says:

    good!
    clean!

  4. Mazen says:

    How can add checkbox in a Datagrid…? and print the content of the row for a selected checkbox.

  5. Ryan says:

    Awesome example, thanks for the help!

  6. Taqi says:

    How can we select and delect all checkboxes in repeater by clicking on a button

  7. Peter deHaan says:

    Taqi,

    Something like this:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application name="Repeater_CheckBox_test"
            xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
    
        <mx:Script>
            <![CDATA[
                import mx.controls.CheckBox;
    
                private function button_click(evt:Event):void {
                    var idx:int;
                    var len:int = arr.length;
                    for (idx=0; idx<len; idx++) {
                        // invert:
                        //checkBox[idx].selected = !checkBox[idx].selected;
    
                        // toggle:
                        checkBox[idx].selected = button.selected;
                    }
                }
            ]]>
        </mx:Script>
    
        <mx:Array id="arr">
            <mx:Object label="Red" data="red" />
            <mx:Object label="Orange" data="haloOrange" />
            <mx:Object label="Yellow" data="yellow" />
            <mx:Object label="Green" data="haloGreen" />
            <mx:Object label="Blue" data="haloBlue" />
        </mx:Array>
    
        <mx:Panel id="panel" width="50%" paddingLeft="10" verticalGap="10">
            <mx:Repeater id="checkBoxRepeater" dataProvider="{arr}">
                <mx:CheckBox id="checkBox"
                        label="{checkBoxRepeater.currentItem.label}"
                        data="{checkBoxRepeater.currentItem.data}" />
            </mx:Repeater>
            <mx:ControlBar horizontalAlign="right">
                <mx:Button id="button"
                        label="Toggle all checkboxes"
                        toggle="true"
                        emphasized="true"
                        click="button_click(event);" />
            </mx:ControlBar>
        </mx:Panel>
    
    </mx:Application>
    

    You can comment/uncomment some of the ActionScript logic based on if you want to toggle or invert the selected items.

    Peter

  8. Rodrigo says:

    Hello friend, first let me say that the post is very good and I’m here again to ask you one more help. I’m trying to use mx: Repeater for a repetition of a Canvas, the problem is that I’m doing it and seeking the data in a database with php and I do not know how. Can you help me? Below the code to better understand:

    Flex in the file:
    <mx:Repeater id=”myRepeater” dataProvider=”{dataCont.lastResult.xmlrecCont.xmlRepeater}” >
    <mx:Canvas width=”80%” height=”80″ backgroundColor=”#E3E3E3″ left=”10″ top=”85″ themeColor=”#4BB6B7″ borderColor=”#BFBEBE” cornerRadius=”5″ borderStyle=”solid” borderThickness=”1″>
    <mx:Label text=”RI:” left=”5″ top=”5″ width=”28″ height=”20″ fontWeight=”bold”/>
    <mx:Label text=”Tipo:” left=”5″ top=”30″ width=”35″ height=”20″ fontWeight=”bold”/>
    <mx:Label text=”Razão Social:” left=”75″ top=”5″ width=”80″ height=”20″ fontWeight=”bold”/>
    <mx:Label text=”Data:” width=”40″ height=”20″ right=”138″ top=”30″ fontWeight=”bold”/>
    <mx:Label text=”Número Contrato” width=”110″ height=”20″ right=”68″ top=”55″ fontWeight=”bold”/>
    <mx:Label text=”Situação:” width=”60″ height=”20″ top=”55″ fontWeight=”bold” left=”5″/>
    <mx:Label width=”30″ height=”20″ top=”5″ left=”41″ text=”{dataCont.lastResult.xmlrecCont.xmlRI}” textAlign=”left”/>
    <mx:Label width=”80″ height=”20″ top=”30″ left=”41″ text=”{dataCont.lastResult.xmlrecCont.xmlTpo}”/>
    <mx:Label width=”80″ height=”20″ top=”55″ left=”75″ text=”{dataCont.lastResult.xmlrecCont.xmlSit}”/>
    <mx:Label width=”70″ height=”20″ top=”55″ right=”5″ text=”{dataCont.lastResult.xmlrecCont.xmlId_cont}”/>
    <mx:Label height=”20″ top=”5″ text=”{dataCont.lastResult.xmlrecCont.xmlRazso_no}” textAlign=”left” left=”160″ right=”5″/>
    <mx:Label width=”135″ height=”20″ right=”5″ top=”30″ text=”{dataCont.lastResult.xmlrecCont.xmlDate}”/>
    </mx:Canvas>
    </mx:Repeater>

    In the PHP file:

    <?php

    require_once(“conexao.php”);

    $id_rep = “1″;
    $mysql_select = “SELECT * FROM projcont WHERE id_rep = ‘$id_rep’”;
    $mysql_query = mysql_query($mysql_select);
    $mysql_fetch = mysql_fetch_array($mysql_query);

    $cto = “<xmlrecCont>”;
    if($mysql_query) {
    $cto .= “<xmlRepeater>”;
    $cto .= $mysql_fetch = mysql_fetch_array($mysql_query);
    $cto .= “</xmlRepeater>”;
    $cto .= “<xmlRI>”;
    $cto .= $mysql_fetch['ID_cad'];
    $cto .= “</xmlRI>”;
    $cto .= “<xmlRazso_no>”;
    $cto .= $mysql_fetch['razso_no'];
    $cto .= “</xmlRazso_no>”;
    $cto .= “<xmlTpo>”;
    $cto .= $mysql_fetch['tpo'];
    $cto .= “</xmlTpo>”;
    $cto .= “<xmlData>”;
    $cto .= $mysql_fetch['data'];
    $cto .= “</xmlData>”;
    $cto .= “<xmlSit>”;
    $cto .= $mysql_fetch['sit'];
    $cto .= “</xmlSit>”;
    $cto .= “<xmlId_cont>”;
    $cto .= $mysql_fetch['id_cont'];
    $cto .= “</xmlId_cont>”;
    } else {
    $cto .= “Error mysql_query”;
    }
    $cto .= “</xmlrecCont>”;

    echo($cto);

    ?>

    Thank you already!

  9. @Peter deHaan:

    Thanks! your comment is very helpful! Exactly what i needed!
    Thanks again!!

  10. dishanka says:

    great work peter.

  11. HQ says:

    Thank alot Peter!

    Your example realy hepl me to settle my troubles.

  12. Rakesh says:

    Okay Now.. !!! How to deal with Equally spaced Horizontal Layout for Checkboxes mentioned above.. I need something like this:

    Red Orange Yellow Green
    Blue Black Violet Pink

    .. Consider the above as the layout of the checkboxes

  13. Rakesh says:

    Okay I think I’ve found a clue here..

    http://blog.flexexamples.com/2009/03/10/using-the-repeater-class-in-flex-gumbo/

    .. still the above doesn’t solve my question..

    if I have 8 different labels for the checkboxes, and I am using a single repeater, then how would I divide those 8 components as first 4 and then next 4.. as mentioned in my above comment

  14. Shailen TJ says:

    What is the purpose of the doFilter function in this example?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree