[ 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: editable_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="description" content=" Double-click any cell except Item to edit it. The Item column is not editable. To edit the Rate Period column, choose the value from the predefined drop-down list. To edit the Local column, set the boolean value by checking or clearing the activated checkbox. After cell value is edited, input is validated according to the column type. Cells having wrong input are marked as invalid (displayed with white color on red background). Value itself may be displayed correctly because cell tries to correct it automatically. Invalid mark only means that input was wrong and should be corrected. Validation is optional feature which is turned on automatically if zpgrid-validate.js module is included into a page. "> <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 - Zapatec Editable Horizontal Grid Example</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <script type="text/javascript" src="../src/zpgrid.js"></script> <script type="text/javascript" src="demo.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" /> <script type="text/javascript" src="../src/zpgrid-editable.js"></script> <script type="text/javascript" src="../src/zpgrid-validate.js"></script> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Zapatec Editable Horizontal Grid Example</div> <div class='mainCol'> <div class='zpCalDemoText'> <ul> <li>Double-click any cell except <b>Item</b> to edit it.</li> <li>The <b>Item</b> column is not editable.</li> <li>To edit the <b>Rate Period</b> column, choose the value from the predefined drop-down list.</li> <li>To edit the <b>Local</b> column, set the boolean value by checking or clearing the activated checkbox.</li> <li>After cell value is edited, input is validated according to the column type. Cells having wrong input are marked as invalid (displayed with white color on red background). Value itself may be displayed correctly because cell tries to correct it automatically. Invalid mark only means that input was wrong and should be corrected.</li> <li>Validation is optional feature which is turned on automatically if <i>zpgrid-validate.js</i> module is included into a page.</li> </ul> </div> <div id="gridContainer"> <table id="gridSource"> <tbody> <tr> <td class="zpGridTypeInt zpGridTypeNoedit">Item</td> <td class="zpGridTypeDate">Date</td> <td class="zpGridTypeTime">Time</td> <td class="zpGridTypeString zpGridTypeList">Rate Period</td> <td class="zpGridTypeString">Phone Number</td> <td class="zpGridTypeInt">Minutes</td> <td class="zpGridTypeFloat">Total Charges</td> <td class="zpGridTypeBoolean">Local</td> </tr> <tr> <td>1</td> <td>11/08/2006</td> <td>09:30AM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(911)504-7207</td> <td>1</td> <td>.50</td> <td>0</td> </tr> <tr> <td>2</td> <td>11/08/2006</td> <td>10:39AM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)525-7522</td> <td>3</td> <td>1.50</td> <td>1</td> </tr> <tr> <td>3</td> <td>11/08/2006</td> <td>12:11PM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(981)483-3140</td> <td>5</td> <td>.70</td> <td>0</td> </tr> <tr> <td>4</td> <td>11/08/2006</td> <td>03:41PM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)504-8168</td> <td>2</td> <td>.20</td> <td>1</td> </tr> <tr> <td>5</td> <td>11/09/2006</td> <td>09:50AM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)642-8345</td> <td>1</td> <td>.10</td> <td>1</td> </tr> <tr> <td>6</td> <td>11/09/2006</td> <td>02:49PM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(000)000-0086</td> <td>1</td> <td>1.23</td> <td>0</td> </tr> <tr> <td>7</td> <td>11/09/2006</td> <td>03:05PM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)504-8168</td> <td>6</td> <td>.40</td> <td>1</td> </tr> <tr> <td>8</td> <td>11/09/2006</td> <td>03:53PM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)873-0894</td> <td>5</td> <td>2.00</td> <td>1</td> </tr> <tr> <td>9</td> <td>11/10/2006</td> <td>11:35AM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)525-7522</td> <td>5</td> <td>1.00</td> <td>1</td> </tr> <tr> <td>10</td> <td>11/10/2006</td> <td>09:41PM</td> <td><select><option>P</option><option selected>O</option><option>W</option></select></td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> <td>0</td> </tr> <tr> <td>11</td> <td>11/10/2006</td> <td>09:42PM</td> <td><select><option>P</option><option selected>O</option><option>W</option></select></td> <td>(910)292-6349</td> <td>2</td> <td>.10</td> <td>1</td> </tr> <tr> <td>12</td> <td>11/11/2006</td> <td>11:14AM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)525-7522</td> <td>1</td> <td>.10</td> <td>1</td> </tr> <tr> <td>13</td> <td>11/12/2006</td> <td>04:24PM</td> <td><select><option>P</option><option>O</option><option selected>W</option></select></td> <td>(926)485-8854</td> <td>1</td> <td>.10</td> <td>0</td> </tr> <tr> <td>14</td> <td>11/12/2006</td> <td>04:36PM</td> <td><select><option>P</option><option>O</option><option selected>W</option></select></td> <td>(926)485-8854</td> <td>1</td> <td>.10</td> <td>0</td> </tr> <tr> <td>15</td> <td>11/13/2006</td> <td>02:46PM</td> <td><select><option>P</option><option>O</option><option selected>W</option></select></td> <td>(910)776-3005</td> <td>1</td> <td>.10</td> <td>1</td> </tr> <tr> <td>16</td> <td>11/14/2006</td> <td>10:45AM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> <td>1</td> </tr> <tr> <td>17</td> <td>11/14/2006</td> <td>11:27AM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)504-2167</td> <td>1</td> <td>.10</td> <td>1</td> </tr> <tr> <td>18</td> <td>11/14/2006</td> <td>01:25PM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)525-7522</td> <td>4</td> <td>.10</td> <td>1</td> </tr> <tr> <td>19</td> <td>11/14/2006</td> <td>06:41PM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> <td>0</td> </tr> <tr> <td>20</td> <td>11/15/2006</td> <td>01:19PM</td> <td><select><option selected>P</option><option>O</option><option>W</option></select></td> <td>(910)504-7207</td> <td>2</td> <td>.10</td> <td>1</td> </tr> </tbody> </table> </div> </div> <script type="text/javascript"> // Initialize grid var oGrid = new Zapatec.EditableGrid({ // Use HTML table with id "gridSource" as grid data source source: 'gridSource', sourceType: 'html', // Use "lightblue" theme theme: 'lightblue', // Put the grid into element with id "gridContainer" container: 'gridContainer', // Display 10 rows per page rowsPerPage: 10, // Horizontal layout horizontal: true }); </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>