1 Reply Latest reply on May 11, 2007 3:15 AM by GYorky

    Button inside a DataGrid... possible?

    HyderAlamgir Level 1
      I created a data grid populated from external xml file. I want the first column to have a button in it. Here's what I tried.

      <mx:DataGrid>
      <mx:columns>
      <mx:DataGridColumn>
      <mx:button label="Click Me" />
      </mx:DataGridColumn>
      </mx:columns>
      </mx:DataGrid>

      ERROR: Could not resolve <mx:button> to a component implementation.

      Is there a way to create a button inside a datagrid or do I have to use a custom component?

        • 1. Re: Button inside a DataGrid... possible?
          GYorky
          Hi,
          Yes it is possible to include a button inside a datagrid. You have to use something called an ItemRenderer. Item Renderes (and itemEditors) let you put almost anything you like (checkboxes, dropdown lists, buttons, images) in a datagrid.

          There are a number of ways you can create a button in a datagrid. You allways use an Item Renderer, but there are a couple of ways of doing this. I've modified your code to make it work in the simplest way posible. The button won't do anything, but the code will run and you will see the button in your datagrid.

          <mx:DataGrid>
          <mx:columns>
          <mx:DataGridColumn editable="false"> // I've changd this line GYORKY
          <mx:itemRenderer> // I've added this line - GYORKY
          <mx:Component> // I've added this line - GYORKY
          <mx:button label="Click Me" />
          <mx:Component/> // I've added this line - GYORKY
          <mx:itemRenderer/> // I've added this line - GYORKY
          </mx:DataGridColumn>
          </mx:columns>
          </mx:DataGrid>

          Here is another example from a program I wrote. I had a button that I wanted to use in a number of datagrids, so first I defined it outside the datagrid, and then I added it to my datagrid.

          First of all, here is the button that goes in the datagrid. We have to use the Component tag to define it.

          <mx:Component id="showContractInSap">
          <mx:Button label="View Contract" enabled="true" click="doClick()">
          <mx:Script>
          <![CDATA[
          public function doClick():void {
          // This is where you put what you want the button to do. If you want to call another method,
          // you have to prefix it with outerDocument. e.g. outerDocument.doSomething();
          }
          ]]>
          </mx:Script>
          </mx:Button>
          </mx:Component>

          Now we add it to the datagrid as an item renderer.

          <mx:DataGrid x="10" height="190" top="124">
          <mx:columns>
          <mx:DataGridColumn headerText="View Contract"
          itemRenderer="{showContractInSap}" editable="false"/>
          </mx:columns>
          </mx:DataGrid>

          It can get a bit messy and complicated, so I'd recommend taking a look at the documentation on item renderers

          Let me know if this helped

          GYorky