[ 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_autosave_cell.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. 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. After cell value is edited and validated, it is sent to the server. If successful response is received from the server, cell's background becomes green shortly. If error is received from the server, cell is reverted and its background blinks with red twice. In this example server side script validates only 'Phone Number' column. You can see how it works for example by entering 'zzz' instead of any phone number. Contents of the response can be checked using special callbackAutoSaveCell config option. Additional actions may be taken after cell value is edited, saved or error received from the server using special gridCellEdited, gridCellSaved and gridCellNotSaved events. "> <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 Grid Example With Auto Cell Saving</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 Grid Example With Auto Cell Saving</div> <div class='mainCol'> <div class='zpCalDemoText'> <ul> <li>Double-click any cell except <b>Item</b> to edit it. The <b>Item</b> column is not editable.</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>After cell value is edited and validated, it is sent to the server. If successful response is received from the server, cell's background becomes green shortly. If error is received from the server, cell is reverted and its background blinks with red twice.</li> <li>In this example server side script validates only "Phone Number" column. You can see how it works for example by entering "zzz" instead of any phone number.</li> <li>Contents of the response can be checked using special <b>callbackAutoSaveCell</b> config option.</li> <li>Additional actions may be taken after cell value is edited, saved or error received from the server using special <b>gridCellEdited</b>, <b>gridCellSaved</b> and <b>gridCellNotSaved</b> events.</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"> // Check if demo loaded from server var sLocation = document.location.toString(); if (sLocation.indexOf('http') != 0) { alert('Since this example demonstrates interaction between server and javascript application, it must be loaded from server. This example does not work properly if opened from local hard drive.'); } /* * Initialize grid */ var oGrid = new Zapatec.EditableGrid({ // Use HTML table with id "gridSource" as grid data source source: 'gridSource', sourceType: 'html', // Use "winxp" theme theme: 'winxp', // Put the grid into element with id "gridContainer" container: 'gridContainer', // Display 10 rows per page rowsPerPage: 10, // Server side script saving updates autoSaveCell: 'editable_autosave_cell.php', // Callback used for checking server response callbackAutoSaveCell: checkServerResponse }); /* * Checks server response. Returns true if the cell was saved successfully. */ function checkServerResponse(oArg) { // Get XMLHttpRequest object var oRequest = oArg.request; // Check response if (oRequest && oRequest.responseText == 'ok') { return 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>