Combo in grid in 2.0.2 edit failure
I am trying to use a combo box in a grid, I want one where yo can only select the values in the combo and a second that allows you to select from the list or use a value in the list.
When I set the grid column to non-editable the combo box allows selecting values and displays the results in the grid after selecting. The one that does not define the column as editable alows typing in the column, but never updates the column value from the combo list.
I have trapped the selected value and short curcuited it to my DB update, but I cannot seem to update the displayed value in the cell. In addition, I cannot seem to find any event that fires after the editing so that I can check the list for a case different version of the same to prevent getting "ACER", "Acer", and "acer".
<pre>
<style type="text/css">
#Inventory .aw-alternate-even {background: #fff;}
#Inventory .aw-alternate-odd {background: #eee;}
#Inventory .aw-mouseover-row {background: #ddd;}
#Inventory .aw-rows-selected {background: #ddd;}
#Inventory .aw-rows-current {background: #ddd}
</style> <script language="javascript" type="text/javascript"><!--
var inventoryCells = [
<!-- BeanMerge LoopStart -->
["#ObjectId#", "#Id#", "#Customer.NaturalId#", "#Country#", "#Type#", "#Categories.NaturalId#", "#InventoryCategory.NaturalId#", "#Manufacturers.NaturalId#", "#ModelNumber#", "#Condition#", "#Price#", "#Quantity#", "#Description#", "#ExpirationDate#", "#UpdatedOn#", "#Updator.NaturalId#", "#Creator.NaturalId#", "#CreatedOn#", "#CreatedBy#"],
<!-- BeanMerge LoopEnd -->
];
var inventoryHeaders = ["ObjectId", "Id", "Customer", "Country", "Type", "Category", "InventoryCategory", "Manufacturer", "ModelNumber", "Condition", "Price", "Quantity", "Description", "ExpirationDate", "UpdatedOn", "Updator", "Creator", "CreatedOn", "CreatedBy"];
function findColumn(name) {
var i;
for(i=0; i<inventoryHeaders.length && inventoryHeaders[i] != name; i++);
if (i < inventoryHeaders.length)
return i;
return -1;
}
var manufactures = [<!-- Parent Block Manufacturers|Manufacturer -->"#Manufacturer#", <!-- Parent Block End --> ""];
var categories = [<!-- Parent Block Categories|code -->"#Category#", <!-- Parent Block End --> ""];
// create grid object
var inventory = new AW.UI.Grid;
// set name
inventory.setId("Inventory");
// assign cells and headers text
inventory.setCellText(function(col, row) {return inventoryCells[row][col];});
inventory.setHeaderText(inventoryHeaders);
// set number of columns/rows
inventory.setColumnCount(18);
inventory.setRowCount(#PageSize#);
inventory.setRowHeight(20);
// set size
inventory.setControlSize(830,300);
//inventory.setColumnWidth([100, 40]);
// style
//inventory.setSelectionMode("single-row");
//inventory.setSelectionMode("multi-row");
var changedRow = new Array();
inventory.onCellValidated = function(text, column, row){
changedRow[column] = text;
}
// changing rows
var previousRow = -1;
inventory.onCurrentRowChanging = function(newRow){
previousRow = this.getCurrentRow();
}
inventory.onCurrentRowChanged = function(newRow){
this.calculateRowState(previousRow);
if (changedRow.length > 0) {
//alert("Cells Changed");
var idCol = findColumn("ObjectId");
if (idCol >=0) {
//alert("New:"+newRow+", old:"+previousRow);
var r = new AW.HTTP.Request;
r.setURL("Inventory.jsp");
r.setRequestMethod("POST");
r.setParameter("Command", "save");
r.setParameter("ObjectId", this.getCellValue(idCol, previousRow));
var i;
for(i=0; i<changedRow.length; i++)
if (changedRow[i] != null)
r.setParameter(inventoryHeaders[i], changedRow[i]);
r.request();
}
}
this.calculateRowState(newRow);
changedRow = new Array();
}
// combo Boxes
inventory.setCellTemplate(new AW.Templates.Combo, 5);
inventory.setCellTemplate(new AW.Templates.Combo, 7);
inventory.setPopupTemplate(function(col, row){
var list = new AW.UI.List;
if (col == 5) {
list.setItemText(categories);
list.setItemCount(categories.length-1);
list.onItemClicked = function(event, i){
var value = this.getItemText(i);
inventory.setCellValue(value, col, row);
inventory.setCellText(value, col, row);
inventory.getCellTemplate(col, row).hidePopup();
if (previousRow == -1)
previousRow = row;
if (row != previousRow)
inventory.onCurrentRowChanged(row);
changedRow[col] = value;
//alert("col:"+col+", row:"+row+", value:"+value);
}
} else if (col == 7) {
list.setItemText(manufactures);
list.setItemCount(manufactures.length-1);
list.onItemClicked = function(event, i){
var value = this.getItemText(i);
inventory.setCellValue(value, col, row);
inventory.setCellText(value, col, row);
inventory.getCellTemplate(col, row).hidePopup();
if (previousRow == -1)
previousRow = row;
if (row != previousRow)
inventory.onCurrentRowChanged(row);
changedRow[col] = value;
//alert("col:"+col+", row:"+row+", value:"+value);
}
}
list.onControlTextChanged = function(text){
alert("test");
if (text!=lastvalue) {
var foundit=false;
for (var x = 0; x <= dropdowntext.length-1; x++) {
if (dropdowntext[x].toUppercase==text.toUpperCase) {
foundit=true;
break;
}
}
if (foundit==false) {
obj.setControlText(lastvalue);
this.showPopup(); }
};
lastvalue=obj.getControlText();
}
list.onControlActivated = function(event){ lastvalue=obj.getControlText(); };
return list;
});
// editable
inventory.setCellEditable(true);
inventory.setCellEditable(false,0);
inventory.setCellEditable(false,1);
inventory.setCellEditable(false,5);
// Links
// write grid to the page
document.write(inventory);
// -->
</script>
</pre>
When I set the grid column to non-editable the combo box allows selecting values and displays the results in the grid after selecting. The one that does not define the column as editable alows typing in the column, but never updates the column value from the combo list.
I have trapped the selected value and short curcuited it to my DB update, but I cannot seem to update the displayed value in the cell. In addition, I cannot seem to find any event that fires after the editing so that I can check the list for a case different version of the same to prevent getting "ACER", "Acer", and "acer".
<pre>
<style type="text/css">
#Inventory .aw-alternate-even {background: #fff;}
#Inventory .aw-alternate-odd {background: #eee;}
#Inventory .aw-mouseover-row {background: #ddd;}
#Inventory .aw-rows-selected {background: #ddd;}
#Inventory .aw-rows-current {background: #ddd}
</style> <script language="javascript" type="text/javascript"><!--
var inventoryCells = [
<!-- BeanMerge LoopStart -->
["#ObjectId#", "#Id#", "#Customer.NaturalId#", "#Country#", "#Type#", "#Categories.NaturalId#", "#InventoryCategory.NaturalId#", "#Manufacturers.NaturalId#", "#ModelNumber#", "#Condition#", "#Price#", "#Quantity#", "#Description#", "#ExpirationDate#", "#UpdatedOn#", "#Updator.NaturalId#", "#Creator.NaturalId#", "#CreatedOn#", "#CreatedBy#"],
<!-- BeanMerge LoopEnd -->
];
var inventoryHeaders = ["ObjectId", "Id", "Customer", "Country", "Type", "Category", "InventoryCategory", "Manufacturer", "ModelNumber", "Condition", "Price", "Quantity", "Description", "ExpirationDate", "UpdatedOn", "Updator", "Creator", "CreatedOn", "CreatedBy"];
function findColumn(name) {
var i;
for(i=0; i<inventoryHeaders.length && inventoryHeaders[i] != name; i++);
if (i < inventoryHeaders.length)
return i;
return -1;
}
var manufactures = [<!-- Parent Block Manufacturers|Manufacturer -->"#Manufacturer#", <!-- Parent Block End --> ""];
var categories = [<!-- Parent Block Categories|code -->"#Category#", <!-- Parent Block End --> ""];
// create grid object
var inventory = new AW.UI.Grid;
// set name
inventory.setId("Inventory");
// assign cells and headers text
inventory.setCellText(function(col, row) {return inventoryCells[row][col];});
inventory.setHeaderText(inventoryHeaders);
// set number of columns/rows
inventory.setColumnCount(18);
inventory.setRowCount(#PageSize#);
inventory.setRowHeight(20);
// set size
inventory.setControlSize(830,300);
//inventory.setColumnWidth([100, 40]);
// style
//inventory.setSelectionMode("single-row");
//inventory.setSelectionMode("multi-row");
var changedRow = new Array();
inventory.onCellValidated = function(text, column, row){
changedRow[column] = text;
}
// changing rows
var previousRow = -1;
inventory.onCurrentRowChanging = function(newRow){
previousRow = this.getCurrentRow();
}
inventory.onCurrentRowChanged = function(newRow){
this.calculateRowState(previousRow);
if (changedRow.length > 0) {
//alert("Cells Changed");
var idCol = findColumn("ObjectId");
if (idCol >=0) {
//alert("New:"+newRow+", old:"+previousRow);
var r = new AW.HTTP.Request;
r.setURL("Inventory.jsp");
r.setRequestMethod("POST");
r.setParameter("Command", "save");
r.setParameter("ObjectId", this.getCellValue(idCol, previousRow));
var i;
for(i=0; i<changedRow.length; i++)
if (changedRow[i] != null)
r.setParameter(inventoryHeaders[i], changedRow[i]);
r.request();
}
}
this.calculateRowState(newRow);
changedRow = new Array();
}
// combo Boxes
inventory.setCellTemplate(new AW.Templates.Combo, 5);
inventory.setCellTemplate(new AW.Templates.Combo, 7);
inventory.setPopupTemplate(function(col, row){
var list = new AW.UI.List;
if (col == 5) {
list.setItemText(categories);
list.setItemCount(categories.length-1);
list.onItemClicked = function(event, i){
var value = this.getItemText(i);
inventory.setCellValue(value, col, row);
inventory.setCellText(value, col, row);
inventory.getCellTemplate(col, row).hidePopup();
if (previousRow == -1)
previousRow = row;
if (row != previousRow)
inventory.onCurrentRowChanged(row);
changedRow[col] = value;
//alert("col:"+col+", row:"+row+", value:"+value);
}
} else if (col == 7) {
list.setItemText(manufactures);
list.setItemCount(manufactures.length-1);
list.onItemClicked = function(event, i){
var value = this.getItemText(i);
inventory.setCellValue(value, col, row);
inventory.setCellText(value, col, row);
inventory.getCellTemplate(col, row).hidePopup();
if (previousRow == -1)
previousRow = row;
if (row != previousRow)
inventory.onCurrentRowChanged(row);
changedRow[col] = value;
//alert("col:"+col+", row:"+row+", value:"+value);
}
}
list.onControlTextChanged = function(text){
alert("test");
if (text!=lastvalue) {
var foundit=false;
for (var x = 0; x <= dropdowntext.length-1; x++) {
if (dropdowntext[x].toUppercase==text.toUpperCase) {
foundit=true;
break;
}
}
if (foundit==false) {
obj.setControlText(lastvalue);
this.showPopup(); }
};
lastvalue=obj.getControlText();
}
list.onControlActivated = function(event){ lastvalue=obj.getControlText(); };
return list;
});
// editable
inventory.setCellEditable(true);
inventory.setCellEditable(false,0);
inventory.setCellEditable(false,1);
inventory.setCellEditable(false,5);
// Links
// write grid to the page
document.write(inventory);
// -->
</script>
</pre>
Paul R.
March 31,