3.2.0

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)

<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,
Good job!

Well documented examples really help. I know Alex is very busy with development so it is nice to see users of AW filling in some of these gaps
Rob Francis
February 4,
Here at Jim's good suggestion, is the Basic Knowledge demo #1, re-redone so it shows the main point ON the PAGE as well as in comments. Sorry it makes them a bit more complex inside.

Please be sure to edit for your OWN site:
<link href="ActiveWidgets/runtime/styles/classic/aw.css" ...
<script src="ActiveWidgets/runtime/lib/aw.js"....


These demos are designed to be edited and toyed with, to help you learn the basics. Cut and Past the entire code, set the links to aw.js and aw.css properly. Then please post great new ideas or uses for AW.

Here goes,
Basic Knowledge Demo #1:
getting last row value, understanding RowIndex vs RowPosition, and much more.
<html><head>
    <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>

<script>docs=' '
+'		<b>Demo</b> to illustrate Get VALUE of last Row (any column #). The "gotcha" being that you need either'
+'<br>	"RowPosition" or "RowIndex" depending on whether the RowIndicies are yet created!<p/>';
docs1=' '
+'<p/>	Using the data set "myData",  data is simply installed with no ROW INDEX created, or necessary.'
+'<br><ul><li> '
+'		Try pushing the button, to get ANY Column\'s Last Row VALUE. Note, the resulting text says: "by ROWPOSITION".'
+'<br><li>	Sort by any column heading then push for the same (or any) column again, the resulting text says "by ROWINDEX".'
+'<br>	In other words, Sorting is forced to CREATE a ROW index array.'
+'<br><li>	After a little EDITING (edit any column, noting text or numeric in header)' 
+'<br>	SORT, note that any ROW INDEX can end up at the as the last row (depending on the sort) TRY it.'
+'<br><li>	In the source, below the line -var obj = new AW.UI.Grid;-, you can comment in/out a different data set "myDataID"'
+'		The rows will then always have a ROW INDEX (which could be your DB Record Unique_ID).'
+'<br><li>	Look for ** HERE is the MAIN POINT ** in the source of the for the few lines it takes to Get a value.'
+'<br></ul>'
+'<br>	F E A T U R E  &nbsp;&nbsp;  C R E E P!'
+'<br>	By way of example, BUT no explanation, there are several other features... VIEW sorce!'
+'<ol type="i"><li> Column alignment'
+'<li> 	ODD EVEN color and (my personal favorite) Triplet colors (thanks Alex again!!!)'
+'<li> 	Both <b>text and number</b> formatted columns for proper sorting'
+'<li> 	Row selectors, numbered'
+'<li> 	INPUT, LABEL, and BUTTON UI\'s'
+'<li> 	Editing turned on AND disable editing for second column (c1)'
+'<li> 	Last col set to NO sort' 
+'<br></ol>'
+'<br>	C A V E A T S!'
+'<br><ol><li>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.'
+'<br></ol>'
;</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;}
    #myButton {width: 120px;} 
    #myInput {width: 90px; height: 16px}
    #myLabel {height: 25px; background: #9CF9F9}
</style>

<script>
    // Date set with no Row index (row indicies not yet assigned) 
    var myData = [
        ["MSFT","Microsoft Corporation", "314571.156", "32,187.000", "55000"],
        ["ORCL", "Oracle Corporation", "62615.266", "9,519.000", "40650"],
        ["SAP", "SAP AG (ADR)", "40986.328", "8,296.420", "28961"],
        ["CA", "Computer Associates Inter", "15606.335", "3,164.000", "16000"],
        ["ERTS", "Electronic Arts Inc.", "14490.895", "2,503.727", "4000"],
        ["SFTBF", "Softbank Corp. (ADR)", "14485.840", ".000", "6865"],
        ["VRTS", "Veritas Software Corp.", "14444.272", "1,578.658", "5647"],
        ["SYMC", "Symantec Corporation", "9932.483", "1,482.029", "4300"],
        ["INFY", "Infosys Technologies Ltd.", "9763.851", "830.748", "15400"],
        ["INTU", "Intuit Inc.", "9702.477", "1650.743", "6700"],
        ["ADBE", "Adobe Systems Incorporate", "9533.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)", "No Ed, Sort Text (c1)", "Sort Numeric (c2)", "Sort Numeric (c3)", "No Sort Text (c4)"];
</script>

</head><body>

<script>
    document.write(docs);

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 will 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);

  //	disable sorting on col 4
    obj.onHeaderClicked = function(event,index){if (index==4) return 'disabled'};

  //	NUMBER format for cols 2,3  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);
    obj.setCellEditable(false, 1);// disable editing for col 1

  //	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.
    label.setId("myLabel");	// necessary for CSS rules
    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!

** HERE is the MAIN POINT **

/////////////////////////////////////////////////////////////////////
********************************************************************/


//	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.
 
    }
    document.write(docs1);
</script>
</body></html>

G Cayman
February 11,
Got it posted, thanks!
Jim Hunter (www.FriendsOfAW.com)
February 11,

This topic is archived.

See also:


Back to support forum