Basic Knowledge Demo, (LastRow value) and more.
This week some on asked: How to get VALUE of last row? Alex responded with his usual beautiful code. I have incorporated this into a full page demo, ready to try and play with. Hopefully this will be good enough for a beginner demo on Jim's NEW web site. (PLEASE all you pros VET this, and correct any misconceptions I have! or poor wording.) It seems this is basic knowledge one must have before embarking on Sending edited data Back to Server process...
The demo takes Alex's "get last row VALUE" example, expands on it, and allows you to play.
The salient points are mostly about when and where the Row indices are created and used... (and how to get cell text using them). To some this is probably OBVIOUS, but surely to a one first looking at AW it is NOT.
AW has to be one of the most Artfully crafted pieces of code I have ever seen.
Ok here goes, please VET before using:
(v2.0RC1)
The demo takes Alex's "get last row VALUE" example, expands on it, and allows you to play.
The salient points are mostly about when and where the Row indices are created and used... (and how to get cell text using them). To some this is probably OBVIOUS, but surely to a one first looking at AW it is NOT.
AW has to be one of the most Artfully crafted pieces of code I have ever seen.
Ok here goes, please VET before using:
(v2.0RC1)
<html><head>
<!-- ----------------------------------------------------------------------------------
Demo to illustrate Get VALUE of last Row (any column #). The gotcha being that you need either
"Row Position" or "ROW index" depending on whether the RowIndicies are created yet!
Using the data set "myData", data is simply installed with no ROW INDEX created, or necessary.
1.) after loading, Try pushing the button, to get ANY Column's Last Row VALUE. (Note, the resulting text says: 'by ROWPOSITION".)
2.) Sort by any column heading then push for the same or any column again, ( the resulting text says 'by ROWINDEX')
In other words, Sorting is forced to CREATE a ROW index array.
3.) After a little EDITING (edit any column, noting text or numeric in header)
SORT, note that any ROW INDEX can end up at the as the last row (depending on the sort) TRY it.
4.) After the grid is created below (var obj = new AW.UI.Grid; see below), you can comment in/out the the other data set "myDataID"
Then the rows will always have a ROW INDEX.
5.) At the END of this page is the meat of this demo in "function getlastrowvalue(columnIndex)" The rest is 'setup'
F E A T U R E C R E E P!
By way of example, BUT no explanation, there are several other features...
1.) Column alignment
2.) ODD EVEN color and (my personal favorite) Triplet colors (thanks Alex again!!!)
3.) Text AND number formated columns for proper sorting
4.) Row selectors, numbered
5.) INPUT, LABEL, and BUTTON UI's
6.) Editing turned on
C A V E A T S!
1.) there is no error checking on input or grid fields,
i.e., col number must be in range, number and text fields must be entered correctly in grid.
---------------------------------------------------------------------------------- -->
<title>ActiveWidgets Grid :: Examples : Get Last Row Value of any Col.</title>
<link href="ActiveWidgets/runtime/styles/classic/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="ActiveWidgets/runtime/lib/aw.js"></script>
<style>
.aw-column-0 {text-align: center;}
.aw-column-1 {text-align: right;}
.aw-column-2 {text-align: center;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
.aw-alternate-even {background: #39C0CF ;}
.aw-alternate-odd {background: #9CF9F9;}
.aw-mouseover-row {background: #F9F99F;}
#myInput {width: 90px; height: 16px}
#myButton {width: 120px;}
</style>
<script>
// Date set with no Row index (row indicies not yet assigned)
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
];
// Data set with fixed assigned ROW index.
var myDataID = [];
myDataID["11"] = ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"];
myDataID["22"] = ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"];
myDataID["33"] = ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"];
myDataID["44"] = ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"];
myDataID["45"] = ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"];
myDataID["55"] = ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"];
myDataID["66"] = ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"];
myDataID["77"] = ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"];
myDataID["88"] = ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"];
myDataID["99"] = ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"];
myDataID["1010"] = ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"];
var columnHead = ["Sort Text (c 0)", "Sort Text (c1)", "Sort Numeric (c2)", "Sort Numeric (c3)", "Sort Text (c4)"];
</script>
</head><body>
<script>
var obj = new AW.UI.Grid;
/* *********************************************************************
///////////////////////////////////////////////////////////////////// */
// ** NOTE ** if you uncomment the line which uses "myDataID", then Grid will always have an Inicies array... TRY it.
// ** Else use "mydata", rows with have a ROW position ONLY (try getting the last row value BEFORE sorting, then After sorting)
obj.setCellText(myData);
//obj.setCellText(myDataID); obj.setRowIndices([11,22,33,44,55,66,77,88,99,1010]); // these are pair comment in/out together!
/* /////////////////////////////////////////////////////////////////////
********************************************************************* */
obj.setSize(500, 200);
// Show a pretty row selector, label it, widen it.
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
obj.setSelectorWidth(25);
// NUMBER format for cols 0,2 so they sorts numerically not alphabetically
var number = new AW.Formats.Number;
obj.setCellFormat(number, 2);
obj.setCellFormat(number, 3);
// Make the colors for odd - even do triplets (three rows one color three another like Quicken ). (One of Alex's little gems!)
function triplets(){
return this.getRowProperty("position") % 6 < 3 ? "even" : "odd";
}
obj.getRowTemplate().setClass("alternate", triplets);
// Make cells editable for demo.
obj.setCellEditable(true);
// Fill the cells, set the size, write it out
obj.setHeaderText(function(c){return columnHead[c]});
obj.setColumnCount(5);
obj.setRowCount(10);
document.write(obj);
var inbox = new AW.UI.Input; // Make an input box
inbox.setId("myInput"); // necessary for CSS rules
document.write("<br>Get <b>value</b> of last Row for Column: ");
inbox.setControlText("Enter Col # here!");
document.write(inbox);
var button = new AW.UI.Button;
button.setId("myButton"); // necessary for CSS rules
button.setControlText("Get LastRow value.");
button.onControlClicked = function(event){ label.setControlText("Last row by " + getlastrowvalue(inbox.getControlText()) )};
document.write(" " + button);
var label = new AW.UI.Label; // Make box to write the answer.
document.write("<br>" + label);
label.setControlText("Last Row value of Col x returned here.");
/********************************************************************
/////////////////////////////////////////////////////////////////////
D E M O I N D I C I E S - Row Position vs Row Index here!
/////////////////////////////////////////////////////////////////////
********************************************************************/
// Main function of DEMO - get the last ROW and return the Value.
function getlastrowvalue(columnIndex) {
var rowPosition = obj.getRowCount()-1;
var rowIndicesArray = obj.getRowIndices();
var rowIndex = rowIndicesArray ? rowIndicesArray[rowPosition] : rowPosition; // if RowIndiciesArray exists, return correct indexvalue; else just position
// Next two statements for THIS DEMO only. The thrust of the demo is when grid uses RowINDEX or just Rowposition.
var isIndicesArray = rowIndicesArray ? "<b>Rowindex </b>= " + rowIndicesArray[rowPosition] : "<b>Rowposition </b>= " + rowPosition;
return isIndicesArray + "; value = " + obj.getCellText(columnIndex, rowIndex) ;
// return obj.getCellText(columnIndex, rowIndex); // normally just return the value.
}
</script>
</body></html>G Cayman
February 4,