4 Replies Latest reply on Mar 16, 2010 11:57 PM by Prabh Singh

    call function from button within datagrid.

    miguel8312 Level 3

      im struggling here guys and i cant find any examples on how to do this.i have a two column datagrid with item rendered which populates a button. in one column i have data and data on another column the button.

      all i want to do is get the data on the column into a varibable when the user clicks on the button... i tried this but it does not seem to be working can someone point me in the right direction here?...

      <mx:DataGrid id="trgrid" headerHeight="40"  
                     height="243"  width="300"
                     fontSize="11" 
                     fontFamily="Arial"
                     color="#111212"
                     borderStyle="outset" 
                     fontWeight="bold" 
                     textAlign="center" 
                     alpha=".7" 
                     dropShadowEnabled="true" alternatingItemColors="[#DFDADA, #FFFFFF]">
      
                <mx:columns>
                     <mx:DataGridColumn fontFamily="Arial" headerText="Transaction ID"  dataField="FWAPPROV_TRANS_ID" color="black"/>
                          
                     <mx:DataGridColumn headerText="Approve Transaction" color="black">
                     <mx:itemRenderer>
                                              <mx:Component>
                                              <mx:Box width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
                                              <mx:Button label="Approve" width="100%"/>
                                              <mx:click>
                                                                                                               
                                                   <![CDATA[
                                                   function ApproveItem() :void
                                                        {
                                                             trace("i got in the function");                                             
                                                        
                                                        }
                                                   ]]>
                                                   
                                              </mx:click>
      
                                              
                                              </mx:Box>
                                              </mx:Component>
                     </mx:itemRenderer>
                     </mx:DataGridColumn>
      
        • 1. Re: call function from button within datagrid.
          saisri2k2 Level 4

          smthing like this should work.. (I'vnt tested the code but should work)

          <mx:Script>
          <![CDATA[
               public function getData():void{
          var selItem:Object = trgrid.getSelectedItem();
          var item:String = selItem["FWAPPROV_TRANS_ID"]
               }
          ]]>

          </mx:Script>
          <mx:DataGrid id="trgrid" headerHeight="40"  
                         height="243"  width="300"
                         fontSize="11" 
                         fontFamily="Arial"
                         color="#111212"
                         borderStyle="outset" 
                         fontWeight="bold" 
                         textAlign="center" 
                         alpha=".7" 
                         dropShadowEnabled="true" alternatingItemColors="[#DFDADA, #FFFFFF]">
           
                    <mx:columns>
                         <mx:DataGridColumn fontFamily="Arial" headerText="Transaction ID"  dataField="FWAPPROV_TRANS_ID" color="black"/>
                              
                         <mx:DataGridColumn headerText="Approve Transaction" color="black">
                         <mx:itemRenderer>
                                                  <mx:Component>
                                                  <mx:Box width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
                                                  <mx:Button label="Approve" width="100%" click="outerDocument.getData();/>
                                                  
           
                                                  
                                                  </mx:Box>
                                                  </mx:Component>
                         </mx:itemRenderer>
                         </mx:DataGridColumn>

          • 3. Re: call function from button within datagrid.
            miguel8312 Level 3

            dude you are my hero i had to make some slight changes to the code you posted but it worked like a charm!!! i dont know how you came up with

             

             

            click="outerDocument.getData();"
            
            
            

             

             

            but this is exactly what i need it.

             

            here is the full code in case someone else might be able to benefit from my idiotness

             

            public
            
            
             function getData():void
                           {
            
            var selItem:Object = trgrid.selectedItem
            
            var item:String = selItem["FWAPPROV_TRANS_ID"]  
            
            
            trace(item, "this is the string when clicked");
                           }
            
            
                      ]]>
            
            
            </mx:Script>
            
            
            
            <mx:Button label="hi" click="ApproveItem()"/>
            
            
            
            
            <mx:DataGrid id="trgrid" headerHeight="40"  
                           height="
            
            243"  
                           width="
            
            300"               fontSize="
            
            11"                fontFamily="
            
            Arial"
                           color="
            
            #111212"
                           borderStyle="
            
            outset" 
                           fontWeight="
            
            bold"                textAlign="
            
            center"                alpha="
            
            .7"                dropShadowEnabled="
            
            true" alternatingItemColors="[#DFDADA, #FFFFFF]">
            
            
            
            <mx:columns>
            
            
            <mx:DataGridColumn fontFamily="Arial" headerText="Transaction ID"  dataField="FWAPPROV_TRANS_ID" color="black"/>
            
            
            
            <mx:DataGridColumn headerText="Approve Transaction" color="black">
            
            
            <mx:itemRenderer>
            
            
            <mx:Component>
            
            
            <mx:Box width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
            
            
            <mx:Button label="Approve" width="100%" click="outerDocument.getData();"/>
            
            
            </mx:Box>
            
            
            </mx:Component>
            
            
            </mx:itemRenderer>
            
            
            </mx:DataGridColumn>
            
            
            
            
            
            </mx:columns>
            
            
            </mx:DataGrid>
            
            
            
            
            • 4. Re: call function from button within datagrid.
              Prabh Singh Level 1

              Heh .. Thank you, I am glad the link helped you. I have had the same issue earlier so I gave you the link that had helped me out.