Mega Code Archive

 
Categories / JavaScript DHTML / GUI Components
 

Data in Grid (Table) from XML file

<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-0 {width:  80px;}     .active-column-1 {width: 200px; background-color: threedlightshadow;}     .active-column-2 {text-align: right;}     .active-column-3 {text-align: right;}     .active-column-4 {text-align: right;}     .active-column-5 {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-array.xml");   //  define namespace for selecting column data   table.setNamespace("co", "http://tempuri.org/");   //  set column XPath   table.setColumns(["co:ticker", "co:name", "co:marketcap", "co:sales", "co:employees", "co: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)