One page two grid (Table) : Table Grid : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Table Grid »

 

One page two grid (Table)



<html>
<head>
  <title>ActiveWidgets Grid :: Examples</title>
  <style> body, html {font: menu; background: threedface;</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>
    #grid1 {height: 200px; border: 2px inset; background: white}
    #grid2 {height: 100px; border: 2px inset; background: white}

    #grid1 .active-column-{width: 200px; background-color: threedlightshadow;}
    #grid2 .active-column-{width: 150px; background-color: infobackground;}

    .active-column-{text-align: right;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}

    .active-grid-row {border-bottom: 1px solid threedlightshadow;}
    .active-grid-column {border-right: 1px solid threedlightshadow;}

  </style>

  <!-- grid data -->
  <script>
    var data1 = [
      ["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"],
      ["PSFT""PeopleSoft, Inc.""8,246.467""1,941.167""8180"],
      ["SEBL""Siebel Systems, Inc.""5,434.649""1,417.952""5909"],
      ["BEAS""BEA Systems, Inc.""5,111.813""965.694""3063"],
      ["SNPS""Synopsys, Inc.""4,482.535""1,169.786""4254"],
    ];

    var data2 = [
      ["CHKP""Check Point Software Tech""4,396.853""424.769""1203"],
      ["MERQ""Mercury Interactive Corp.""4,325.488""444.063""1822"],
      ["DOX""Amdocs Limited""4,288.017""1,427.088""9400"],
      ["CTXS""Citrix Systems, Inc.""3,946.485""554.222""1670"],
      ["KNM""Konami Corporation (ADR)""3,710.784"".000""4313"],
    ];

    var columns1 = [
      "Ticker""Company Name""Market Cap.""$ Sales""Employees"
    ];

    var columns2 = [
      "Ticker(2)""Company Name(2)""Market Cap.(2)""$ Sales(2)""Employees(2)"
    ];
  </script>
</head>
<body>
  <p>
    Here is the first grid:
  </p>

  <script>
    var obj1 = new Active.Controls.Grid;
    obj1.setId("grid1");
    obj1.setRowProperty("count"15);
    obj1.setColumnProperty("count"5);
    obj1.setDataProperty("text"function(i, j){return data1[i][j]});
    obj1.setColumnProperty("text"function(i){return columns1[i]});
    document.write(obj1);
  </script>

  <p>
    And another one...
  </p>

  <script>
    var obj2 = new Active.Controls.Grid;
    obj2.setId("grid2");
    obj2.setRowProperty("count"5);
    obj2.setColumnProperty("count"5);
    obj2.setDataProperty("text"function(i, j){return data2[i][j]});
    obj2.setColumnProperty("text"function(i){return columns2[i]});
    document.write(obj2);
  </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