<html> <head>
<script src="ActiveWidgets/runtime/lib/aw.js"></script>
<link href="ActiveWidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>
<style>
.aw-column-1 {text-align: right;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head> <body>
<script>
var HeaderText = ["Last Changed col","Best way?","Auto send","Dispose"];
var CellData = [
["aa","USPS","f","reconciled"],
["bb","Email","t","unreconciled"],
["cc","FedEX","t","reconciled"],
["cc","FedEX","f","hopeless"],
["dd","Phone","f","unreconciled"]
];
var popUpSelections_1 = ["Email","Phone","FedEX","USPS"];
var popUpSelections_2 = ["reconciled","unreconciled","hopeless"];
var obj = new AW.UI.Grid;
obj.setHeaderText(HeaderText);
obj.setCellText(function(c,r){return CellData[r][c]} );
//obj.setCellText(CellData); // this makes col setting impossible isBUG ? bug : feature!!!
obj.setSize(450, 120);
obj.setColumnCount(4);
obj.setRowCount(5);
obj.setColumnWidth(120, 0); // set the width wide first col (c0)
// add a checkbox to col 2 (the 3rd col)
obj.setCellTemplate(new AW.Templates.Checkbox, 2);
// set initial VALUE for column 2 From the CellData array NOTE: MUST BE SET to Boolean true/false.
obj.setCellValue(function(col, row){return CellData[row][2]=="t" ? true : false}, 2);
// to get "checked" state put a function in cell text, which follows the checks and writes it back into the CELL!
obj.setCellText(function(col, row){return this.getCellValue(col, row) ? "Yes" : "No!"}, 2);
// Put the Combo "template" (as opposed to the "control") in to second col (c1) & forth (c3)
obj.setCellTemplate(new AW.Templates.Combo, 1);
obj.setCellTemplate(new AW.Templates.Combo, 3);
// Populate the list, set the onClicked to move selection to cell, then hide the list.
obj.setPopupTemplate(function(col, row){
var list = new AW.UI.List;
if(col==1){ // if populating col==1 use this set of selections and this count
list.setItemText(popUpSelections_1); // selection list
list.setItemCount(4); // count
} else{ // all other cols of PopupTemplate use this set of selections
list.setItemText(popUpSelections_2); // different selection list
list.setItemCount(3); // differnt count
}
list.onItemClicked = function(event, i){
var selectedText = this.getItemText(i);
obj.setCellText(selectedText, col, row);
obj.setCellValue(selectedText, col, row);
obj.getCellTemplate(col, row).hidePopup();
}
return list;
});
obj.onCellValueChanged = function(value, col, row){
this.setCellText("c"+col+" r"+row+ " v="+value, 0, row); // show last new value in first col (c0)
if(col == 1)alert("value:"+value+" Column:"+col+" Row:"+row); // alert for second col (c1) only
}
document.write(obj);
</script>
</body> </html><html> <head>
<script src="ActiveWidgets/runtime/lib/aw.js"></script>
<link href="ActiveWidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>
<!-- BK3AW2CheckboxCombo.html -->
<script>docs=
"<br>"
+"<br> <B>Demo to show:</B> Checkbox template in Grid, and setting initial values. Combo template, 2 lists, setting/getting values."
+"<br> SEE:<b>** HERE is the MAIN POINT **</b> by viewing source, to see the important parts, there several."
+"<ul>"
+"<li> From sample data set 'CellData'; The 2nd column (c1) [and fourth (c3)] contain initial values for <b>Combo boxes</b>."
+"<br> "
+" "
+"<li> The checkbox initial value is SET from the the third column (c2) of CellData, you can use any text here (i.e '0'/'1' or 't'/'f')"
+"<br> Then convert that to boolean true/false on setting the initial value. View source for example."
+" "
+" "
+"</ul> "
+" C A V E A T S!"
+"<ul><li> For Checkboxes, the cell VALUE must be filled with a a Boolean true/false. That is, preset to all true or all false or "
+" get all the initial values from data array as shown in this example. View source!"
+"<li> You must MUST initially fill the grid using the <i>function method</i>. Just naming the 2d array will not work!!! View source!"
+"</ul>"
; </script>
<style>
.aw-column-1 {text-align: right;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head> <body>
<script>
var HeaderText = ["Last Changed col","Best way?","Auto send","Dispose"];
var CellData = [
["aa","USPS","f","reconciled"],
["bb","Email","t","unreconciled"],
["cc","FedEX","t","reconciled"],
["cc","FedEX","f","hopeless"],
["dd","Phone","f","unreconciled"]
];
var popUpSelections_1 = ["Email","Phone","FedEX","USPS"];
var popUpSelections_2 = ["reconciled","unreconciled","hopeless"];
// Create grid and set size etc.
var obj = new AW.UI.Grid;
obj.setHeaderText(HeaderText);
/* ******************************************************************************
// ** HERE is the MAIN POINT ** in order for setting Cols to initial checkbox settings
USE THIS method to fill grid.
********************************************************************************* */
obj.setCellText(function(c,r){return CellData[r][c]} );
//obj.setCellText(CellData); // DO NOT USE this method to fill grid.
obj.setSize(450, 120);
obj.setColumnCount(4);
obj.setRowCount(5);
obj.setColumnWidth(120, 0); // set the width wide first col (c0)
/* ******************************************************************************
** HERE is the MAIN POINT ** Here we setup the checkbox template,
initialize the values, then add a function to the cellText.
********************************************************************************* */
// add a checkbox to col 2 (the 3rd col)
obj.setCellTemplate(new AW.Templates.Checkbox, 2);
// set initial VALUE for column 2 From the CellData array NOTE: MUST BE SET to Boolean true/false.
obj.setCellValue(function(col, row){return CellData[row][2]=="t" ? true : false}, 2);
// to get "checked" state put a function in cell text, which follows the checks and writes it back into the CELL!
obj.setCellText(function(col, row){return this.getCellValue(col, row) ? "Yes" : "No!"}, 2);
/* --------------------------------------------------------------------------------- */
/* ******************************************************************************
** HERE is the MAIN POINT ** Here we setup the combo template,
NOTE: initial values are set from CellData. (cell TEXT itself, Not part of this template)
then set up Two differnt lists, one (popUpSelections_1) for col==1,
and all others get PopUpSelections_2
********************************************************************************* */
// Put the Combo "template" (as opposed to the "control") in to second col (c1) & forth (c3)
obj.setCellTemplate(new AW.Templates.Combo, 1);
obj.setCellTemplate(new AW.Templates.Combo, 3);
// Populate the list, set the onItemClicked to move selection to cell, then hide the list.
obj.setPopupTemplate(function(col, row){
var list = new AW.UI.List;
// one list for col 1, the other list for any other columns made.
if(col==1){ // if populating col==1 use this set of selections and this count
list.setItemText(popUpSelections_1); // selection list
list.setItemCount(4); // count
} else{ // all other cols of PopupTemplate use this set of selections
list.setItemText(popUpSelections_2); // different selection list
list.setItemCount(3); // differnt count
}
list.onItemClicked = function(event, i){
var selectedText = this.getItemText(i);
obj.setCellText(selectedText, col, row);
obj.setCellValue(selectedText, col, row);
obj.getCellTemplate(col, row).hidePopup();
}
return list;
});
/* --------------------------------------------------------------------------------- */
// When a cell is changed, put the col, row and new value, in the First col (c0)
obj.onCellValueChanged = function(value, col, row){
this.setCellText("c"+col+" r"+row+ " v="+value, 0, row); // show last new value in first col (c0)
if(col == 1)alert("value:"+value+" Column:"+col+" Row:"+row); // alert for second col (c1) only
}
document.write(obj);
document.write(docs);
</script>
</body> </html>
grid.setPopupTemplate(function(col, row) {
var grid = this;
var list = new AW.UI.List;
list.setItemText(["Option 1", "Option 2", "Option 3"]);
list.setItemValue([1, 2, 3]);
list.setItemCount(3);
list.onItemClicked = function(event, i){
var text = this.getItemText(i);
grid.setCellText(text, col, row);
grid.setCellValue(text, col, row);
grid.getCellTemplate(col, row).hidePopup();
}
return list;
});
grid.setPopupTemplate(function(col, row) {
var grid = this;
var list = new AW.UI.List;
list.setItemText(["Option 1", "Option 2", "Option 3"]);
list.setItemValue([1, 2, 3]);
list.setItemCount(3);
for (i = 0; i < list.getItemCount(); i++) {
if (grid.getCellValue(col, row) == list.getItemValue(i)) {
list.setSelectedItems([i]);
break;
}
}
list.onItemClicked = function(event, i){
var text = this.getItemText(i);
grid.setCellText(text, col, row);
grid.setCellValue(text, col, row);
grid.getCellTemplate(col, row).hidePopup();
}
return list;
});
This topic is archived.