3 Replies Latest reply on Oct 19, 2008 7:14 AM by Newsgroup_User

    Delete on Datagrid row bug?

    happybrowndog
      Is there a bug with setting a TextInput as an itemRenderer (in a Datagrid)?
      Could someone PLEASE help me out with this one? I've debugged and redone this code about 10 ways in the last 14 hours, but to no avail.

      When I delete a row from a Datagrid, the rows get confused. Here are images of the resulting confusion:

      Before delete of row #5: http://i36.tinypic.com/nvxf2f.jpg
      After delete of row #5: http://i37.tinypic.com/2ez0k7b.jpg

      If you look at the first image, the data values for each row reflect the row number they are on. For instance, row 0 has values 0.10, 0.20, 0.30 and so on. Row 5 has values 5.10, 5.20, 5.30 and so on. I did this on purpose to simplify debugging.

      The second image shows what happens after the Delete button is pressed when the row cursor is positioned on row 5. Notice how row 7 (I have highlighted it) has incorrectly taken the value 5.30 under the column "Hardy Sales". This is the possible bug I am talking about.

      Here are the relevant snippets of the code that produced the above:

      The Datagrid defines only 2 columns initially:

      <mx:DataGrid id="grid1" width="760" height="420" rowHeight="25" dataProvider="{meatdata}" creationComplete="assignGridListeners()" editable="true" itemEditEnd="checkCellValue(event);" click="gridMouseEvent(event);" >
      <mx:columns>
      <mx:DataGridColumn dataField="rid" headerText="#" width="22" editable="false" textAlign="right" backgroundColor="gray"/>
      <mx:DataGridColumn dataField="itemname" headerText="Item" width="170" editable="false" textAlign="left" />
      </mx:columns>
      </mx:DataGrid>


      When data is received from the server, the rest of the columns are dynamically generated:

      for each(item in this.groupvendors) {
      var s:String = item.toString();
      trace(s);
      var dgc:DataGridColumn = new DataGridColumn();
      dgc.editable=true;
      dgc.dataField=s;
      dgc.headerText=s;
      dgc.setStyle("textAlign","right");
      dgc.width=97;

      dgc.rendererIsEditor=true;
      dgc.itemRenderer = new ClassFactory(TextInput);
      }


      The dataprovider for the Datagrid is an XMLListCollection:

      [Bindable]
      private var meatdata:XMLListCollection;


      When the user clicks the Delete button, the following code is executed:

      private function deleteRow():void {
      if (selectedproduct=="") { return; }
      Alert.show("Are you sure you wish to delete " + selectedproduct + " ?","Confirm Delete",Alert.YES | Alert.NO, this, delRowHandler, null, Alert.NO);
      }

      private function delRowHandler(evt:CloseEvent):void {
      if ((evt.detail == Alert.NO) || (evt.detail == Alert.CANCEL)) {
      return;
      }
      this.meatdata.removeItemAt(i);
      this.meatdata.refresh();
      this.grid1.invalidateList();
      this.grid1.invalidateDisplayList();
      }


      The reason I used a ClassFactory and rendererIsEditor on the Datagrid is because I wanted my TextInput colors to be changed to show that an edit has taken place in the cell:

      private function checkCellValue(event:DataGridEvent):void {
      ...

      var ti:TextInput = TextInput(event.currentTarget.itemEditorInstance);
      ti.setStyle("color",0xFF0000);
      ti.setStyle("backgroundColor",0x00FA1F);
      }