[ 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: editors.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=" This demo shows how to integrate external editors into the Grid. Any column, row or cell may be assigned an individual editor. The same cell may be edited in different editors depending on its value. Double-click date to choose it from the Zapatec Calendar. Double-click phone number to edit it in the external Zapatec Editor. See callbackCellEdit for cell editor details. After you have finished editing of phone number, press 'Save' button to update it in the grid. Double-click any other cell except Item to edit it using standard grid editor. The Item column is not editable, see zpGridTypeNoedit. "> <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 - Editors</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" /> <script type="text/javascript" src="../src/zpgrid-editable.js"></script> <script type="text/javascript" src="../src/zpgrid-validate.js"></script> <script type="text/javascript" src="../../utils/colorpicker.js"></script> <script type="text/javascript" src="../../zpeditor/src/zpeditor.js"></script> <link type="text/css" rel="stylesheet" href="../../zpcal/themes/winxp.css" /> <script type="text/javascript" src="../../zpcal/src/calendar.js"></script> <script type="text/javascript" src="../../zpcal/lang/calendar-en.js"></script> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Editors</div> <div class='mainCol'> <div class='zpCalDemoText'> <ul> <li>This demo shows how to integrate external editors into the Grid.</li> <li>Any column, row or cell may be assigned an individual editor.</li> <li>The same cell may be edited in different editors depending on its value.</li> <li>Double-click date to choose it from the <b>Zapatec Calendar</b>.</li> <li>Double-click phone number to edit it in the external <b>Zapatec Editor</b>.</li> <li>See <b>callbackCellEdit</b> for cell editor details.</li> <li>After you have finished editing of phone number, press "Save" button to update it in the grid.</li> <li>Double-click any other cell except <b>Item</b> to edit it using standard grid editor.</li> <li>The <b>Item</b> column is not editable, see <b>zpGridTypeNoedit</b>.</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> <form id="editorForm" style="margin: 20px 0px; display: none"> <div style="margin-bottom: 10px"> <input type="button" value="Save" onclick="saveEdit()" /> <input type="button" value="Cancel" onclick="cancelEdit()" /> </div> <div style="margin-bottom: 60px"> <textarea id="editor" rows="7" cols="60"></textarea> </div> </form> </div> <script type="text/javascript"> /* * Check external components */ if (typeof Zapatec.Calendar == 'undefined' || typeof Zapatec.MinimalEditor == 'undefined') { alert('This demo shows interaction between different Zapatec components. It works only if Zapatec Calendar and Zapatec Window components were purchased.'); } /* * Reference to the calendar object. */ var oCalendar; /* * Saves date selection. */ function saveCalendar(oCal, sDate) { // Save changes oGrid.acceptData({ data: sDate }); // Hide calendar oCal.hide(); } /* * Cancels date selection. */ function cancelCalendar(oCal) { // Cancel changes oGrid.acceptData(); // Hide calendar oCal.hide(); } /* * Gets called from the grid when cell is doubleclicked. */ function editWithCalendar(sDate) { // Load value into calendar if (oCalendar) { // Hide calendar if it is opened oCalendar.hide(); // Calendar already initialized oCalendar.setDate(new Date(sDate)); } else { // Initialize calendar oCalendar = new Zapatec.Calendar(0, new Date(sDate), saveCalendar, cancelCalendar); oCalendar.setDateFormat('%m/%d/%Y'); oCalendar.create(); } oCalendar.showAtElement(oGrid.getCellElement(oGrid.getEditingCell()), 'Br'); } /* * Reference to the editor object. */ var oEditor; /* * Reference to the editor form. */ var oEditorForm = document.getElementById('editorForm'); /* * Reference to the editor source textarea field. */ var oTextarea = document.getElementById('editor'); /* * Saves edited value. */ function saveEdit() { // Save changes oEditor.saveContentToField(); oGrid.acceptData({ data: oTextarea.value }); // Hide editor oEditorForm.style.display = 'none'; } /* * Cancels editing. */ function cancelEdit() { // Cancel changes oGrid.acceptData(); // Hide editor oEditorForm.style.display = 'none'; } /* * Gets called from the grid when cell is doubleclicked. */ function editWithEditor(sValue) { // Show editor form oEditorForm.style.display = ''; // Set editing value if (oTextarea) { oTextarea.value = sValue; } // Load value into editor if (oEditor) { // Editor already initialized oEditor.loadContentFromField(); } else { // Initialize editor oEditor = new Zapatec.MinimalEditor({ field: 'editor' }); } // Focus inside editor oEditor.focus(); } /* * Gets called from the grid when cell is doubleclicked. */ function cleanUp() { // Hide editor if it is shown oEditorForm.style.display = 'none'; } /* * 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, // Edit some columns using external editors externalEditors: [ { column: 1, callback: editWithCalendar }, { column: 4, callback: editWithEditor } ], // Clean up before editing cell eventListeners: { gridCellEdit: cleanUp } }); </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>