Grid (Table) with Data Island and Column highlight : Table Grid : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Table Grid »

 

Grid (Table) with Data Island and Column highlight



<html>
<head>
  <title>ActiveWidgets Grid :: Examples</title>
  <style> body, html {margin:0px; padding: 0px; overflow: hidden;</style>

  <!-- ActiveWidgets stylesheet and scripts -->
  <link href="gridRuntime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
  <script src="gridRuntime/lib/grid.js"></script>

  <!-- grid format -->
  <style>
    .active-controls-grid {height: 100%; font: menu;}

    .active-column-{width:  80px;}
    .active-column-{width: 200px; background-color: threedlightshadow;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}

    .active-grid-column {border-right: 1px solid threedshadow;}
    .active-grid-row {border-bottom: 1px solid threedlightshadow;}
  </style>
</head>
<body>
  <xml id="xmlDataIsland">
    <companies>
      <company>
        <ticker>MSFT</ticker>
        <name>Microsoft Corporation</name>
        <mktcap>314,571.156</mktcap>
        <sales>32,187.000</sales>
        <employees>55000</employees>
      </company>
      <company>
        <ticker>ORCL</ticker>
        <name>Oracle Corporation</name>
        <mktcap>62,615.266</mktcap>
        <sales>9,519.000</sales>
        <employees>40650</employees>
      </company>
      <company>
        <ticker>SAP</ticker>
        <name>SAP AG (ADR)</name>
        <mktcap>40,986.328</mktcap>
        <sales>8,296.420</sales>
        <employees>28961</employees>
      </company>
      <company>
        <ticker>CA</ticker>
        <name>Computer Associates Inter</name>
        <mktcap>15,606.335</mktcap>
        <sales>3,164.000</sales>
        <employees>16000</employees>
      </company>
      <company>
        <ticker>ERTS</ticker>
        <name>Electronic Arts Inc.</name>
        <mktcap>14,490.895</mktcap>
        <sales>2,503.727</sales>
        <employees>4000</employees>
      </company>
      <company>
        <ticker>SFTBF</ticker>
        <name>Softbank Corp. (ADR)</name>
        <mktcap>14,485.840</mktcap>
        <sales>.000</sales>
        <employees>6865</employees>
      </company>
      <company>
        <ticker>VRTS</ticker>
        <name>Veritas Software Corp.</name>
        <mktcap>14,444.272</mktcap>
        <sales>1,578.658</sales>
        <employees>5647</employees>
      </company>
      <company>
        <ticker>SYMC</ticker>
        <name>Symantec Corporation</name>
        <mktcap>9,932.483</mktcap>
        <sales>1,482.029</sales>
        <employees>4300</employees>
      </company>
      <company>
        <ticker>INFY</ticker>
        <name>Infosys Technologies Ltd.</name>
        <mktcap>9,763.851</mktcap>
        <sales>830.748</sales>
        <employees>15400</employees>
      </company>
      <company>
        <ticker>INTU</ticker>
        <name>Intuit Inc.</name>
        <mktcap>9,702.477</mktcap>
        <sales>1,650.743</sales>
        <employees>6700</employees>
      </company>
      <company>
        <ticker>ADBE</ticker>
        <name>Adobe Systems Incorporate</name>
        <mktcap>9,533.050</mktcap>
        <sales>1,230.817</sales>
        <employees>3341</employees>
      </company>
      <company>
        <ticker>PSFT</ticker>
        <name>PeopleSoft, Inc.</name>
        <mktcap>8,246.467</mktcap>
        <sales>1,941.167</sales>
        <employees>8180</employees>
      </company>
      <company>
        <ticker>SEBL</ticker>
        <name>Siebel Systems, Inc.</name>
        <mktcap>5,434.649</mktcap>
        <sales>1,417.952</sales>
        <employees>5909</employees>
      </company>
      <company>
        <ticker>BEAS</ticker>
        <name>BEA Systems, Inc.</name>
        <mktcap>5,111.813</mktcap>
        <sales>965.694</sales>
        <employees>3063</employees>
      </company>
      <company>
        <ticker>SNPS</ticker>
        <name>Synopsys, Inc.</name>
        <mktcap>4,482.535</mktcap>
        <sales>1,169.786</sales>
        <employees>4254</employees>
      </company>
      <company>
        <ticker>CHKP</ticker>
        <name>Check Point Software Tech</name>
        <mktcap>4,396.853</mktcap>
        <sales>424.769</sales>
        <employees>1203</employees>
      </company>
      <company>
        <ticker>MERQ</ticker>
        <name>Mercury Interactive Corp.</name>
        <mktcap>4,325.488</mktcap>
        <sales>444.063</sales>
        <employees>1822</employees>
      </company>
      <company>
        <ticker>DOX</ticker>
        <name>Amdocs Limited</name>
        <mktcap>4,288.017</mktcap>
        <sales>1,427.088</sales>
        <employees>9400</employees>
      </company>
      <company>
        <ticker>CTXS</ticker>
        <name>Citrix Systems, Inc.</name>
        <mktcap>3,946.485</mktcap>
        <sales>554.222</sales>
        <employees>1670</employees>
      </company>
      <company>
        <ticker>KNM</ticker>
        <name>Konami Corporation (ADR)</name>
        <mktcap>3,710.784</mktcap>
        <sales>.000</sales>
        <employees>4313</employees>
      </company>
    </companies>
  </xml>
  <script>

  //  create ActiveWidgets data model - XML-based table
  var table = new Active.XML.Table;

  //  get reference to the xml data island node
  var xml, node = document.getElementById("xmlDataIsland");

  //  IE
  if (window.ActiveXObject) {
    xml = node;
  }
  //  Mozilla
  else {
    xml = document.implementation.createDocument("",""null);
    xml.appendChild(node.selectSingleNode("*"));
  }

  //  provide data XML
  table.setXML(xml);

  //  define column labels
  var columns = ["Ticker""Company Name""Market Cap.""$ Sales""Employees"];

  //  create ActiveWidgets Grid javascript object
  var obj = new Active.Controls.Grid;

  //  provide column labels
  obj.setColumnProperty("texts", columns);

  //  provide external model as a grid data source
  obj.setDataModel(table);

  //  write grid html to the page
  document.write(obj);

  </script>
</body>
</html>

           
       

Download : Download nav_ActiveWidgets.zip nav_ActiveWidgets.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Table Grid