6 Replies Latest reply on Jun 22, 2009 11:51 PM by *Prashant Shelke*

    Datagrid with Embedded Radio Buttons

    KomputerMan.com Level 1

           I am working on a security management interface and am in need of a little datagrid with embedded radio button help.  Basically my form has two datagrids.  One datagrid is used to display Security Groups, the other datagrid is used to display the permissions associated to the selected Security Group.

      .

       

       

       

       

            When a security group is selected from the first datagrid I run a query that returns all of the functions that the selected group is authorized to use.  I.E. I have three functions Edit Users, Edit Transactions, Run Report.  When I click on Security Group “GROUP A” the query tells me that they are not allowed to use the Edit Users function, they have Modify rights to Edit Transactions, and have Read rights to Run Report. 

       

       

       

           The data returned by my query would look like so:

      GROUP NAME --- FUNCTION NAME --- PERMISSIONS

      GROUP A --- Edit Transactions --- M

      GROUP A --- Run Report --- R

       

       

      .

           The data element names in the above query are as follows:

      model.secGrp2Functions.sec_group_name

      model.secGrp2Functions.sec_func_desc

      model.secGrp2Functions.read_or_mod

      .

      The second datagrid contains all of the functions available in the system.  My permissions datagrid looks kind of like the following where (_) represents a radio button and (X) represents a selected radio button:

      Edit Users --- None(X)  Modify (_)   Read (_)

      Edit Transactions --- None(X)  Modify (_)   Read (_)

      Run Report --- None(X)  Modify (_)   Read (_)

       

       

      .

                After I click on the Security Group GROUP A I need my permissions datagrid to be set as follows:

       

       

       

      Edit Users --- None(X)  Modify (_)   Read (_)

      Edit Transactions --- None(_)  Modify (X)   Read (_)

      Run Report --- None(_)  Modify (_)   Read (X)

       

       

      .

           My question is what do I have to do within my radio button control to set the Modify radio button to selected if the permissions indicate that it should be selected for that function???  My code to this point is pretty simple and shown below.  Thanks in advance for any guidance!!!

      .

       

       

       

       

       

       

       

      <mx:DataGrid dataProvider="{model.secGrp2Functions}" >

         <mx:columns>

             <mx:DataGridColumn headerText="Function" dataField="sec_func_desc"/>

             <mx:DataGridColumn headerText="Permissions" dataField="read_or_mod">

                 <mx:itemRenderer>

                     <mx:Component>

                          <mx:HBox>

                              <mx:RadioButton id="NoRights" label="None" selected="true" />

                              <mx:RadioButton id="EditRights" label="Edit" />

                              <mx:RadioButton id="ReadRights" label="Read" />

                           </mx:HBox>

                     </mx:Component>                                

                 </mx:itemRenderer>

             </mx:DataGridColumn>

         </mx:columns>                

      </mx:DataGrid>

       

       

       

       

      .

      Thanks in advance for the assist!!!

      Kurtis   ~|:-)

       

        • 1. Re: Datagrid with Embedded Radio Buttons
          *Prashant Shelke* Level 4

          I think you will might face this issue soon, if u will select any radio button then it one column will act as a RadioButtonGroup(means one radio btn from that column will be selected as internally it will create array of radio button by column-wise!)


          Actually here we want row wise RadioButtonGroup.



          NoneModifyRead
          Edit Users(X)(_)(_)
          Edit Transactions(_)(X)(_)
          Run Report(_)(_)(X)



          this function I have written on itemClick of dataGrid:

          public function setRadioValue(event:ListEvent):void
          {
                          try{
                          var rowIndex:int    = event.rowIndex;
                          var colIndex:int    = event.columnIndex;
                         
                          testVO = TestVO(dataGrid.selectedItem);
                         
                          for(var j:int=1 ; j<=
          dataGrid.columns.length ; j++)
                          {
                              switch(colIndex)
                              {
                                   case 1 :       

                                   {

                                                  /* this will create row-wise radiobutton selection as group in stead of default column-wise**/
                                              testVO.none= true;           
                                             
          testVO.modify = false;
                                             
          testVO.read = false;                                   
                                             
          dataGrid.validateNow();
                                              break;
                                   }

                                 so on.. for case 2, set testVO.modify = true & others as false.

                                }

                          }

          }

          1 person found this helpful
          • 2. Re: Datagrid with Embedded Radio Buttons
            *Prashant Shelke* Level 4

            Hope this will work for u.

            • 3. Re: Datagrid with Embedded Radio Buttons
              KomputerMan.com Level 1

              I thought a picture might help.  Even though it is a crappy pic... Anyway... the left datagrid contains a listing of user groups in my application.  The right datagrid contains a listing of all of my functions.  Each user group is assigned various rights to each function in the app.  When I click on a user group in the left hand datagrid I want to display their security settings in the right side datagrid. My question is how do I loop through each row in the securiy functions datagrid and dynamically set the value for each radio button???

               

              tmp.jpg

               

              Thanks in advance for the help!!!

               

              Have an Ordinary Day...

              Kurtis   ~|:-)

              • 4. Re: Datagrid with Embedded Radio Buttons
                *Prashant Shelke* Level 4

                Do one thing, add three fields in the VO, say flagNone, flagModify, flagRead. While looping dataProvider set true/ false to this attributes & this will be binded with u r radio buttons per row.


                <mx:RadioButton selected={data.flagNone} ../>


                Actually previous solution I have given by considering your checkboxes in separate columns by by seeing u r image giving this solution.

                • 5. Re: Datagrid with Embedded Radio Buttons
                  KomputerMan.com Level 1

                  Here is the code I needed.  I forgot that I am binding a component to a dataset so all I had to do was fix my datasource and then create the following component:

                   

                   

                  <mx:DataGrid id="dgModSecFunctions" dataProvider="{model.secGrp2Functions}" width="615" x="105" y="10" height="400">

                  <mx:columns>

                    <mx:DataGridColumn  id="myFunc" headerText="Security Function" dataField="sec_func_desc" width="315" />

                   

                   

                    <mx:DataGridColumn id="myType" headerText="Function Type" dataField="sec_func_type" width="90" />

                   

                   

                    <mx:DataGridColumn id="mySec" headerText="Permissions" dataField="read_or_mod" width="180" >

                   

                   

                     <mx:itemRenderer>

                   

                   

                      <mx:Component>

                   

                   

                       <mx:HBox paddingLeft="3">

                   

                   

                        <mx:RadioButtonGroup id="SecRights" selectedValue="{data.read_or_mod}/>

                   

                   

                        <mx:RadioButton id="NoRights" groupName="SecRights" label="None" value="N" click="data.read_or_mod='N'" />

                   

                   

                        <mx:RadioButton id="EditRights" groupName="SecRights" label="Edit" value="E" click="data.read_or_mod='E'" />

                   

                   

                        <mx:RadioButton id="ReadRights" groupName="SecRights" label="Read" value="R" click="data.read_or_mod='R'" />

                   

                   

                       </mx:HBox>

                   

                   

                      </mx:Component>

                   

                   

                     </mx:itemRenderer>

                   

                   

                    </mx:DataGridColumn>

                   

                   

                  </mx:columns>

                   

                   

                  </mx:DataGrid>

                   

                   

                   

                  (hopefully this will format ok).

                   

                  A BIG thanks to Prashant Shelke, Mrog70, and Jeff Tapper!!!  Couldn't have done it without you guys!!!  Sometimes the solution is simpler than you think...

                   

                  Have an Ordinary Day...

                  Kurtis   ~|:-)