7 Replies Latest reply on Jul 26, 2010 11:52 PM by kiran7881

    How to Capture the Checked Row Data of a DataGrid

    kiran7881 Level 1

      I am having data inside a DataGrid as shown  .

       

      <mx:DataGrid id="dataGrid"dataProvider="{myAC}" x="10" y="177" visible="true">          
      <mx:columns>

      <mx:DataGridColumn  headerText="SLNO" itemRenderer="mx.contrls.RadioButton"/>           
      <mx:DataGridColumn dataField="EmpId" headerText="Names" />           
      <mx:DataGridColumn dataField="Ename" headerText="Passwords"/>
      <mx:DataGridColumn dataField="EmpDepartment" headerText="CPasswords"/>
      </mx:DataGridColumn>

       

      <mx:Button x="149" y="327" label="Button" click="deleteRow()"/>

       

      <mx:script>

      public function deleteRow():void
      {
      // Need logic here
      }
      </mx:script>

       

      Now my requirement is that when the user checks a row inside a DataGrid and presses a Delete Button , i need to capture that EMPID .
      I am providing a Delete Button for this DataGrid as shown above .

       

      Please tell me how to capture that checked EMPID inside the deleteRow() function

       

      Thanks in advance .

       

       

       


        • 1. Re: How to Capture the Checked Row Data of a DataGrid
          rtalton Level 4

          In this case, you could use a foreach loop, deleting all data with a checked box. This assumes you have a field in myAC to store the value of the radioButton (selected property).

          • 2. Re: How to Capture the Checked Row Data of a DataGrid
            Flex harUI Adobe Employee

            In the example on my blog, the selectedItems contains the set of data that

            is checked

             

            --

            Alex Harui

            Flex SDK Team

            Adobe System, Inc.

            http://blogs.adobe.com/aharui

            • 3. Re: How to Capture the Checked Row Data of a DataGrid
              kiran7881 Level 1

              Hi Flex harUI  ,

               

              Thanks for the the link you sent .

               

              My question is that how can i get the value of the clicked Row of a DataGrid ??

               

              Please help as  in my work place as we dont have access to download source of other domains .

               

              I need a sample code of this .

               

              Thanks in advance .

              • 4. Re: How to Capture the Checked Row Data of a DataGrid
                Flex harUI Adobe Employee

                CheckBoxRenderer.as

                 

                package

                {

                import flash.display.DisplayObject;

                import flash.events.KeyboardEvent;

                import flash.events.MouseEvent;

                import flash.text.TextField;

                import mx.controls.CheckBox;

                import mx.controls.dataGridClasses.DataGridListData;

                import mx.controls.listClasses.ListBase;

                 

                /**

                 

                • The Renderer.

                */

                public class CheckBoxRenderer extends CheckBox

                {

                 

                    public function CheckBoxRenderer()

                    {

                        focusEnabled = false;

                    }

                 

                    override public function set data(value:Object):void

                    {

                        super.data = value;

                        invalidateProperties();

                    }

                     

                    override protected function commitProperties():void

                    {

                        super.commitProperties();

                        if (owner is ListBase)

                            selected = ListBase(owner).isItemSelected(data);

                    }

                 

                    /* eat keyboard events, the underlying list will handle them */

                    override protected function keyDownHandler(event:KeyboardEvent):void

                    {

                    }

                 

                    /* eat keyboard events, the underlying list will handle them */

                    override protected function keyUpHandler(event:KeyboardEvent):void

                    {

                    }

                 

                    /* eat mouse events, the underlying list will handle them */

                    override protected function clickHandler(event:MouseEvent):void

                    {

                    }

                 

                    /* center the checkbox if we're in a datagrid */

                    override protected function updateDisplayList(w:Number, h:Number):void

                    {

                        super.updateDisplayList(w, h);

                 

                        if (listData is DataGridListData)

                        {

                            var n:int = numChildren;

                            for (var i:int = 0; i < n; i++)

                            {

                                var c:DisplayObject = getChildAt(i);

                                if (!(c is TextField))

                                {

                                    c.x = (w - c.width) / 2;

                                    c.y = 0;

                                }

                            }

                        }

                    }

                 

                }

                 

                }

                 

                CheckBoxList.as

                 

                package

                {

                import flash.display.Sprite;

                import flash.events.KeyboardEvent;

                import mx.controls.List;

                import mx.controls.listClasses.IListItemRenderer;

                import mx.controls.CheckBox;

                 

                /**

                 

                • List that uses checkboxes for multiple selection

                */

                public class CheckBoxList extends List

                {

                 

                    // fake all mouse interaction as if it had the ctrl key down

                    override protected function selectItem(item:IListItemRenderer,

                                                  shiftKey:Boolean, ctrlKey:Boolean,

                                                  transition:Boolean = true):Boolean

                    {

                        return super.selectItem(item, false, true, transition);

                    }

                 

                    // turn off selection indicator

                    override protected function drawSelectionIndicator(

                                                indicator:Sprite, x:Number, y:Number,

                                                width:Number, height:Number, color:uint,

                                                itemRenderer:IListItemRenderer):void

                    {

                    }

                 

                    // whenever we draw the renderer, make sure we re-eval the checked state

                    override protected function drawItem(item:IListItemRenderer,

                                                selected:Boolean = false,

                                                highlighted:Boolean = false,

                                                caret:Boolean = false,

                                                transition:Boolean = false):void

                    {

                        CheckBox(item).invalidateProperties();

                        super.drawItem(item, selected, highlighted, caret, transition);

                    }

                 

                    // fake all keyboard interaction as if it had the ctrl key down

                    override protected function keyDownHandler(event:KeyboardEvent):void

                    {

                        // this is technically illegal, but works

                        event.ctrlKey = true;

                        event.shiftKey = false;

                        super.keyDownHandler(event);

                    }

                }

                 

                }

                 

                CheckBoxHeaderRenderer.as

                 

                package

                {

                import flash.display.DisplayObject;

                import flash.events.Event;

                import flash.events.KeyboardEvent;

                import flash.events.MouseEvent;

                import flash.text.TextField;

                import mx.controls.CheckBox;

                import mx.controls.dataGridClasses.DataGridListData;

                import mx.controls.listClasses.ListBase;

                 

                /**

                 

                • The Renderer.

                */

                public class CheckBoxHeaderRenderer extends CheckBox

                {

                 

                    public function CheckBoxHeaderRenderer()

                    {

                        focusEnabled = false;

                    }

                 

                    override public function set data(value:Object):void

                    {

                        invalidateProperties();

                    }

                     

                    private var addedListener:Boolean = false;

                    private var partiallySelected:Boolean = false;

                 

                    override protected function commitProperties():void

                    {

                        super.commitProperties();

                        if (owner is ListBase)

                        {

                            if (!addedListener)

                            {

                                addedListener = true;

                                owner.addEventListener("valueCommit", owner_changeHandler,

                false, 0, true);

                                owner.addEventListener("change", owner_changeHandler, false,

                0, true);

                            }

                 

                            if (ListBase(owner).dataProvider.length ==

                                ListBase(owner).selectedItems.length)

                            {

                                selected = true;

                                partiallySelected = false;

                            }

                            else if (ListBase(owner).selectedItems.length == 0)

                            {

                                selected = false;

                                partiallySelected = false;

                            }

                            else

                            {

                                selected = false;

                                partiallySelected = true;

                            }

                            invalidateDisplayList();

                        }

                    }

                 

                    /* eat keyboard events, the underlying list will handle them */

                    override protected function keyDownHandler(event:KeyboardEvent):void

                    {

                    }

                 

                    /* eat keyboard events, the underlying list will handle them */

                    override protected function keyUpHandler(event:KeyboardEvent):void

                    {

                    }

                 

                    override protected function clickHandler(event:MouseEvent):void

                    {

                        if (selected)

                        {

                            // uncheck everything

                            ListBase(owner).selectedIndex = -1;

                        }

                        else

                        {

                            var n:int = ListBase(owner).dataProvider.length;

                            var arr:Array = [];

                            for (var i:int = i; i < n; i++)

                                arr.push(i);

                            ListBase(owner).selectedIndices = arr;

                        }

                    }

                 

                    /* center the checkbox if we're in a datagrid */

                    override protected function updateDisplayList(w:Number, h:Number):void

                    {

                        super.updateDisplayList(w, h);

                 

                        graphics.clear();

                 

                        if (listData is DataGridListData)

                        {

                            var n:int = numChildren;

                            for (var i:int = 0; i < n; i++)

                            {

                                var c:DisplayObject = getChildAt(i);

                                if (!(c is TextField))

                                {

                                    c.x = (w - c.width) / 2;

                                    c.y = 0;

                                    c.alpha = 1;

                                    if (partiallySelected)

                                    {

                                        graphics.beginFill(0x000000);

                                        graphics.drawRect(c.x, c.y, c.width, c.height);

                                        graphics.endFill();

                                        c.alpha = 0.7;

                                    }

                                }

                            }

                        }

                    }

                 

                    private function owner_changeHandler(event:Event):void

                    {

                        invalidateProperties();

                    }

                 

                }

                 

                }

                 

                CheckBoxDataGridApp.mxml

                 

                <?xml version="1.0" encoding="UTF-8" standalone="no"?>

                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="0"

                xmlns:local="*" height="500" >

                    <mx:Script>

                    <![CDATA[

                        private var arr:Array = [

                            ,

                            ,

                            ,

                            ,

                            ,

                            ,

                            ,

                            ,

                            ,

                            ,

                            ,

                            ,

                             

                 

                        ];

                 

                    ]]>

                    </mx:Script>

                    <local:CheckBoxDataGrid id="dg" initialize="dg.dataProvider=arr"

                horizontalScrollPolicy="on"

                                    allowMultipleSelection="true" change="foo.text =

                dg.selectedIndices.toString()" >

                        <local:columns>

                            <mx:DataGridColumn dataField="firstName" headerText=" "

                width="20"

                                 sortable="false" itemRenderer="CheckBoxRenderer"

                headerRenderer="CheckBoxHeaderRenderer" >

                            </mx:DataGridColumn>

                            <mx:DataGridColumn dataField="firstName" headerText="First Name"

                />

                            <mx:DataGridColumn dataField="lastName" headerText="Last Name"

                />

                        </local:columns>

                    </local:CheckBoxDataGrid>

                    <mx:Label id="foo" />

                 

                    <local:CheckBoxList id="list" initialize="list.dataProvider=arr"

                labelField="lastName" itemRenderer="CheckBoxRenderer"

                                allowMultipleSelection="true" change="bar.text =

                list.selectedIndices.toString()" >

                 

                    </local:CheckBoxList>

                    <mx:Label id="bar" />

                </mx:Application>

                 

                CheckBoxDataGrid.as

                 

                package

                {

                import flash.display.Sprite;

                import flash.events.KeyboardEvent;

                import mx.controls.CheckBox;

                import mx.controls.DataGrid;

                import mx.controls.listClasses.IListItemRenderer;

                 

                /**

                 

                • DataGrid that uses checkboxes for multiple selection

                */

                public class CheckBoxDataGrid extends DataGrid

                {

                 

                    override protected function selectItem(item:IListItemRenderer,

                                                  shiftKey:Boolean, ctrlKey:Boolean,

                                                  transition:Boolean = true):Boolean

                    {

                        // only run selection code if a checkbox was hit and always

                        // pretend we're using ctrl selection

                        if (item is CheckBox)

                            return super.selectItem(item, false, true, transition);

                        return false;

                    }

                 

                    // turn off selection indicator

                    override protected function drawSelectionIndicator(

                                                indicator:Sprite, x:Number, y:Number,

                                                width:Number, height:Number, color:uint,

                                                itemRenderer:IListItemRenderer):void

                    {

                    }

                 

                    // whenever we draw the renderer, make sure we re-eval the checked state

                    override protected function drawItem(item:IListItemRenderer,

                                                selected:Boolean = false,

                                                highlighted:Boolean = false,

                                                caret:Boolean = false,

                                                transition:Boolean = false):void

                    {

                        if (item is CheckBox)

                            CheckBox(item).invalidateProperties();

                        super.drawItem(item, selected, highlighted, caret, transition);

                    }

                 

                    // fake all keyboard interaction as if it had the ctrl key down

                    override protected function keyDownHandler(event:KeyboardEvent):void

                    {

                        // this is technically illegal, but works

                        event.ctrlKey = true;

                        event.shiftKey = false;

                        super.keyDownHandler(event);

                    }

                 

                }

                 

                }

                1 person found this helpful
                • 5. Re: How to Capture the Checked Row Data of a DataGrid
                  BhaskerChari Level 4

                  Hi Kiran

                   

                  You can use the simple code below to get the EmpId of the selectedItem in DataGrid..

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                     <mx:Script>
                     <![CDATA[
                      import mx.controls.Alert;
                       
                        [Bindable]private var myAC:Array = [
                           {EmpId:1001, Ename:'Harish', EmpDepartment:"IT"},
                           {EmpId:1002, Album:'Bhasker', EmpDepartment:"HARDWARE"},
                           {EmpId:1002, Album:'Pavan', EmpDepartment:"NETWORK"},
                           ];
                             
                        public function deleteEmployee():void {
                     if(dataGrid.selectedItem != null && dataGrid.selectedItem.hasOwnProperty("EmpId"))
                     {
                      var empId:int = dataGrid.selectedItem.EmpId;
                            Alert.show("EmpId=" + empId);
                     }
                     else
                     {
                      Alert.show("Please select a row to delete.");
                     }
                        }
                       
                     ]]>
                     </mx:Script>

                  <mx:DataGrid id="dataGrid" dataProvider="{myAC}" x="10" y="177" visible="true">          
                    <mx:columns>
                     <mx:DataGridColumn  headerText="SLNO" itemRenderer="mx.controls.RadioButton"/>           
                     <mx:DataGridColumn dataField="EmpId" headerText="Names" />           
                     <mx:DataGridColumn dataField="Ename" headerText="Passwords"/>
                     <mx:DataGridColumn dataField="EmpDepartment" headerText="CPasswords"/>
                    </mx:columns>
                  </mx:DataGrid>
                  <mx:Button id="btnDelete" label="Delete" click="deleteEmployee();" />
                  </mx:Application>

                   

                   

                  Thanks,

                  Bhasker Chari

                  • 6. Re: How to Capture the Checked Row Data of a DataGrid
                    kiran7881 Level 1

                    Thank you FlexHarUi for your time .

                    • 7. Re: How to Capture the Checked Row Data of a DataGrid
                      kiran7881 Level 1

                      Thank you very much  Bhasker , this is what i was basically looking for ,

                      keep up the good work Mate until FLEX gets familiar to all .