Displaying CheckBox controls using the Repeater in Flex

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.

14 thoughts on “Displaying CheckBox controls using the Repeater in Flex

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

  2. 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

  3. 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!

  4. 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

Comments are closed.