3 Replies Latest reply on Jun 30, 2010 5:28 AM by BhaskerChari

    Datagrid checkbox headerrenderer check off problem

    subhajitnag1982

      I have a datagrid where one column has select option like what we have in mail inboxes. User can select one or many row items to perform any actions by selecting the checkbox. It has also one select all option which is shown in the header renderer of that particular column. If user clicks on that all checkboxes gets selected.


      I have done that but the problem is that whenever i am performing any action by selecting all(header checkbox) and as a result the datagrid sometimes sets visible off or switches to some other mxml component from the component which is holding the datagrid and after coming back from that scenario again to the datagrid, its seen that the checkbox is still checked ... i want that checkbox to set to non-checked.


      help me.

        • 1. Re: Datagrid checkbox headerrenderer check off problem
          BhaskerChari Level 4

          Hi subhajit nag,

           

          I think you can make use of the show event for your mxml component in which you have the Datagrid checkbox headerrenderer....Once this event is fired try to deselect the check box...

           

          You can also do this by using a boolean bindable variable which is binded to the selected property of your checkbox headerrenderer....Change the value of the bindable property to false then it will automaticallt deselect/uncheck the check box when you move to other components...

           

          Thanks,

          Bhasker Chari.S

          • 2. Re: Datagrid checkbox headerrenderer check off problem
            subhajitnag1982 Level 1

            Let me explain u more the scenario.

             

            I have one mxml component which is within a viewstack. say this mxml is the 2 child of the viewstack.

             

            Now my 1st query is : If according to u i call a method whch deselects the checkbox header renderer on the mxml's show event then how will i point the inline checkbox headerrender ? i can use outerDocument within the renderer in order to access methods of parent document. But how to access methods of renderer from parent document ?

             

            2nd query is : in this mxml component file i have another datagrid which has been set as visible in the initial. Clicking on a button sets that datagrid to visible and the datagrid havin checkbox headerrenderer sets to invisible. So if i click on the header checkbox and after that i click on the button toggles the visibility and when i am again returnin back to the actual scenario where the checkbox datagrid is visible. there i can see still the checkbox checked whch i dont want. hw to achieve that ?

            • 3. Re: Datagrid checkbox headerrenderer check off problem
              BhaskerChari Level 4

              Hi subhajit nag,

               

              Say the below is your mxml component in viewStack...

              <your component>

              <mx:Script>

              <![CDATA[

               

              [Bindable]private var headerChecked:Boolean = false;

               

              private function onShow():void

              {

                   headerChecked = false;

              }

               

               

              ]]>

               

              </mx:Script>

               

              </your component>

               

              <mx:DataGrid x="35" y="10" id="mydg">
                      <mx:columns>        
                          <mx:DataGridColumn editable="true" sortable="false">
                           <mx:headerRenderer>
                            <mx:Component>
                                      <mx:CheckBox selected="{outerDocument.headerChecked}" click="checkUnCheckCheckBoxes()">
                                       <mx:Script>
                                <![CDATA[
                                 import mx.collections.ArrayCollection;
                                               
                             private function checkUnCheckCheckBoxes():void
                             {
                                // You can handle your logic what you want to do when header check box is clicked....   
                             }
                                ]]>
                            </mx:Script>
                                      </mx:CheckBox>
                                  </mx:Component>
                           </mx:headerRenderer>
                              <mx:itemRenderer>                
                                  <mx:Component>
                                      <mx:CheckBox selected="{data.isSelected}" click="{data.recselected = !data.recselected}"/>
                                  </mx:Component>
                              </mx:itemRenderer>
                          </mx:DataGridColumn>
                          <mx:DataGridColumn headerText="Column 1" dataField="firstName"/>
                          <mx:DataGridColumn headerText="Column 2" dataField="lastName"/>           
                      </mx:columns>
                  </mx:DataGrid>

               

              So you just need to change the value of the headerChecked  bindable variable to false..in show event for your first scenario...and your header check box is automatically unselected because this check box is binded to a bindable variable to which you are setting to false...

               

               

              For your second scenario....you can use the same changing the headerChecked value to false...

               

              You need to set this varibale to false in your second scenario where you know that your Header Render datagrid is making it visible after you made it unvisible...

               

              say you have clicked header check box and you made this datagrid invisible and this header checkbox datagrid will be visible once again when you click toggle button so set the value to false in the toggle button click function....

               

              private function toggleButtonClickHandler():void

              {

                   headerChecked = false;

                   yourHeaderChkDataGrid.visible = true;

                   yourAnotherDG.visible = false;

              }

               

              Hope this is clear for you now...Try this and let me know...

               

              Thanks,

              Bhasker Chari