4 Replies Latest reply on Apr 14, 2011 6:46 AM by OZDD

    datagrid with checkboxes

    krish g

      I am new to flex and working on developing a  UI . I have a textinput to enter an id and a search button.once the search button is clicked after the user enters the data, it will make a http call which will fetch the results in xml format and then populate the data in a datagrid.

      once the data is populated, i have check boxes againt each row in the datagrid. Also I have two more buttons (say B1, B2) outside the datagrid but within the same panel.

      The above part is working fine. I am struck with the below requirement.

      Now my requirement is if  I select any one checkbox and click on either B1 or B2 button,

       

      1. I should be able to read the complete row details of the selected checbox

      2. Should be able to make a http service call and pass one of the column value ( from the selected row) as a request parameter

      3. Retrieve the result  in an xml format. now this result had to be populated in a seperate datagrid as part of popup window

       

      I am really struck on this and trying since a week , not able to proceed further.

      Any help on this is greatly appreciated.

        • 1. Re: datagrid with checkboxes
          Gregory Lafrance Level 6

          You can have a change event handler for the checkbox, and in that handler use the DG id and get the selectedRow index, and thus access the data for the selected row in the data provider. Similar stuff for the column.

          • 2. Re: datagrid with checkboxes
            krish g Level 1

            Could you please be more elaborative. Also can u please provide me a sample code.

            • 3. Re: datagrid with checkboxes
              OZDD

              In the following code you will find an completely itemRenderer as CheckBox. I used because of serveral reasons:

              1. The checkbox should be in the middle of a table cell (use of VBox)

              2. Encapsulate this renderer for further DataGrids

              3. Data independency

               

              // Begin of Renderer

               

              <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                        xmlns:s="library://ns.adobe.com/flex/spark"
                                        xmlns:mx="library://ns.adobe.com/flex/mx"
                                        focusEnabled="true" horizontalCenter="0"
                                        implements="mx.managers.IFocusManagerComponent">
                  <fx:Script>
                      <![CDATA[
                          import mx.managers.IFocusManagerComponent;

               

                          [Bindable]
                          public var result:Boolean = false;
                          [Bindable]
                          private var _checked:Boolean = false;
                         
                          public function get checked():Boolean
                          {
                              return _checked;
                          }
                         
                          public function set checked(value:Boolean):void
                          {
                              _checked = value;
                          }
                             
                          override public function setFocus():void
                          {
                              checkBox.setFocus();
                          }

               

                      ]]>
                  </fx:Script>
                  <mx:VBox horizontalAlign="center" horizontalCenter="0">
                      <mx:CheckBox id="checkBox" selected="{_checked}" updateComplete="result=checkBox.selected" " />
                  </mx:VBox>
              </s:MXDataGridItemRenderer>

               

              //End of Renderer

               

              Now you can use this renderer in a DataGrid, which you see in the following code:

               

              <mx:DataGridColumn ... dataField="property of the Object" rendererIsEditor="true" editorDataField="result" itemRenderer="path to the Renderer (app.renderer.CheckBoxRender for example)" />

              • 4. Re: datagrid with checkboxes
                OZDD Level 1

                You can add an change-Event Handler to the checkbox above. Then you can send an custom event which is catched by the parent Component.

                In the event you can include the necessary data over the data property (DataGridItemRenderer.data).

                 

                Link for custom events: http://livedocs.adobe.com/flex/3/html/help.html?content=createevents_3.html

                 

                If the event is catched by the parent component you can execute an httpService or whatever you want.