[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpgrid
/
zpgrid
/
demo
/
[
Home
]
File: horizontal.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Grid Widget - Horizontal Grid</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <!-- Include Zapatec Grid Widget --> <script type="text/javascript" src="../src/zpgrid.js"></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> <link href="../themes/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Horizontal Grid</div> <div class='mainCol'> This example shows an alternative grid layout. <ul> <li>All grids on this page use the same JSON file as data source.</li> <li>Difference between first and second grid and between third and fourth grid is that in second and fourth grid option <b>horizontal</b> is set to <b>true</b>.</li> </ul> <div> <div id="gridContainer1"></div> </div> <div style="margin-top: 20px"> <div id="gridContainer2"></div> </div> <div style="margin-top: 20px"> <div id="gridHeaderContainer3"></div> <div id="gridDataContainer3" style="width: 350px; height: 100px; overflow: scroll"></div> <div id="gridTotalsContainer3" style="margin-top: 6px"></div> <div id="gridPaginationContainer3"></div> </div> <div style="margin-top: 20px"> <table> <tr> <td style="vertical-align: top"> <div id="gridHeaderContainer4"></div> <div id="gridDataContainer4" style="width: 350px; height: 100px; overflow: scroll"></div> </td> <td style="vertical-align: top"> <div id="gridTotalsContainer4"></div> </td> </tr> </table> <div id="gridPaginationContainer4"></div> </div> </div> <script type="text/javascript"> // Initialize grid var oGrid1 = new Zapatec.Grid({ // Use JSON file as Grid data source source: 'json_phone.txt', sourceType: 'json/url', // Use "winxp" theme which is located in "../themes/" directory theme: 'winxp', // Put grid data into separate div container: 'gridContainer1', // Fix "Item" and "Date" columns fixedLeft: 1, // Initially sort ascending by first column sortColumn: 0, // Use paging rowsPerPage: 5, // Totals definition totals: [ { column: [1, 2, 5, 6], callback: Zapatec.Grid.min, labelColumn: 0 }, { column: [1, 2, 5, 6], callback: Zapatec.Grid.max, labelColumn: 0 } ] }); // Initialize grid var oGrid2 = new Zapatec.Grid({ // Horizontal grid horizontal: true, // Use JSON file as Grid data source source: 'json_phone.txt', sourceType: 'json/url', // Use "winxp" theme which is located in "../themes/" directory theme: 'winxp', // Put grid data into separate div container: 'gridContainer2', // Fix "Item" and "Date" columns fixedLeft: 1, // Initially sort ascending by first column sortColumn: 0, // Use paging rowsPerPage: 3, // Totals definition totals: [ { column: [1, 2, 5, 6], callback: Zapatec.Grid.min, labelColumn: 0 }, { column: [1, 2, 5, 6], callback: Zapatec.Grid.max, labelColumn: 0 } ] }); // Initialize grid var oGrid3 = new Zapatec.Grid({ // Use JSON file as Grid data source source: 'json_phone.txt', sourceType: 'json/url', // Use "winxp" theme which is located in "../themes/" directory theme: 'winxp', // Put grid header into separate div headerContainer: 'gridHeaderContainer3', // Put grid data into separate div container: 'gridDataContainer3', // Put grid totals into separate div totalsContainer: 'gridTotalsContainer3', // Fix "Item" and "Date" columns fixedLeft: 1, // Initially sort ascending by first column sortColumn: 0, // Use paging rowsPerPage: 5, // Put pagination into separate div paginationContainer: 'gridPaginationContainer3', // Totals definition totals: [ { column: [1, 2, 5, 6], callback: Zapatec.Grid.min, labelColumn: 0 }, { column: [1, 2, 5, 6], callback: Zapatec.Grid.max, labelColumn: 0 } ] }); // Initialize grid var oGrid4 = new Zapatec.Grid({ // Horizontal grid horizontal: true, // Use JSON file as Grid data source source: 'json_phone.txt', sourceType: 'json/url', // Use "winxp" theme which is located in "../themes/" directory theme: 'winxp', // Put grid header into separate div headerContainer: 'gridHeaderContainer4', // Put grid data into separate div container: 'gridDataContainer4', // Put grid totals into separate div totalsContainer: 'gridTotalsContainer4', // Fix "Item" and "Date" columns fixedLeft: 1, // Initially sort ascending by first column sortColumn: 0, // Use paging rowsPerPage: 5, // Put pagination into separate div paginationContainer: 'gridPaginationContainer4', // Totals definition totals: [ { column: [1, 2, 5, 6], callback: Zapatec.Grid.min, labelColumn: 0 }, { column: [1, 2, 5, 6], callback: Zapatec.Grid.max, labelColumn: 0 } ] }); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Grid Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>