Grid (Table) with cell format and XML data set : Table Grid « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » Table Grid 
Grid (Table) with cell format and XML data set
 
<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-column-{text-align: right;}

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

  //  create data formats
  var string = new Active.Formats.String;
  var number1 = new Active.Formats.Number;
  var number2 = new Active.Formats.Number;
  var date = new Active.Formats.Date;

  //  define formatting rule for text output
  number1.setTextFormat("#,###.##");
  number2.setTextFormat("");

  date.setTextFormat("dd mmm yy");
  date.setDataFormat("ISO8061");

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

  //  provide data URL
  table.setURL("gridExamples/data/companies-dataset.xml");

  //  set rows XPath
  table.setRows("//NewDataSet/*");

  //  set columns XPath
  table.setColumns(["ticker""name""mktcap""sales""employees""timestamp"]);

  //  set column formatting
  table.setFormats([string, string, number1, number1, number2, date]);

  //  start asyncronous data retrieval
  table.request();

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

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

           
         
  
ActiveWidgets.zip( 344 k)
Related examples in the same category
1. Table Sorter Proof of Concept
2. Create 100 random rows and do the column sorting
3. Sortable table column
4. Table row style with 'mouse roll over' effect
5. Pagable Table
6. Repeat table column at the table bottom
7. Editable table cell
8. Table row with mouse roll over
9. Adding a table row
10. List box ( Grid Table )
11. List view (Selection between two list)
12. Basic Grid (Table)
13. Grid (Table) with colored cells
14. Build a Grid (Table) from CSV data file
15. Build a Grid (Tree) from a tab separated file
16. Build a Grid (Table) from yahoo quotes (IE only)
17. Grid (Table) with image in cells
18. Grid (Table) with multiple selection
19. Grid (Table) with row header and tooltips
20. One page two grid (Table)
21. Data in Grid (Table) from XML file
22. Grid (Table) with Data Island and Column highlight
23. Grid (Table) data from RSS (IE only)
24. Grid (Table) data from xml file 2
25. Grid (Table) with news feeder (IE only)
26. Grid (Table) with quotes feeder (IE only)
27. Grid (Table) in Unix style
28. Sortable Grids (table)
29. Selectable Cells Grid Table
30. Editable Grid Table cell
31. Call back action in Grid Table
32. Table Grid Rows Selection
33. Grid Table Columns Resize
34. Table Grid Column Renderers
35. Sorting for each column or double click to edit its contents.
36. Table Grid style and sort the style
37. Table in JavaScript
38. Web Data Grid Table
39. Sortable Tables from Scratch with MochiKit
40. Ajax Table
41. Drag and drop table columns
42. Dynamic data grid: add a row, remove a row and sort column
43. super table
44. GUI for table creation
45. Table sorter
46. Sortable Table
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.