Basic Knowledge Demo #2 (Link to URL list, or Drill to DB Record data)
Ok, Jim Hunter and everyone, this is my second Simple basic demo, on a subject that seems to be asked a lot recently. Please comment if these are NOT the type of demo you want for your site. Please also everyone VET these examples for stupidity or lack of insight.
This demo show how one would create links for cells, for either linking to a script (in PHP,CF,ASP , etc) with a Unique_ID from a data record, OR from a list of URL's.
thanks
-geoff
This demo show how one would create links for cells, for either linking to a script (in PHP,CF,ASP , etc) with a Unique_ID from a data record, OR from a list of URL's.
thanks
-geoff
<html><head>
<!-- ----------------------------------------------------------------------------------
Demo to show: Setting up columns to LINK to a drill down page, or Link to a LIST of URL's
SEE: ** HERE is the MAIN POINT below for the Few lines it takes to do this.
Using the data set "myData" for demo purposes.
C A V E A T S!
1.) there is no error checking on grid fields,
i.e., number and text fields must be entered correctly in grid, for simple sorting to work.
2.) last three cols are editable, all 5 can be sorted.
---------------------------------------------------------------------------------- -->
<title>ActiveWidgets Grid :: Examples : Cells Link or Drill for Detail.</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;}
</style>
<script>
// Data set with last col, the Link to address.
var myData = [
["MSFT","Microsoft Corporation", "314571.156", "32,187.000", "55000","http://www.microsoft.com/"],
["ORCL", "Oracle Corporation", "62615.266", "9,519.000", "40650","http://http:www.oracle.com/"],
["SAP", "SAP AG (ADR)", "40986.328", "8,296.420", "28961","http://http://www.sap.com/"],
["CA", "Computer Associates Inter", "15606.335", "3,164.000", "16000","http://ca.com/"],
["ERTS", "Electronic Arts Inc.", "14490.895", "2,503.727", "4000","http://www.ea.com"],
["SFTBF", "Softbank Corp. (ADR)", "14485.840", ".000", "6865","http://www.softbank.com/"],
["VRTS", "Veritas Software Corp.", "14444.272", "1,578.658", "5647","http://www.veritas.com/"],
["SYMC", "Symantec Corporation", "9932.483", "1,482.029", "4300","http://www.symantec.com/"],
["INFY", "Infosys Technologies Ltd.", "9763.851", "830.748", "15400","http://www.infosys.com/"],
["INTU", "Intuit Inc.", "9702.477", "1650.743", "6700","http://www.intuit.com/"],
["ADBE", "Adobe Systems Incorporate", "9533.050", "1,230.817", "3341","http://adobe.com"],
];
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;
/* *********************************************************************
///////////////////////////////////////////////////////////////////// */
// ** HERE is the MAIN POINT, For links in the First column (0), We take the "symbol ticker" and append it to a known symbol look up site.
// You could just as easily append your Database Unique_ID for a row, and link to a script in (CF, PHP, ASP etc) to get Drill down data.
// ** In The second column (1), we just put the full href from Col 5 of myData into the Cell Link.
// set cell to have link or href for drill to detail page, or website home
obj.setCellTemplate(new AW.Templates.Link, 0); // link template for col zero
obj.setCellLink(function(c, r){ return "http://finance.yahoo.com/q?s=" + myData[r][0]; }, 0); // link + col zero of myData (the tickersymbol)
obj.setCellTemplate(new AW.Templates.Link, 1); // link template for col one
obj.setCellLink(function(c, r){ return myData[r][5]; }, 1); // make col 5 of my data the Link list! (this Col is not displayed)
/* /////////////////////////////////////////////////////////////////////
********************************************************************* */
obj.setCellText(myData); //Read the data from myData
obj.setSize(500, 200);
obj.setColumnCount(5); // Show only the first five columns last col contains links.
obj.setRowCount(10);
// 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 3,2 so they sort numerically not alphabetically
var number = new AW.Formats.Number;
obj.setCellFormat(number, 2);
obj.setCellFormat(number, 3);
// Make cells editable for demo.
obj.setCellEditable(true);
// Fill in the header
obj.setHeaderText(function(c){return columnHead[c]});
document.write(obj);
</script>
</body></html>G Cayman
February 5,