<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>
<html><head>
<!-- BK2AW2linkedColExamp.html -->
<link href="ActiveWidgets/runtime/styles/classic/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="ActiveWidgets/runtime/lib/aw.js"></script>
<script>docs=
"<br>"
+"<br> <B>Demo to show:</B> Columns with LINK to a <i>drill-down detail page</i>, or LINK to a <i>List of URLs</i>"
+"<br> SEE:<b>** HERE is the MAIN POINT **</b> by viewing source, to see the few lines it takes to do this."
+"<ul>"
+"<li> From sample data set 'myData'; The 6th column of 'myData' contains a list of URLs linked from the second col."
+"<br> <b>Note:</b> list of URL's (6th col) is hidden from display in this example, via 'obj.setColumnCount(5)';"
+" Also try 'obj.setColumnIndices([0,1,2,3,4])';"
+"<li> The first column 'tickerSymbols' are appended to a fixed URL to simulate Drill down to detail data. View source please."
+"<br><b> Note:</b> Links in <i>first col</i> each open to a new or '_blank' window. <br><b><i>Second col</i></b> links of Row 3 & 4 "
+" open to the same 'named' TARGET window. <b> Important:</b> after sorting any column, these rows could be anywhere,"
+" so by name they are SAP AP (ADR) and Computer Associates."
+"</ul> "
+" C A V E A T S!"
+"<ul><li> no error checking on grid fields, i.e., number and text column data must be entered correctly , for sorting to work."
+"<li> last three cols are editable, all 5 can be sorted."
+"</ul>"
; </script>
<title>ActiveWidgets Grid :: Examples : Cells Link or Drill for Detail.</title>
<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", "<b>EEE</b>","http://www.microsoft.com/"],
["ORCL", "Oracle Corporation", "62615.266", "9,519.000", "<i>FFF</i>","http://www.oracle.com/"],
["SAP", "SAP AG (ADR)", "40986.328", "8,296.420", "<u>ABB</u>","http://www.sap.com/"],
["CA", "Computer Associates Inter", "15606.335", "3,164.000", "ABC","http://ca.com/"],
["ERTS", "Electronic Arts Inc.", "14490.895", "2,503.727", "ABD","http://www.ea.com"],
["SFTBF", "Softbank Corp. (ADR)", "14485.840", ".000", "BAA","http://www.softbank.com/"],
["VRTS", "Veritas Software Corp.", "14444.272", "1,578.658", "BCC","http://www.veritas.com/"],
["SYMC", "Symantec Corporation", "9932.483", "1,482.029", "CCC","http://www.symantec.com/"],
["INFY", "Infosys Technologies Ltd.", "9763.851", "830.748", "DDD","http://www.infosys.com/"],
["INTU", "Intuit Inc.", "9702.477", "1650.743", "BZZ","http://www.intuit.com/"],
["ADBE", "Adobe Systems Incorporate", "9533.050", "1,230.817", "ZZZ","http://adobe.com"],
];
var columnHead = [
"Sort Text (c0)", "Sort Text (c1)", "Sort Numeric (c2)", "Sort Numeric (c3)", "Sort Text (c4)"
];
</script>
</head><body>
<B>Demo to show:</B> Columns with LINK to a <i>drill-down detail page</i>, or LINK to a <i>List of URLs</i>
<br><b>Note:</b> Links in <i>first col</i> each open to a new or "_blank" window;
<i>second col</i> links of Row 3 & 4 open to the same 'named' TARGET window.
<br>
<script>
var obj = new AW.UI.Grid;
/* *********************************************************************
///////////////////////////////////////////////////////////////////// */
// ** HERE is the MAIN POINT **, For links in the First column (c0), 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 (c1), we just put the full href from Col 6(c5) of myData into the Cell Link. i.e,obj.setCellLink()
// Note: The syntax for these "function arguments" are documented in examples\quickref\grid.htm.
// set cell to have link (or href) for drill to detail page, or website page.
obj.setCellTemplate(new AW.Templates.Link, 0); // make link template for first col (c0)
obj.setCellLink(function(c, r){ return "http://finance.yahoo.com/q?s=" + myData[r][0]; }, 0); // link + col 1(c0) of myData (the tickersymbol)
obj.setCellTemplate(new AW.Templates.Link, 1); // make link template for second col (c1)
obj.setCellLink(function(c, r){ return myData[r][5]; }, 1); // col 6(c5) of mydata is Link list for Col 2(c1)! (Col 6(c5) is NOT displayed)
/* /////////////////////////////////////////////////////////////////////
********************************************************************* */
obj.setCellText(myData); //Read the data from myData
obj.setSize(550, 200);
obj.setColumnCount(5); // Show only the first five columns, last col contains links.
obj.setRowCount(10);
obj.setColumnWidth(140, 1);// set the width wide for company names
// Set up Target open windows for first col, and some cells in second col.
obj.getCellTemplate(0).setAttribute("target", "_blank"); // col 1 (c0) each opens in new window
obj.getCellTemplate(1,2).setAttribute("target", "myNamedWin"); // col 2-row 3(c1)(r2) open into named Window.
obj.getCellTemplate(1,3).setAttribute("target", "myNamedWin"); // col 2-row 4(c1)(r3) open into SAME named Window.
// 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);
document.write(docs);
</script>
</body></html>
This topic is archived.