Edit Row outside of the Datagrid

I am trying to build a way to click on a row in my datagrid (filled by array) and populate the row values into a form below my grid with items like combo boxes, textboxes, and check boxes.

I would like to then save this data to the grid by use of a save button.

I Created a Custom control that has a combo box filled with Database data in col 0, a TextBox in col 1 that is Read only and populates with Data from Database when combobox (col 0) changes using an Http.Request and 3 other textboxes.

This works fine. The issue is I cannot get the rowchanged event in the Grid to populate the control.

________________________________________________
control is created via
AW.HTML.myTestControl = AW.System.Control.subclass();
AW.HTML.myTestControl.create = function(){
var obj1 = this.prototype;
obj1.cboItems = new AW.UI.Combo();
obj1.cboItems.setStyle('width','250px');
obj1.cboItems.getPopupTemplate().setStyle("width","250px");
obj1.cboItems.setControlText("");
obj1.cboItems.setItemText(MiscTypes);
obj1.cboItems.setItemCount(MiscTypes.length);
obj1.cboItems.getContent('box/text').setAttribut('readonly', 'readonly');
obj1.cboItems.setPosition(137,20);
obj1.cboItems.onControlEditEnded = function(text){obj1.GetUnits();}

obj1.lblQty = new AW.UI.Label;
obj1.lblQty.setControlText("Qty");
obj1.lblQty.setPosition(391,0);

obj1.txtQty = new AW.UI.Input();
obj1.txtQty.setPosition( 391,20 );
obj1.txtQty.setControlText("1");
obj1.txtQty.setStyle("width","30px");

obj1.GetUnits = function(){
var a = this.cboItems.getControlText();
var r = new AW.HTTP.Request;
var X = "";
r.setURL("ListGetOptions.jsp");
r.setRequestMethod("POST");
r.setParameter("type", "GetUnits");
r.setParameter("MI", a);
r.request();
r.response = function(data){obj1.txtUnits.setControlText(data);}
}

<<<ADDITIONAL CODE HERE>>>
}
var MyCtl = new AW.HTML.myTestControl();
document.write(MyCtl);



Any help would be great.

You are probably looking for onCurrentRowChanged event -

grid.onCurrentRowChanged(rowIndex){
...
}