3 Replies Latest reply on Jun 5, 2009 12:16 PM by Flex harUI

    A DataGrid with a Custom ItemRenderer

    Martin Harrigan

      Hi all,

       

      I have a DataGrid whose DataProvider is bound to a simple Array. I have a custom ItemRenderer that includes a button that can remove the item itself (I don't want two separate columns with a remove button in one of them). However, I don't understand the behaviour - clicking the button rearranges the data in the DataGrid and sometimes duplicate the entries! See the example attached. Any idea what's happening?

       

      Martin.

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete();" xmlns:local="*">
          <mx:Script>
              <![CDATA[
                  [Bindable]
                  public var _data : Array;
                     
                  protected function onCreationComplete() : void {
                      _data = new Array();
                      _data.push(1, 2, 3, 4, 5);
                  }
              ]]>
          </mx:Script>
          <mx:VBox>
              <mx:DataGrid dataProvider="{_data}">
                  <mx:columns>
                      <mx:DataGridColumn>
                          <mx:itemRenderer>
                              <mx:Component>
                                  <mx:HBox implements="mx.controls.listClasses.IDropInListItemRenderer" creationComplete="dataLabel.text = String(data);">
                                      <mx:Script>
                                          <![CDATA[
                                              import mx.collections.ArrayCollection;
                                              import mx.controls.DataGrid;
                                              import mx.controls.listClasses.BaseListData;
                                             
                                              protected var _listData : BaseListData;
                                 
                                              public function get listData() : BaseListData {
                                                  return _listData;
                                              }
                                             
                                              public function set listData(d : BaseListData) : void {
                                                  _listData = d;
                                              }
                                             
                                              protected function onClick(e : Event) : void {
                                                  var dp : ArrayCollection = (owner as DataGrid).dataProvider as ArrayCollection;
                                                  dp.removeItemAt(listData.rowIndex);
                                 
                                              }
                                          ]]>
                                      </mx:Script>
                                      <mx:Label id="dataLabel" width="100%" />
                                      <mx:Button click="onClick(event);"/>
                                  </mx:HBox>
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                  </mx:columns>
              </mx:DataGrid>
          </mx:VBox>
      </mx:Application>