7 Replies Latest reply on Mar 27, 2011 11:45 PM by jackcoupons

    Dynamically create button in a Dynamically created  Datagrid cell

    lionkingdom

      I have a datagrid "ddg" that is created dynamically fom an arraycollection. "acMyData"

       

                          ddg.dataprovider=acMyData;

       

       

       

      when i try to do this

       

                          var objectRow:Object = acMyData[10]; //row number 10 in the array

       

                          submitButton =new Button();
                          submitButton.visible=true;
                          submitButton.enabled=true;
                          submitButton.label = "Help";
                          submitButton.useHandCursor = true;
                          submitButton.includeInLayout=true;

       

                          ac["columnName"] =submitButton //the associative name of one of the column in the array is columnName

       

      I see the ID of the  button control as text in the datagrid

      I want a button

       

       

      how to go about this?

       

      I had saw this link  http://www.justskins.com/forums/adding-click-event-to-35785.html but  when i try to use it it says createChild does not exist

       

      thanks

       


        • 1. Re: Dynamically create button in a Dynamically created  Datagrid cell
          krafttimd

          Hey lionkingdom, you will need to implement an item renderer. You may want to start by cheking out Adobe Flex Help here:

          http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_3.html

           

           

          T.K.

          1 person found this helpful
          • 2. Re: Dynamically create button in a Dynamically created  Datagrid cell
            Gregory Lafrance Level 6

            You need a different approach. This code will answer your question. Notice the two approaches to implementing a click handler:

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
              <mx:Script>
                <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.controls.Button;
                  
                  [Bindable] private var arr:ArrayCollection = new ArrayCollection([
                    {id: 1, label1: "Button One", label2: "New One"},
                    {id: 2, label1: "Button Two", label2: "New Two"},
                    {id: 3, label1: "Button Three", label2: "New Three"},
                    {id: 4, label1: "Button Four", label2: "New Four"},
                  ]);
                  
                  public function setTheText(evt:MouseEvent):void{
                    labelOne.text=Button(evt.currentTarget).label;        
                  }
                ]]>
              </mx:Script>
              <mx:DataGrid dataProvider="{arr}">
                <mx:columns>
                  <mx:DataGridColumn dataField="id" headerText="ID"/>
                  <mx:DataGridColumn dataField="label1" headerText="BTN">
                    <mx:itemRenderer>
                      <mx:Component>
                        <mx:Button label="{data.label1}" 
                          click="{outerDocument.labelOne.text=Button(event.currentTarget).label}"/>
                      </mx:Component>
                    </mx:itemRenderer>
                  </mx:DataGridColumn>
                  <mx:DataGridColumn dataField="label2" headerText="BTN">
                    <mx:itemRenderer>
                      <mx:Component>
                        <mx:Button label="{data.label2}" 
                          click="outerDocument.setTheText(event)"/>
                      </mx:Component>
                    </mx:itemRenderer>
                  </mx:DataGridColumn>
                </mx:columns>
              </mx:DataGrid>
              <mx:Label id="labelOne"/>
            </mx:Application>
            

             

            If this post answers your question or helps, please mark it as such.


            Greg Lafrance - Flex 2 and 3 ACE certified

            www.ChikaraDev.com

            Flex Training and Support Services

            • 3. Re: Dynamically create button in a Dynamically created  Datagrid cell
              lionkingdom Level 1

              Thanks a lot for the replies

              item renderer  should be what I am looking for

              my issue is that I do not know the name of the columns and the number of columns that are going to be in the Datagrid.

              I only know that if there is a Column named "Password" ,  then I  should not display it and have a Button control instead that will be  used to validate some stuff.

               

              so basically I am thinking I cannot use the tags like this

               

              <mx:DataGrid id="ddl" >

                   <mx:columns>
                        <mx:DataGridColumn dataField="label1" headerText="Order #"/>      </mx:columns > </mx:DataGrid>

              but more like this only

              <mx:DataGrid id="ddl" >

              </mx:DataGrid>

              and all the creation code should be in the actionscript..
              Tell me if I am wrong
              • 4. Re: Dynamically create button in a Dynamically created  Datagrid cell
                lionkingdom Level 1

                for each(var dgc:AdvancedDataGridColumn in myDataGrid.columns )
                     {    
                                
                         if(dgc.headerText=="Password")
                         {
                            dgc.itemRenderer=mx.controls.Button ; //This is something what i want to achieve
                         }
                        
                    }

                 

                i am stuck here any help would be appretiated

                I am still learning Flex

                • 5. Re: Dynamically create button in a Dynamically created  Datagrid cell
                  krafttimd Level 2

                  I see what your getting at now.

                   

                  here is an example of how I have done it.

                   

                  This code creates a DataGridColumn:

                   

                          private function createDeleteColumn() : DataGridColumn {
                              var col:DataGridColumn = new DataGridColumn();
                              col.resizable = false;
                              col.editable = false;
                              col.width = 22;
                              col.itemRenderer = new ClassFactory(EditOrganizerDataGridDeleteButtonItemRenderer);
                              return col;
                          }

                   

                  The assignment of the itemRedererToThe column is what you need to key on.

                   

                  Here is my EditOrganizerDataGridDeleteButtonItemRenderer code.

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
                           implements="mx.controls.listClasses.IDropInListItemRenderer"
                           horizontalScrollPolicy="off"
                           autoLayout="false">
                      <mx:Script>
                          <![CDATA[
                          import com.datasltn.groupmanagement.model.*;
                          import com.datasltn.groupmanagement.util.*;
                          import com.datasltn.groupmanagement.vo.GroupExprVO;
                          import mx.controls.dataGridClasses.DataGridListData;
                          import mx.controls.listClasses.*;

                   

                          protected var _listData:DataGridListData;
                          public var model : GroupManagementModelLocator = GroupManagementModelLocator.getInstance();
                          public var boModel:BuildOrganizerModel = BuildOrganizerModel.getInstance();
                          [Bindable]
                          public var imgModel:ImageModel = ImageModel.getInstance();

                   

                          [Bindable]
                          public var groupExprVO:GroupExprVO = null;

                   


                          override public function set data(value:Object):void {
                              super.data = value;
                              groupExprVO = GroupExprVO(value);
                          }
                          public function get listData():BaseListData {
                              return _listData;
                          }
                          public function set listData(value:BaseListData):void {
                              _listData = DataGridListData(value);
                              invalidateProperties();
                          }
                          private function onKeyDownOfDeleteSubject(event:KeyboardEvent) : void {
                              if (event.keyCode == 13 || event.keyCode == 46) {
                                  clickHandler(new MouseEvent(MouseEvent.CLICK));
                              }
                          }

                   

                          private function clickHandler(event:MouseEvent) : void {
                              if (!GlobalUtil.arrayCollectionIsNullOrEmpty(boModel.editOrganizerGroupExprEntriesArrayColle ction)) {
                                  boModel.editOrganizerGroupExprEntriesArrayCollection.removeItemAt(
                                          boModel.editOrganizerGroupExprEntriesArrayCollection.getItemIndex(groupExprVO));
                              }
                          }
                                             
                          ]]>
                      </mx:Script>
                      <!-- label="{Terminology.getInstance().getText('DeleteLbl')}" -->
                      <mx:LinkButton id="deleteSubject"
                                     icon="{imgModel.red_delete}"
                                     width="20"
                                     height="20"
                                     keyDown="onKeyDownOfDeleteSubject(event)"
                                     click="clickHandler(event)"
                                     rollOverColor="#FFFFFF" toolTip="Remove this line"/>
                  </mx:HBox>

                   


                  Hope this helps.

                  T.K.

                  1 person found this helpful
                  • 6. Re: Dynamically create button in a Dynamically created  Datagrid cell
                    lionkingdom Level 1

                    for anybody looking for the solution

                    here is a gret tutorial on this topic

                     

                    and thanks everyone who tried to help me and pointed me to the right direction

                     

                    http://www.adobe.com/devnet/flex/articles/itemrenderers_pt2_03.html

                    • 7. Re: Dynamically create button in a Dynamically created  Datagrid cell
                      jackcoupons

                      Absolutely fantastic posting! Lots of useful information and inspiration, both of which we all need! Thanks for the sharing information we will wait also for your new article keep posting. premium wp coupon codes ShopperPress Coupon WP Robot Discount Code Templatic Coupon wp themes Coupon Codes