3.2.0

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

<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,
Yes, this is a nice demo and I have it posted. You might think about adding some plain text to the main page that explains what the demo is exhibiting. And a hint to let them know to "View Source" to see exactly how it's done. I am going to grab your other demo and get it posted as well.

Thanks!
Jim Hunter (www.FriendsOfAW.com)
February 5,
Jim,

Your absolutely Right!!! If you load the demos, they don't give you a HINT or even tease On what they are for!
I will work on that for next demo, and add for last two, maybe NEXT weekend..
Thanks...
-geoff

Is there a better way to post / and or revise to your site...?

Since this is only my first week, I've tried to do the MOST common and repeated questions. Let me know if you have ideas...

Does your site or posting system allow or show a SEE Source, or view how it functions button?
thanks
-geoff
G Cayman
February 5,
Geoff,

You can right click on the demo area and view source but that is all I have right now. I know that there will be some demos that are going to be for example purpose only and the source may not be available so I did not initially add a "See Source" button to the demo area, but it is under consideration.
If you want to send me updates you can send it to my e-mail address. If you IM me on the FOAW site I'll send you my e-mail address. That will make updates easier. Plus if you do change your code posting the updated code here is also adviseable.
Jim Hunter (www.FriendsOfAW.com)
February 5,
Here at Jim's good suggestion, is the Basic Knowledge demo #2, 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 #2:
Linking from Cells, both Full links to new sites, and using from the Data, Unique_ID to simulate Drill down to detail data.

<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>
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