R – How do select all checkbox within iteam renderer data grid using flex

airapache-flexflashweb-applications

In my project I used one select all button for select all checkbox at click event. But I used datagrid, item renderer within checkbox so no id of checkbox then how to select/unselect all checkbox ?

<mx:DataGrid id=newdatagrid>
<mx:columns>

<mx:DataGridColumn headerText="1"  rendererIsEditor="true" editorDataField="selected">
                                <mx:itemRenderer>
                                    <mx:Component>
<mx:CheckBox click="{data.check1 = (data.check1 != 'true') ? 'true' : 'false'};outerDocument.toggleCheckbox(data);outerDocument.calcValues();" dataChange="this.selected=outerDocument.validateCheckbox(data)"/>
                    </mx:Component>
                                            </mx:itemRenderer>
                                </mx:DataGridColumn>

                    </mx:columns>
                </mx:DataGrid>

How can I implement select/unselect all button for checkbox?

Best Solution

First, bind the selected property of your checkbox in the itemrenderer to the "check1" property of your dataprovider items:

<mx:CheckBox selected="{data.check1}"/>

Then set the "check1" property of each item in the dataprovider in response to a button click.

for each (var item:Object in dataProvider) {
  item.check1 = true; // or false;
}

Related Solutions

R – how to Move state dynamically using image click within Datagrid itemRenderer

You are getting this error because currentState is not a defined property of Component.

You need to change click="currentState='Playsystem'" to click="this.parent.parent.parent['currentState'] = 'Playsystem'"

as in:

<mx:DataGrid bottom="0" top="37" left="0" dataProvider="{dataAry}" width="340">
<mx:columns>
<mx:DataGridColumn  textAlign="center"  headerText="" dataField="col2">
 <mx:itemRenderer>
  <mx:Component>
  <mx:HBox  textAlign="center"  paddingLeft="17">
         <mx:Image   source="@Embed(source='125x125.gif')" click="this.parent.parent.parent['currentState'] = 'Playsystem'"/>
    </mx:HBox>
  </mx:Component>
 </mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

But I wouldn't do that way. It's kinda hacky. What I recommend is actual write a class for the component and have it listen and dispatch the click event to the container. More info

Php – how can i select particular checkbox within datagrid itemrenderer in flex

Check out this code:
Data.as

package
{
    public class Data
    {
        [Bindable]
        public var name:String;

        [Bindable]
        public var checked:Boolean;
        public function Data(name:String, checked:Boolean)
        {
            this.name = name;
            this.checked = checked;
        }
    }
}

Test.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    xmlns:local="*" creationComplete="create();">
    <mx:Button label="Randomize" click="randomize()"/>
    <mx:Button label="Trace selected indices" click="traceValues()"/>
    <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" 
        dataProvider="{dp}">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="Name"/>
            <mx:DataGridColumn headerText="Checked" dataField="checked">
              <mx:itemRenderer>
                <mx:Component>
                  <mx:CheckBox selected="{data.checked}" 
                    change="{data.checked = this.selected;}/>
                </mx:Component>
              </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var dp:ArrayCollection;
            public function create():void
            {
                var array:Array = [];
                for(var i:Number = 0; i < 20; i++)
                    array.push(new Data("The Name", false));
                dp = new ArrayCollection(array);
            }
            private function randomize():void
            {
              var selectedNumbers:Array = [];
              var randomNumber:Number;
              for(var i:Number = 0; i < 5; i++)
              {
                do
                  randomNumber = Math.floor(Math.random() * 20);
                while(selectedNumbers.indexOf(randomNumber) != -1);
                dp.getItemAt(randomNumber).checked = !dp.getItemAt(randomNumber).checked;
                selectedNumbers.push(randomNumber);
              }
            }
            private function traceValues():void
            {
              for(var i:Number = 0; i < 20; i++)
              {
                if(dp.getItemAt(i).checked)
                  trace(i);
              }
            }
        ]]>
    </mx:Script>
</mx:Application>

Best Solution

Related Solutions

R – how to Move state dynamically using image click within Datagrid itemRenderer

Php – how can i select particular checkbox within datagrid itemrenderer in flex

Related Question