Basic Grid (Table) : JavaScript DHTML examples (example source code) » GUI Components » Table Grid

JavaScript DHTML
C++
Java Products
Java Articles
JavaScript DHTML Home  »   GUI Components   » [  Table Grid  ]   
 



Basic Grid (Table)

Please note that some example is only working under IE or Firefox.

 <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/xp/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;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}
    .active-column-{text-align: right;}

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

  <!-- grid data -->
  <script>
    var myData = [
      ["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"],
      ["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 myColumns = [
      "Ticker""Company Name""Market Cap.""$ Sales""Employees"
    ];
  </script>
</head>
<body>
  <script>

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

  //  set number of rows/columns
  obj.setRowProperty("count"20);
  obj.setColumnProperty("count"5);

  //  provide cells and headers text
  obj.setDataProperty("text"function(i, j){return myData[i][j]});
  obj.setColumnProperty("text"function(i){return myColumns[i]});

  //  set headers width/height
  obj.setRowHeaderWidth("28px");
  obj.setColumnHeaderHeight("20px");

  //  set click action handler
  obj.setAction("click"function(src){window.status = src.getItemProperty("text")});

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

  </script>
</body>
</html>
Download: ActiveWidgets.zip   (344  K)  
Related examples in the same category
1.  List box ( Grid Table )
2.  List view (Selection between two list)
3.  Grid (Table) with colored cells
4.  Build a Grid (Table) from CSV data file
5.  Build a Grid (Tree) from a tab separated file
6.  Build a Grid (Table) from yahoo quotes (IE only)
7.  Grid (Table) with image in cells
8.  Grid (Table) with multiple selection
9.  Grid (Table) with row header and tooltips
10.  One page two grid (Table)
11.  Data in Grid (Table) from XML file
12.  Grid (Table) with Data Island and Column highlight
13.  Grid (Table) with cell format and XML data set
14.  Grid (Table) data from RSS (IE only)
15.  Grid (Table) data from xml file 2
16.  Grid (Table) with news feeder (IE only)
17.  Grid (Table) with quotes feeder (IE only)
18.  Grid (Table) in Unix style
19.  Sortable Grids (table)
20.  Selectable Cells Grid Table
21.  Editable Grid Table cell
22.  Call back action in Grid Table
23.  Table Grid Rows Selection
24.  Grid Table Columns Resize
25.  Table Grid Column Renderers
26.  Sorting for each column or double click to edit its contents.
27.  Table Grid style and sort the style
28.  Table in JavaScript
29.  Web Data Grid Table








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.