cellRenderer Event passing Help

[David Simmons]

 have created a datagrid with cellRenders for the ComboBoxes. The datagrid works great and I am can edit my datagrid cell with no problem with the exception of the ComboBoxes. The ComboBoxes are populated from XML files as you will see in my examples. My cellEditListener works great on the cells them self but if I change the ComboBox. The ComboBox change never triggers the cellEditListener.

I think the problem is that the ComboBox needs to pass the event up to the DataGrid but I am not sure. Any suggestions…..



import mx.controls.gridclasses.DataGridColumn;
import mx.styles.CSSStyleDeclaration;
import mx.controls.DataGrid;

ContactTypeDataProvider = new Array();
XMLContactType = new XML();
XMLContactType.ignoreWhite = true;
XMLContactType.onLoad = ContactTypeOnLoad;
XMLContactType.load("http://10.40.226.138:8084/inventory/ContactType");

function ContactTypeOnLoad(sucess) {
   if (sucess) {
      processList(XMLContactType,ContactTypeDataProvider);
   }
}

ToolDataProvider = new Array();
XMLToolDoc = new XML();
XMLToolDoc.ignoreWhite = true;
XMLToolDoc.onLoad = XMLToolDocOnLoad;
XMLToolDoc.load("http://10.40.226.138:8084/inventory/NSSTools");

function XMLToolDocOnLoad(sucess) {
   if (sucess) {
      processList(XMLToolDoc,ToolDataProvider);
   }
}

function processList(XMLDoc,DataProvider) {
   Doc = XMLDoc.firstChild;
   for (i=0;i<Doc.childNodes.length;i++) {
      var id = Doc.childNodes.attributes.id;
      var txt = Doc.childNodes.firstChild.firstChild.nodeValue;
      DataProvider.addItem({label: txt, data:  id});
   }
}


var style:CSSStyleDeclaration= new mx.styles.CSSStyleDeclaration();
grid.setStyle("alternatingRowColors", Array(0xF5F5F5, 0xDCE5EE));

var columnCount = grid.columnCount;
grid.resizableColumns = false;
grid.hScrollPolicy = "auto";
grid.setEditable(true);

var id = new DataGridColumn("id");
id.headerText = "ID";
id.editable = false;
id.width = 30;
grid.addColumn(id);

var ToolID = new DataGridColumn("ToolID");
ToolID.headerText = "Tool";
ToolID.cellRenderer = "ToolComboBox";
ToolID.width = 200;
grid.addColumn(ToolID);

var Contact = new DataGridColumn("Contact");
Contact.headerText = "Contact";
Contact.width = 200;
grid.addColumn(Contact);

var Email = new DataGridColumn("Email");
Email.headerText = "Email";
Email.width = 200;
grid.addColumn(Email);

var TypeID = new DataGridColumn("TypeID");
TypeID.headerText = "Type";
TypeID.width = 120;
TypeID.cellRenderer = "ContactTypeComboBox";
grid.addColumn(TypeID);

this.xml.trigger();

cellEditListener = new Object();
cellEditListener.cellEdit = function(event){
   var column = grid.getColumnAt(event.columnIndex).columnName;
   var key = grid.dataProvider.getItemAt(event.itemIndex).ID;
   var cell = grid.dataProvider.getEditingData(event.itemIndex, column);

   //if(key == "")
   //   trace(column+cellValue);
      
   if(key != "")
      update(key,column,cell);
}

grid.addEventListener("cellEdit", cellEditListener);



//ToolComboBox  Class
import mx.controls.ComboBox;
import mx.controls.DataGrid;

class ToolComboBox extends MovieClip {
 private var Tool:ComboBox;
 private var listOwner:DataGrid;
 private var owner:MovieClip;
 private var createClassObject:Function;
 private var getCellIndex:Function;
 private var getDataLabel:Function;

 function ToolComboBox() {
   init();
 }

 private function init():Void {
   createClassObject(ComboBox, "Tool", 1);
   Tool.dataProvider = _root.ToolDataProvider;
   Tool.addEventListener("change", this);
 }
 
 private function change(oEvent:Object):Void {
   listOwner.editField(getCellIndex().itemIndex, getDataLabel(), Tool.value);
 }

 public function getPreferredWidth():Number {
   return 100;
 }

 public function getPreferredHeight():Number {
   return 25;
 }

 public function setSize(nWidth:Number, nHeight:Number):Void {
   Tool.setSize(nWidth, Tool.height);
 }

 public function setValue(sLabel:String, oItem:Object, sState:String):Void {
   Tool.visible = (oItem != undefined);
   for(var i:Number = 0; i < Tool.length; i++) {
     if(Tool.getItemAt(i).data == oItem[getDataLabel()]) {
       Tool.selectedIndex = i;
       break;
     }
   }
 }

}

[Jorge Solis]

Your cellEditListener doesn't fire because the scope of the change in the combobox is the ToolComboBox Class. You need to pass the info from inside your change event to somebody who procces the call (a function on  this.owner._parent, that's datagrid timeline) If you want to pass to the the cellEditListener.cellEdit, you need to call it passing forward the event. Also if your combobox is editable, probably tou want to handle another event, not only change

Jorge

[David Simmons]

Your cellEditListener doesn't fire because the scope of the change in the combobox is the ToolComboBox Class. You need to pass the info from inside your change event to somebody who procces the call (a function on  this.owner._parent, that's datagrid timeline) If you want to pass to the the cellEditListener.cellEdit, you need to call it passing forward the event. Also if your combobox is editable, probably tou want to handle another event, not only change

Jorge

Could you explain this in more detail...

[Jorge Solis]

The cellEditListener doesn't fire when you change combobox because the cell with a CellRenderer class is managed by that class (is like a wrapper for the cell) So events for this cell content is managed by the class assigned (ToolComboBox class) Now all events related to your combobox should be managed inside this class. If you need to pass values from inside the class to the outside world (say main timeline) listOwner is a reference to the datagrid containing this class, so you can us it for forwarding messages. I.e, I can forward the event object for muy change event inside my class to a procces() function in main timeline this way:

private function change(oEvent:Object):Void {
   listOwner.editField(getCellIndex().itemIndex, getDataLabel(), Tool.value);
   this.owner._parent.procces(oEvent:Object)
 }

Jorge