3 Replies Latest reply on Sep 9, 2009 10:46 AM by TheFlexGuy

    adding button in the line of a datagrid

    ^^GOUST^^

      <mx:DataGrid x="0" y="0" width="100%" height="100%">
                                              <mx:columns>
                                                  <mx:DataGridColumn headerText="close" width="60" dataField="col1">
                                                       <mx:itemRenderer>
                                                              <mx:Component>            
                                                               <mx:Button label="X">
                                                          </mx:Component>
                                                  </mx:itemRenderer>
                                                  </mx:DataGridColumn>
                                                  <mx:DataGridColumn headerText="test" width="60" dataField="col2"/>
                                                  <mx:DataGridColumn headerText="test2" width="60" dataField="col3"/>

       

                                              </mx:columns>
                                          </mx:DataGrid>

       

      But when I run code nothing happens and doubt that I will have more forward

       

      when the datagrid is populated, the component display the button on the lines that there is data.
        • 1. Re: adding button in the line of a datagrid
          TheFlexGuy Level 2

          Are you attempting to create a close button on each row of the datagrid??

          Do you have a dataProvider for the datagrid?  You'll need some data if you want something to show up.

           

          It's difficult to understand your goal for this.  Could you please explain?

          • 2. Re: adding button in the line of a datagrid
            ^^GOUST^^ Level 1
            My goal: when the DataGrid has populated, in the first column has an X to symbolize the exclusion of the record from the grid.

            <mx:DataGrid x="0" y="0" width="100%" height="100%">
                                                    <mx:columns>
                                                        <mx:DataGridColumn headerText="close" width="60" dataField="col1">
                                                             <mx:itemRenderer>
                                                                    <mx:Component>            
                                                                     <mx:Button label="X" click="exclusion()">
                                                                </mx:Component>
                                                        </mx:itemRenderer>
                                                        </mx:DataGridColumn>
                                                        <mx:DataGridColumn headerText="test" width="60" dataField="col2"/>
                                                        <mx:DataGridColumn headerText="test2" width="60" dataField="col3"/>

             

                                                    </mx:columns>
                                                </mx:DataGrid>

            • 3. Re: adding button in the line of a datagrid
              TheFlexGuy Level 2

              If you didn't want to remove the data from the dataprovider completely, so you could have the ability to add it back in later, you should consider using a filter on the arrayCollection.

               

              I'd set up an array that would hold the items you've removed.  When the close button gets clicked for a specific item, add that item to the array in the event handler.  Then refresh the arrayCollection and it will no longer show up.

               

              Your filterFunction for the ArrayCollection holding all your data would look something like:

              private var _excludes:Array = new Array();
              
              private function excludeFilter(item:Object):Boolean
              {
                   if(_excludes.indexOf(item) != -1)
                   {
                        return true;
                   }
                   return false;
              }
              

              There are a number of other ways to accomplish this, but this is the easiest one that comes to mind.

               

              -Marty [ http://www.theflexguy.com ]

              Helpful/Answered? Don't forget to mark it that way.