7 Replies Latest reply on Nov 30, 2006 11:26 AM by jfillman

    DataGrid Button

    jfillman Level 1
      I have a three part question:
      <mx:DataGridColumn headerText="Delete" dataField="Delete" width="25" itemRenderer="mx.controls.Button" rendererIsEditor="true" editorDataField="selected"/>

      I need the button in this column to have the text of "Remove" on the button.

      Second, when I click the button, I need it to remove the row from the DataGrid.

      Third, how do I control the width of the button?
        • 1. Re: DataGrid Button
          peterent Level 2
          For your example it would be better to create a new component file (say RemoveButton.mxml):

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Button xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" label="Remove" click="handleClick()" >

          <mx:Script>
          <![CDATA[
          import mx.controls.DataGrid;
          import mx.events.ItemClickEvent;

          private function handleClick() : void
          {
          var event:ItemClickEvent = new ItemClickEvent( ItemClickEvent.ITEM_CLICK );
          event.relatedObject = this; // the button that triggered this event
          event.item = data; // the record from the dataProvider
          event.index = listData.rowIndex;
          (listData.owner as DataGrid).dispatchEvent( event );
          }

          ]]>
          </mx:Script>

          </mx:Button>

          <mx:DataGridColumn headerText="Delete" dataField="Delete" width="25" itemRenderer="RemoveButton" />

          The width and height are set to 100% so that it occupies the entire cell. You control its width by changing the width of the DataGridColumn. If you don't want to have it size relative to the DataGrid column then use specific width and height values.

          A Button is not an editor control and you aren't using it to edit the data field, you want it to remove the row. When the Button is clicked it dispatches a click event. The RemoveButton captures it own click event and creates an ItemClickEvent which it has the DataGrid dispatching. Then you catch the ItemClickEvent in the DataGrid tag and use the information in the event to delete the row from the dataProvider.

          An alternative is to attempt to delete the row right inside the RemoveButton click hander:

          private function handleClick() : void
          {
          var dp:ArrayCollection = listData.owner.dataProvider;
          dp.removeItemAt( listData.rowIndex );
          }

          This might prove to be the easiest way but I prefer to tinker with the dataProvider outside of the DataGrid.
          • 2. Re: DataGrid Button
            ur_dtrain Level 1
            An alternative to an external file is to use an inline renderer:

            <mx:DataGridColumn headerText="Delete" dataField="Delete" width="25">
            <mx:itemRenderer>
            <mx:Component>
            <mx:Button click="handleClick()">
            <mx:Script>
            <![CDATA[
            // Peter's code goes here
            ]]>
            </mx:Script>
            </mx:Button>
            </mx:Component>
            </mx:itemRenderer>
            </mx:DataGridColumn>
            • 3. Re: DataGrid Button
              jfillman Level 1
              I prefer not using the external file if at all possible.

              Below is my code so far. The first thing I noted is that I had to put the <mx:Script> tag inside a container. If I don't have it in a container, Flex Builder returns an error that <mx:Script> is a "Non-MXML language element...". The added benefit of using the VBox container is that it allows me to center the button in the gridColumn.

              The problem I'm having now is properly referencing the dataGrid.selectedIndex in my function. I assumed that I could do this:

              ptAxisIGridProvider.removeItemAt(axisI_selectedGrid.selectedIndex);

              However, I get an error that ptAxisIGridProvider and axisI_selectedGrid are undefined properties.


              <mx:DataGrid top="207" left="0" id="axisI_selectedGrid" dataProvider="{ptAxisIGridProvider}" editable="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" right="0" height="136">
              <mx:columns>
              <mx:DataGridColumn headerText="Delete" dataField="Delete" width="25" editable="false">
              <mx:itemRenderer>
              <mx:Component>
              <mx:VBox horizontalAlign="center">
              <mx:Script>
              <![CDATA[
              private function axisIRemove() :void {
              }
              ]]>
              </mx:Script>
              <mx:Button label="Remove" width="70" click="axisIRemove();" />
              </mx:VBox>
              </mx:Component>
              </mx:itemRenderer>
              </mx:DataGridColumn>
              <mx:DataGridColumn headerText="Description" dataField="Code_Description"/>
              <mx:DataGridColumn headerText="Code" width="75" dataField="Code" editable="false"/>
              </mx:columns>
              </mx:DataGrid>
              • 4. DataGrid Button
                ur_dtrain Level 1
                In the mx:Button give it a width="70%" or whatever fits, and add horizontalCenter="0" to the button is centered.

                In your function axisIRemove, add the code:

                axisI_selectedGrid.dataProvider.removeItemAt(axisI_selectedGrid.selectedIndex);

                By clicking on the button you are setting the selectedIndex for the grid, therefore it should be available for removing a row from the dataProvider.

                Edit:

                In your script block; import mx.core.Application, then the code should be:

                Application.application.axisI_selectedGrid.dataProvider.removeItemAt(axisI_selectedGrid.se lectedIndex);

                This assumes that axisI_selectedGrid is in the main application, otherwise add the rest of the path.

                Or you could do what Peter stated with something like:

                DataGrid(this.parent.parent.parent).dataProvider

                Which translates as "button.box.column.datagrid" which you'll need to cast as a DataGrid to reach the dataProvider
                • 5. Re: DataGrid Button
                  jfillman Level 1
                  Darin,
                  This is getting a bit over my head, but it seems that I don't have any access to the DataGrid dataProvider.

                  I tried your suggestion first, but still get axisI_selectedGrid is an undefined property.

                  I started trying part of Peter's suggestion
                  private function axisIRemove() :void {
                  var dp:ArrayCollection=ptAxisIGridProvider;
                  }

                  I presume my syntax is not correct, but I didn't quite follow Peter's initial example either.
                  • 6. DataGrid Button
                    ur_dtrain Level 1
                    You'll definitely need to either track upward from the button using "this.parent..." or track downward from the "Application.application" scope (Application.application is a reference into the top level variables/objects/functions).

                    Oh, and I just noticed - the Script block should be inside the Button so:

                    <mx:DataGrid top="207" left="0" id="axisI_selectedGrid" dataProvider="{ptAxisIGridProvider}" editable="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" right="0" height="136">
                    <mx:columns>
                    <mx:DataGridColumn headerText="Delete" dataField="Delete" width="25" editable="false">
                    <mx:itemRenderer>
                    <mx:Component>
                    <mx:VBox horizontalAlign="center">
                    <mx:Button label="Remove" width="70%" click="axisIRemove();" horizontalCenter="0" >
                    <mx:Script>
                    <![CDATA[
                    import mx.core.Application
                    private function axisIRemove() :void {
                    Application.application.axisI_selectedGrid.dataProvider.removeItemAt(Application.applicati on.axisI_selectedGrid.selectedIndex);
                    }
                    ]]>
                    </mx:Script>
                    </mx:Button>
                    </mx:VBox>
                    </mx:Component>
                    </mx:itemRenderer>
                    </mx:DataGridColumn>
                    <mx:DataGridColumn headerText="Description" dataField="Code_Description"/>
                    <mx:DataGridColumn headerText="Code" width="75" dataField="Code" editable="false"/>
                    </mx:columns>
                    </mx:DataGrid>

                    Sorry I didn't catch that first.

                    Edit: Syntax errors, oops
                    • 7. Re: DataGrid Button
                      jfillman Level 1
                      Darin, works perfectly!! Thank you.