[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpgrid
/
zpgrid
/
jsdocs
/
[
Home
]
File: overview-summary-zpgrid-editable.js.html
<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd"> <html> <head> <title> Zapatec Grid Overview </title> <link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style"> <script> function asd() { parent.document.title="zpgrid-editable.js Overview"; } </script> </head> <body bgcolor="white" onload="asd();"> <!-- ========== START OF NAVBAR ========== --> <a name="navbar_top"><!-- --></a> <table border="0" width="100%" cellpadding="1" cellspacing="0"> <tr> <td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1"> <a name="navbar_top_firstrow"><!-- --></a> <table border="0" cellpadding="0" cellspacing="3"> <tr align="center" valign="top"> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a> </td> <td bgcolor="#FFFFFF" class="NavBarCell1Rev"> <font class="NavBarFont1Rev"><b>File</b></font> </td> <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a> </td> </tr> </table> </td> <td bgcolor="#EEEEFF" align="right" valign="top"> <em> <b>Zapatec Grid</b></em> </td> </tr> <tr> <td bgcolor="white" class="NavBarCell2"><font size="-2"> PREV NEXT</font></td> <td bgcolor="white" class="NavBarCell2"><font size="-2"> <a href="index.html" target="_top"><b>FRAMES</b></a> <a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a> <script> <!-- if(window==top) { document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>'); } //--> </script> <noscript> <a href="allclasses-noframe.html" target=""><b>All Classes</b></a> </noscript> </font></td> </tr> </table> <!-- =========== END OF NAVBAR =========== --> <hr> <center> <h2>zpgrid-editable.js</h2> </center> <h4>Summary</h4> <p> Zapatec Editable Grid widget extension. <pre> Copyright (c) 2004-2007 by Zapatec, Inc. http://www.zapatec.com 1700 MLK Way, Berkeley, California, 94709, U.S.A. All rights reserved. </pre><BR/><BR/> </p> <hr> <table border="1" cellpadding="3" cellspacing="0" width="100%"> <tr bgcolor="#CCCCFF" class="TableHeadingColor"> <td colspan=2><font size="+2"> <b>Class Summary</b> </font></td> </tr> <tr bgcolor="white" class="TableRowColor"> <td width="15%"><b><a href="Zapatec/EditableGrid.html">Zapatec.EditableGrid</a></b></td> <td> </td> </tr> </table> <hr/> <!-- ========== METHOD SUMMARY =========== --> <!-- ========== END METHOD SUMMARY =========== --> <pre class="sourceview"><span class="comment">/** * <span class="attrib">@fileoverview</span> Zapatec Editable Grid widget extension. * * <pre> * Copyright (c) 2004-2007 by Zapatec, Inc. * http://www.zapatec.com * 1700 MLK Way, Berkeley, California, * 94709, U.S.A. * All rights reserved. * </pre> */</span> <span class="comment">/* $Id: zpgrid-editable.js 7597 2007-07-25 08:32:55Z alex $ */</span> <span class="comment">// Emulate window.event in Mozilla for keydown event</span> Zapatec.Utils.emulateWindowEvent([<span class="literal">'keydown'</span>]); <span class="comment">/** * Editable Grid extension. * * <pre> * Note: zpgrid-core.js must be included before this module. If plugin modules * like zpgrid-xml.js are used, they must be included before this module as * well. * * <strong>Input data formats differences form Zapatec.Grid:</strong> * * <strong>JSON:</strong> * * "noedit: true" property in field definition makes column not editable. * * "list: true" property in field definition means that cells in the column will * not be edited directly. Instead there will appear selectbox with the list of * possible values for the cell. Cell "v" property should contain select * element: * <xmp> * <select> * <option>value1</option> * <option selected>value2</option> * ... * </select> * </xmp> * * Alternatively (deprecated) cell definition may contain "values" * property with all possible values: * values: ["value1", "value2", ...] * "v" property should contain default (selected) value in this case. * * <strong>HTML:</strong> * * Special "zpGridTypeNoedit" class makes column not editable. * * Special "zpGridTypeList" class means that cells in the column will not be * edited directly. Instead there will appear selectbox with the list of * possible values for the cell. Cell definition should contain select element: * <xmp> * <select> * <option>value1</option> * <option selected>value2</option> * ... * </select> * </xmp> * Special field types can be used alone or in conjunction with other field * types, e.g. class="zpGridTypeInt zpGridTypeNoedit" or * class="zpGridTypeFloat zpGridTypeList". * * <strong>XML:</strong> * * "noedit=true" attribute in field definition makes column not editable. * * "list=true" attribute in field definition means that cells in the column will * not be edited directly. Instead there will appear selectbox with the list of * possible values for the cell. Cell definition should contain select element: * <xmp> * <select> * <option>value1</option> * <option selected>value2</option> * ... * </select> * </xmp> * * <strong>In addition to config options defined in base Zapatec.Widget class * and Zapatec.Grid class provides following config options:</strong> * * <b>callbackCellEdit</b> [function] Callback function to call before grid cell * is turned into editable state. Receives Zapatec.EditableGrid and cell object. * Return false to stop editing using standard grid editor. * * <b>callbackCellReadOnly</b> [function] Callback function to call when grid * cell is turned into read-only state. Receives Zapatec.EditableGrid and cell * object. * * <b>externalEditors</b> [object] Array with external editors to use instead of * standard editors in following format: * [ * { * column: [number, optional] column number, * editor: [object, optional] widget object used as external editor, * callback: [function, optional] callback function to pass value for * editing * }, * ... * ] * If "column" property is not set, this editor is used for all columns and the * rest of the array members are ignored. If "callback" property is specified, * "editor" property is ignored. * * <b>autoSaveCell</b> [string] URL of server side script that is used for * checking and saving of individual cell. * * <b>callbackAutoSaveCell</b> [function] Callback function that is used for * checking of server side script response. It receives following object: * { * response: [object] XMLHttpRequest object * } * If cell was saved successfully, callback function must return true. * * <strong>In addition to events fired from base Zapatec.Grid class fires * following events:</strong> * * <b>gridCellEdit</b> before grid cell is turned into editable state and after * calling of callbackCellEdit. Event listener receives cell object that is * being modified. * * <b>gridCellSaved</b> when HTTP success response is received from the server * and callbackAutoSaveCell config option is not defined or callback function * returns true. Event listener receives following object as argument: * { * cell: [object] cell object, * request: [object] XMLHttpRequest object (see * {<span class="attrib">@link</span> Zapatec.Transport#fetch} for details) * } * * <b>gridCellNotSaved</b> when HTTP error response is received from the server * or callbackAutoSaveCell config option is defined and callback function * doesn't return true. Event listener receives following object as argument: * { * cell: [object] cell object, * error: [object] error object (see {<span class="attrib">@link</span> Zapatec.Transport#fetch} for * details) * } * * <b>gridCellEdited</b> before turning cell into read-only state if it was * changed. Event listener receives following object: * { * cell: [object] edited cell, * previousState: [object] cell before editing * } * * <b>gridEdited</b> when grid cell is turned into read-only state and after * calling of callbackCellReadOnly. Event listener receives edited cell object * as argument. * </pre> * * <span class="attrib">@constructor</span> * <span class="attrib">@extends</span> Zapatec.Grid * <span class="attrib">@param</span> {object} oArg User configuration */</span> Zapatec.EditableGrid = <span class="reserved">function</span>(oArg) { <span class="comment">// Call constructor of superclass</span> Zapatec.EditableGrid.SUPERconstructor.call(<span class="reserved">this</span>, oArg); }; <span class="comment">// Inherit Grid</span> Zapatec.inherit(Zapatec.EditableGrid, Zapatec.Grid); <span class="comment">/** * Configures editable grid. Extends parent method. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oArg User configuration */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.configure = <span class="reserved">function</span>(oArg) { <span class="comment">// Define config options</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">'callbackCellEdit'</span>); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'callbackCellReadOnly'</span>); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'externalEditors'</span>, []); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'autoSaveCell'</span>); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'callbackAutoSaveCell'</span>); <span class="comment">// Call parent method</span> Zapatec.EditableGrid.SUPERclass.configure.call(<span class="reserved">this</span>, oArg); <span class="comment">// Setup autosaving</span> var oConfig = <span class="reserved">this</span>.config; <span class="reserved">if</span> (oConfig.autoSaveCell) { <span class="reserved">this</span>.addEventListener(<span class="literal">'gridCellEdited'</span>, <span class="reserved">this</span>.saveCell); <span class="reserved">if</span> (typeof <span class="reserved">this</span>.visualizeCellSaved == <span class="literal">'function'</span>) { <span class="reserved">this</span>.addEventListener(<span class="literal">'gridCellSaved'</span>, <span class="reserved">this</span>.visualizeCellSaved); } <span class="reserved">if</span> (typeof <span class="reserved">this</span>.visualizeCellNotSaved == <span class="literal">'function'</span>) { <span class="reserved">this</span>.addEventListener(<span class="literal">'gridCellNotSaved'</span>, <span class="reserved">this</span>.visualizeCellNotSaved); } } }; <span class="comment">/** * Extends parent method. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {objcet} oCell Cell object * <span class="attrib">@return</span> Converted cell object * <span class="attrib">@type</span> object */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.convertCell = <span class="reserved">function</span>(oCell) { var oField = <span class="reserved">this</span>.getFieldByCell(oCell); <span class="reserved">if</span> (oField && oField.list && !oCell.innerHTML) { <span class="comment">// Parse HTML fragment</span> var oTmpContr = Zapatec.Transport.parseHtml(oCell.v); <span class="reserved">if</span> (oTmpContr.firstChild) { <span class="reserved">if</span> (oTmpContr.firstChild.nodeType == 1 && oTmpContr.firstChild.nodeName.toLowerCase() == <span class="literal">'select'</span>) { <span class="comment">// Save original select tag</span> oCell.innerHTML = oCell.v; <span class="comment">// Remove old value</span> var undef; oCell.v = undef; <span class="comment">// Value to display</span> var sVal; <span class="comment">// Iterate over values</span> var oOption = oTmpContr.firstChild.firstChild; <span class="reserved">while</span> (oOption) { <span class="reserved">if</span> (oOption.nodeType == 1 && oOption.nodeName.toLowerCase() == <span class="literal">'option'</span>) { <span class="comment">// Opera doesn't set selected property correctly</span> <span class="reserved">if</span> (oOption.selected || oOption.getAttribute(<span class="literal">'selected'</span>) || typeof oCell.v == <span class="literal">'undefined'</span>) { <span class="comment">// Set selected value</span> <span class="reserved">if</span> (oOption.value.length) { oCell.v = oOption.value; <span class="comment">// Check if value attribute is the same as displayed text</span> <span class="reserved">if</span> (oCell.v != oOption.innerHTML) { sVal = oOption.innerHTML; } } <span class="reserved">else</span> { oCell.v = oOption.innerHTML; } } } <span class="comment">// Next value</span> oOption = oOption.nextSibling; } <span class="comment">// Modify value to display</span> <span class="reserved">if</span> (typeof sVal != <span class="literal">'undefined'</span>) { oCell = Zapatec.EditableGrid.SUPERclass.convertCell.call(<span class="reserved">this</span>, oCell); oCell.v = sVal; <span class="reserved">return</span> oCell; } } <span class="reserved">else</span> <span class="reserved">if</span> ((oCell.values instanceof Array) && oCell.values.length) { <span class="comment">// For backward compatibility</span> var aHtml = []; aHtml.push(<span class="literal">'<select>'</span>); <span class="reserved">for</span> (var iVal = 0; iVal < oCell.values.length; iVal++) { var sVal = oCell.values[iVal]; aHtml.push(<span class="literal">'<option'</span>); <span class="reserved">if</span> (sVal == oCell.v) { aHtml.push(<span class="literal">' selected'</span>); } aHtml.push(<span class="literal">'>'</span>); aHtml.push(sVal); aHtml.push(<span class="literal">'</option>'</span>); } aHtml.push(<span class="literal">'</select>'</span>); oCell.innerHTML = aHtml.join(<span class="literal">''</span>); } <span class="reserved">else</span> { <span class="comment">// Single value</span> oCell.innerHTML = <span class="literal">'<select><option selected>'</span> + oCell.v + <span class="literal">'</option></select>'</span>; } } } <span class="reserved">return</span> Zapatec.EditableGrid.SUPERclass.convertCell.call(<span class="reserved">this</span>, oCell); }; <span class="comment">// Check if zpgrid-html.js is loaded</span> <span class="reserved">if</span> (Zapatec.Grid.<span class="reserved">prototype</span>.newFieldHtml) { <span class="comment">/** * Extends parent method. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oCell Element object * <span class="attrib">@return</span> Field object * <span class="attrib">@type</span> object */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.newFieldHtml = <span class="reserved">function</span>(oCell) { <span class="comment">// Call parent method</span> var oField = Zapatec.EditableGrid.SUPERclass.newFieldHtml.call(<span class="reserved">this</span>, oCell); <span class="comment">// Set noedit flag</span> <span class="reserved">if</span> (oCell.className.indexOf(<span class="literal">'zpGridTypeNoedit'</span>) >= 0) { oField.noedit = true; } <span class="comment">// Set list flag</span> <span class="reserved">if</span> (oCell.className.indexOf(<span class="literal">'zpGridTypeList'</span>) >= 0) { oField.list = true; } <span class="reserved">return</span> oField; }; } <span class="comment">// Check if zpgrid-xml.js is loaded</span> <span class="reserved">if</span> (Zapatec.Grid.<span class="reserved">prototype</span>.newFieldXml) { <span class="comment">/** * Extends parent method. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oCell Source object * <span class="attrib">@return</span> Field object * <span class="attrib">@type</span> object */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.newFieldXml = <span class="reserved">function</span>(oCell) { <span class="comment">// Call parent method</span> var oField = Zapatec.EditableGrid.SUPERclass.newFieldXml.call(<span class="reserved">this</span>, oCell); <span class="comment">// Set noedit flag</span> <span class="reserved">if</span> (oCell.getAttribute(<span class="literal">'noedit'</span>) == <span class="literal">'true'</span>) { oField.noedit = true; } <span class="comment">// Set list flag</span> <span class="reserved">if</span> (oCell.getAttribute(<span class="literal">'list'</span>) == <span class="literal">'true'</span>) { oField.list = true; } <span class="reserved">return</span> oField; }; } <span class="comment">/** * Keydown event handler in editable mode. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {number} iRowId Row id * <span class="attrib">@param</span> {number} iCellId Cell id */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.inputKeyDown = <span class="reserved">function</span>(iRowId, iCellId) { <span class="comment">// Get Event object</span> <span class="reserved">if</span> (!window.event) { <span class="reserved">return</span>; } <span class="comment">// Skip Shift, Ctrl and Alt buttons because they are used only as modifiers</span> <span class="reserved">if</span> (window.event.keyCode >= 16 && window.event.keyCode <= 18) { <span class="reserved">return</span> true; } <span class="comment">// Get target element</span> var oElement = window.event.srcElement || window.event.target; <span class="reserved">if</span> (!oElement) { <span class="reserved">return</span>; } <span class="comment">// Get row object</span> var oRow = <span class="reserved">this</span>.getRowById(iRowId); <span class="reserved">if</span> (!oRow) { <span class="reserved">return</span>; } <span class="comment">// Get field object</span> var oField = <span class="reserved">this</span>.getFieldById(iCellId); <span class="reserved">if</span> (!oField) { <span class="reserved">return</span>; } <span class="comment">// Get cell object</span> var oCell = <span class="reserved">this</span>.getCellById(iRowId, iCellId); <span class="reserved">if</span> (!oCell) { <span class="reserved">return</span>; } <span class="comment">// Process key</span> switch (window.event.keyCode) { case 27: <span class="comment">// Esc</span> <span class="reserved">return</span> <span class="reserved">this</span>.inputButtonEsc(oCell, window.event, oElement); case 13: <span class="comment">// Enter</span> <span class="reserved">return</span> <span class="reserved">this</span>.inputButtonEnter(oCell, window.event, oElement); case 0: <span class="comment">// Shift+Tab in Safari only</span> <span class="reserved">if</span> (/Safari/i.test(navigator.userAgent)) { <span class="reserved">return</span> <span class="reserved">this</span>.inputButtonTab(oCell, window.event, oElement); } break; case 9: <span class="comment">// Tab</span> <span class="reserved">return</span> <span class="reserved">this</span>.inputButtonTab(oCell, window.event, oElement); } }; <span class="comment">/** * Focus lost event handler for edited cell. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {number} iRowId Row id * <span class="attrib">@param</span> {number} iCellId Cell id */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.inputBlur = <span class="reserved">function</span>(iRowId, iCellId) { <span class="comment">// Get cell object</span> var oCell = <span class="reserved">this</span>.getCellById(iRowId, iCellId); <span class="reserved">if</span> (!oCell) { <span class="reserved">return</span>; } <span class="comment">// Make it read-only</span> <span class="reserved">this</span>.readOnlyCell(oCell); }; <span class="comment">/** * Esc key handler in editable mode. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oCell Cell object * <span class="attrib">@param</span> {object} oEvent Event object * <span class="attrib">@param</span> {object} oElement Target element */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.inputButtonEsc = <span class="reserved">function</span>(oCell, oEvent, oElement) { <span class="comment">// Restore original value</span> <span class="reserved">if</span> (oElement.nodeName.toLowerCase() == <span class="literal">'input'</span>) { <span class="comment">// Checkbox</span> oElement.checked = <span class="reserved">this</span>.getCellValueCompare(oCell) ? true : false; } <span class="reserved">else</span> { <span class="comment">// Selectbox or textarea</span> oElement.value = <span class="reserved">this</span>.getCellValueOriginal(oCell); } <span class="comment">// Make cell read only</span> <span class="reserved">this</span>.readOnlyCell(oCell); <span class="comment">// Stop event</span> <span class="reserved">return</span> Zapatec.Utils.stopEvent(oEvent); }; <span class="comment">/** * Enter key handler in editable mode. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oCell Cell object * <span class="attrib">@param</span> {object} oEvent Event object * <span class="attrib">@param</span> {object} oElement Target element */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.inputButtonEnter = <span class="reserved">function</span>(oCell, oEvent, oElement) { <span class="comment">// Make cell read only</span> <span class="reserved">this</span>.readOnlyCell(oCell); <span class="comment">// Stop event</span> <span class="reserved">return</span> Zapatec.Utils.stopEvent(oEvent); }; <span class="comment">/** * Tab key handler in editable mode. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oCell Cell object * <span class="attrib">@param</span> {object} oEvent Event object * <span class="attrib">@param</span> {object} oElement Target element */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.inputButtonTab = <span class="reserved">function</span>(oCell, oEvent, oElement) { <span class="comment">// Save reference to current cell</span> var oPrevCell = oCell; <span class="comment">// Go to previous/next cell skipping not editable cells</span> do { var oNextCell = null; <span class="reserved">if</span> (oEvent.shiftKey) { <span class="comment">// Get previous cell</span> <span class="reserved">if</span> (oCell.i == 0) { <span class="comment">// Get visible rows</span> var aRows = <span class="reserved">this</span>.applyPaging(); <span class="comment">// Get previous row</span> <span class="reserved">for</span> (var iRow = 0; iRow < aRows.length; iRow++) { var oCurrRow = aRows[iRow]; <span class="reserved">if</span> (oCurrRow && oCell.r == oCurrRow.i) { <span class="reserved">if</span> (iRow > 0) { <span class="comment">// Go to last cell of previous row</span> var oPrevRow = aRows[iRow - 1]; <span class="reserved">if</span> (oPrevRow && oPrevRow.cells instanceof Array) { oNextCell = oPrevRow.cells[oPrevRow.cells.length - 1]; } } <span class="reserved">else</span> <span class="reserved">if</span> (<span class="reserved">this</span>.currentPage > 0) { <span class="comment">// Visual improvement: unselect row and cell before switching page</span> <span class="reserved">this</span>.unselectRow(<span class="reserved">this</span>.getRowByCell(oPrevCell)); <span class="reserved">this</span>.unselectCell(oPrevCell); <span class="comment">// Go to previous page</span> <span class="reserved">this</span>.gotoPage(<span class="reserved">this</span>.currentPage - 1); <span class="comment">// Get visible rows</span> aRows = <span class="reserved">this</span>.applyPaging(); <span class="comment">// Go to last cell</span> var oLastRow = aRows[aRows.length - 1]; <span class="reserved">if</span> (oLastRow && oLastRow.cells instanceof Array) { oNextCell = oLastRow.cells[oLastRow.cells.length - 1]; } } break; } } } <span class="reserved">else</span> { <span class="comment">// Go to previous cell</span> var oRow = <span class="reserved">this</span>.getRowByCell(oCell); <span class="reserved">if</span> (oRow && oRow.cells instanceof Array) { oNextCell = oRow.cells[oCell.i - 1]; } } } <span class="reserved">else</span> { <span class="comment">// Get next cell</span> var oRow = <span class="reserved">this</span>.getRowByCell(oCell); <span class="reserved">if</span> (oRow && oRow.cells instanceof Array) { <span class="reserved">if</span> (oCell.i == oRow.cells.length - 1) { <span class="comment">// Get visible rows</span> var aRows = <span class="reserved">this</span>.applyPaging(); <span class="comment">// Get next row</span> <span class="reserved">for</span> (var iRow = 0; iRow < aRows.length; iRow++) { var oCurrRow = aRows[iRow]; <span class="reserved">if</span> (oCurrRow && oRow.i == oCurrRow.i) { <span class="reserved">if</span> (iRow < aRows.length - 1) { <span class="comment">// Go to first cell of next row</span> var oNextRow = aRows[iRow + 1]; <span class="reserved">if</span> (oNextRow && oNextRow.cells instanceof Array) { oNextCell = oNextRow.cells[0]; } } <span class="reserved">else</span> <span class="reserved">if</span> (<span class="reserved">this</span>.currentPage < <span class="reserved">this</span>.totalPages() - 1) { <span class="comment">// Visual improvement: unselect row and cell before switching</span> <span class="comment">// page</span> <span class="reserved">this</span>.unselectRow(<span class="reserved">this</span>.getRowByCell(oPrevCell)); <span class="reserved">this</span>.unselectCell(oPrevCell); <span class="comment">// Go to next page</span> <span class="reserved">this</span>.gotoPage(<span class="reserved">this</span>.currentPage + 1); <span class="comment">// Get visible rows</span> aRows = <span class="reserved">this</span>.applyPaging(); <span class="comment">// Go to first cell</span> var oFirstRow = aRows[0]; <span class="reserved">if</span> (oFirstRow && oFirstRow.cells instanceof Array) { oNextCell = oFirstRow.cells[0]; } } break; } } } <span class="reserved">else</span> { <span class="comment">// Go to next cell</span> oNextCell = oRow.cells[oCell.i + 1]; } } } <span class="comment">// Go to previous/next cell</span> oCell = oNextCell; } <span class="reserved">while</span> (oCell && (<span class="reserved">this</span>.fields[oCell.i].noedit || <span class="reserved">this</span>.fields[oCell.i].hidden)); <span class="comment">// Do nothing if this is first or last cell in the grid</span> <span class="reserved">if</span> (oCell) { <span class="comment">// Wait until grid is refreshed</span> var oGrid = <span class="reserved">this</span>; setTimeout(<span class="reserved">function</span>() { <span class="comment">// Unselect previous cell and turn it into read only state</span> oGrid.unselectCell(oPrevCell); <span class="comment">// Unselect previous row</span> oGrid.unselectRow(oGrid.getRowByCell(oPrevCell)); <span class="comment">// Select row</span> oGrid.selectRow(oGrid.getRowByCell(oCell)); <span class="comment">// Select cell</span> oGrid.selectCell(oCell); <span class="comment">// Turn cell into editable mode</span> oGrid.editCell(oCell); }, 0); } <span class="comment">// Stop event</span> <span class="reserved">return</span> Zapatec.Utils.stopEvent(oEvent); }; <span class="comment">/** * Turns cell into editable state. * * <pre> * Calls callbackCellEdit function before grid cell is turned into editable * state. Callback receives Zapatec.EditableGrid and cell object. If callback * returns false, standard grid editor is not used. * * Fires gridCellEdit event before grid cell is turned into editable state and * after calling of callbackCellEdit. Event listener receives cell object that * is being modified. * </pre> * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oCell Cell object */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.editCell = <span class="reserved">function</span>(oCell) { <span class="comment">// Check arguments</span> <span class="reserved">if</span> (!oCell || oCell.editing) { <span class="reserved">return</span>; } <span class="comment">// Check if editing of this column is allowed</span> var oField = <span class="reserved">this</span>.getFieldByCell(oCell); <span class="reserved">if</span> (!oField || oField.noedit) { <span class="reserved">return</span>; } <span class="comment">// Edit callback</span> var bVisualize; <span class="reserved">if</span> (typeof <span class="reserved">this</span>.config.callbackCellEdit == <span class="literal">'function'</span>) { bVisualize = <span class="reserved">this</span>.config.callbackCellEdit(<span class="reserved">this</span>, oCell); } <span class="comment">// Fire event</span> <span class="reserved">this</span>.fireEvent(<span class="literal">'gridCellEdit'</span>, oCell); <span class="comment">// Mark cell as editable</span> oCell.editing = true; <span class="comment">// Save reference</span> <span class="reserved">this</span>.editingCell = oCell; <span class="comment">// Get cell id</span> var iCellId = <span class="reserved">this</span>.getCellId(oCell); <span class="comment">// Check external editors</span> <span class="reserved">if</span> (<span class="reserved">this</span>.config.externalEditors && <span class="reserved">this</span>.config.externalEditors.length) { <span class="reserved">for</span> (var iEE = 0; iEE < <span class="reserved">this</span>.config.externalEditors.length; iEE++) { var oEE = <span class="reserved">this</span>.config.externalEditors[iEE]; <span class="reserved">if</span> (typeof oEE.column == <span class="literal">'undefined'</span> || oEE.column == iCellId) { <span class="reserved">if</span> (typeof oEE.callback == <span class="literal">'function'</span>) { <span class="comment">// Callback</span> oEE.callback(<span class="reserved">this</span>.getCellValueOriginal(oCell)); } <span class="reserved">else</span> <span class="reserved">if</span> (oEE.widget && typeof oEE.widget.receiveData == <span class="literal">'function'</span>) { <span class="comment">// Widget</span> oEE.widget.receiveData({ data: <span class="reserved">this</span>.getCellValueOriginal(oCell) }); } <span class="reserved">return</span>; } } } <span class="comment">// Check if we are responsible for visualisation</span> <span class="reserved">if</span> (!(<span class="reserved">this</span>.visualize && (bVisualize || typeof bVisualize == <span class="literal">'undefined'</span>))) { <span class="reserved">return</span>; } <span class="comment">// Display input field</span> var aCl; var sGridId = <span class="reserved">this</span>.id.toString(); var iRowId = <span class="reserved">this</span>.getCellRowId(oCell); <span class="comment">// Get table row element</span> var oTr = document.getElementById(<span class="literal">'zpGrid'</span> + sGridId + <span class="literal">'Row'</span> + iRowId); <span class="reserved">if</span> (oTr) { <span class="comment">// Vertical grid</span> <span class="comment">// Update className</span> aCl = []; aCl.push(<span class="literal">' zpGridRowEditable zpGridRowEditable'</span>); aCl.push(iRowId); aCl.push(<span class="literal">' zpGridRowEditable'</span>); aCl.push(oTr.className.indexOf(<span class="literal">'zpGridRowOdd'</span>) >= 0 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>); <span class="reserved">if</span> (oTr.className.indexOf(<span class="literal">'zpGridRowLast'</span>) >= 0) { <span class="comment">// Last row</span> aCl.push(<span class="literal">' zpGridRowEditableLast'</span>); } var sClass = aCl.join(<span class="literal">''</span>); oTr.className += sClass; <span class="comment">// Get fixed part of the row</span> oTr = document.getElementById(<span class="literal">'zpGrid'</span> + sGridId + <span class="literal">'Row'</span> + iRowId + <span class="literal">'Fixed'</span>); <span class="reserved">if</span> (oTr) { oTr.className += sClass; } } <span class="reserved">else</span> { oTr = document.getElementById(<span class="literal">'zpGrid'</span> + sGridId + <span class="literal">'Col'</span> + iCellId); <span class="reserved">if</span> (oTr) { <span class="comment">// Horizontal grid</span> <span class="comment">// Update className</span> aCl = []; aCl.push(<span class="literal">' zpGridColEditable zpGridColEditable'</span>); aCl.push(iCellId); aCl.push(<span class="literal">' zpGridColEditable'</span>); aCl.push(oTr.className.indexOf(<span class="literal">'zpGridColOdd'</span>) >= 0 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>); <span class="reserved">if</span> (oTr.className.indexOf(<span class="literal">'zpGridColLast'</span>) >= 0) { <span class="comment">// Last row</span> aCl.push(<span class="literal">' zpGridColEditableLast'</span>); } oTr.className += aCl.join(<span class="literal">''</span>); } } <span class="comment">// Get table cell element</span> var oTd = document.getElementById(<span class="literal">'zpGrid'</span> + sGridId + <span class="literal">'Row'</span> + iRowId + <span class="literal">'Cell'</span> + iCellId); <span class="comment">// Can be on different page</span> <span class="reserved">if</span> (oTd && oTd.firstChild) { <span class="comment">// Get number of visible columns</span> var iCols = <span class="reserved">this</span>.fields.length; <span class="reserved">for</span> (var iFld = 0; iFld < <span class="reserved">this</span>.fields.length; iFld++) { var oFld = <span class="reserved">this</span>.fields[iFld]; <span class="reserved">if</span> (!oFld || oFld.hidden) { iCols--; } } <span class="comment">// Update className</span> aCl = []; aCl.push(<span class="literal">' zpGridCellEditable zpGridCellEditable'</span>); aCl.push(iCellId); aCl.push(<span class="literal">' zpGridCellEditable'</span>); aCl.push(iCellId % 2 == 1 ? <span class="literal">'Odd'</span> : <span class="literal">'Even'</span>); <span class="reserved">if</span> (iCellId == iCols - 1) { <span class="comment">// Last cell</span> aCl.push(<span class="literal">' zpGridCellEditableLast'</span>); } oTd.className += aCl.join(<span class="literal">''</span>); <span class="comment">// Display form element depending from cell data type to edit cell value</span> var sDataType = <span class="reserved">this</span>.getCellDataType(oCell); <span class="reserved">if</span> (sDataType && sDataType.indexOf(<span class="literal">'boolean'</span>) == 0) { <span class="comment">// Checkbox</span> var aHtml = []; aHtml.push(<span class="literal">'<div style="position:relative;height:0px"><div style="position:absolute;top:0px;left:0px;width:'</span>); aHtml.push(oTd.firstChild.offsetWidth); aHtml.push(<span class="literal">'px;height:'</span>); aHtml.push(oTd.firstChild.offsetHeight); aHtml.push(<span class="literal">'px;text-align:center"><input type="checkbox" class="zpGridInput" onkeydown="Zapatec.Widget.callMethod('</span>); aHtml.push(sGridId); aHtml.push(<span class="literal">",'inputKeyDown',"</span>); aHtml.push(iRowId); aHtml.push(<span class="literal">','</span>); aHtml.push(iCellId); aHtml.push(<span class="literal">')" '</span>); <span class="reserved">if</span> (<span class="reserved">this</span>.getCellValueCompare(oCell)) { aHtml.push(<span class="literal">'checked="checked" '</span>); } aHtml.push(<span class="literal">'onblur="Zapatec.Widget.callMethod('</span>); aHtml.push(sGridId); aHtml.push(<span class="literal">",'inputBlur',"</span>); aHtml.push(iRowId); aHtml.push(<span class="literal">','</span>); aHtml.push(iCellId); aHtml.push(<span class="literal">')"/></div></div>'</span>); <span class="comment">// Original content is needed to keep cell size and position form</span> <span class="comment">// element correctly</span> aHtml.push(<span class="literal">'<div style="overflow:hidden;visibility:hidden">'</span>); aHtml.push(oTd.firstChild.innerHTML); aHtml.push(<span class="literal">'</div>'</span>); oTd.innerHTML = aHtml.join(<span class="literal">''</span>); } <span class="reserved">else</span> <span class="reserved">if</span> (oField.list) { <span class="comment">// Selectbox</span> var iWidth = oTd.firstChild.offsetWidth; var aHtml = []; aHtml.push(<span class="literal">'<div style="position:relative;height:0px"><div style="position:absolute;top:0px;left:0px">'</span>) aHtml.push(oCell.innerHTML); aHtml.push(<span class="literal">'</div></div>'</span>); <span class="comment">// Original content is needed to keep cell size and position form element</span> <span class="comment">// correctly</span> aHtml.push(<span class="literal">'<div style="overflow:hidden;visibility:hidden">'</span>); aHtml.push(oTd.firstChild.innerHTML); aHtml.push(<span class="literal">'</div>'</span>); oTd.innerHTML = aHtml.join(<span class="literal">''</span>); <span class="comment">// Set attributes</span> var oSelect = oTd.firstChild.firstChild.firstChild; <span class="reserved">if</span> (oSelect.className) { oSelect.className += <span class="literal">' zpGridSelect'</span>; } <span class="reserved">else</span> { oSelect.className = <span class="literal">'zpGridSelect'</span>; } oSelect.onkeydown = new Function(<span class="literal">'Zapatec.Widget.callMethod('</span> + sGridId + <span class="literal">",'inputKeyDown',"</span> + iRowId + <span class="literal">','</span> + iCellId + <span class="literal">')'</span>); oSelect.onblur = new Function(<span class="literal">'Zapatec.Widget.callMethod('</span> + sGridId + <span class="literal">",'inputBlur',"</span> + iRowId + <span class="literal">','</span> + iCellId + <span class="literal">')'</span>); oSelect.style.width = iWidth + <span class="literal">'px'</span>; <span class="comment">// Go to previously selected value</span> <span class="reserved">if</span> (typeof oCell.selectedIndex != <span class="literal">'undefined'</span>) { oSelect.selectedIndex = oCell.selectedIndex; } } <span class="reserved">else</span> { <span class="comment">// Textarea</span> var aHtml = []; aHtml.push(<span class="literal">'<div style="position:relative;height:0px"><div style="position:absolute;top:0px;left:0px"><textarea class="zpGridTextarea" onkeydown="Zapatec.Widget.callMethod('</span>); aHtml.push(sGridId); aHtml.push(<span class="literal">",'inputKeyDown',"</span>); aHtml.push(iRowId); aHtml.push(<span class="literal">','</span>); aHtml.push(iCellId); aHtml.push(<span class="literal">')" onkeyup="this.style.height=this.scrollHeight+\'</span>px\<span class="literal">';this.style.width=this.scrollWidth+\'</span>px\<span class="literal">'" onblur="Zapatec.Widget.callMethod('</span>); aHtml.push(sGridId); aHtml.push(<span class="literal">",'inputBlur',"</span>); aHtml.push(iRowId); aHtml.push(<span class="literal">','</span>); aHtml.push(iCellId); aHtml.push(<span class="literal">')" style="width:'</span>); aHtml.push(oTd.firstChild.offsetWidth); aHtml.push(<span class="literal">'px;height:'</span>); aHtml.push(oTd.firstChild.offsetHeight); aHtml.push(<span class="literal">'px"></textarea></div></div>'</span>); <span class="comment">// Original content is needed to keep cell size and position form</span> <span class="comment">// element correctly</span> <span class="reserved">this</span>.outputCellValue(aHtml, <span class="reserved">this</span>.getFieldByCell(oCell), oCell, true); oTd.innerHTML = aHtml.join(<span class="literal">''</span>); <span class="comment">// Edit original value</span> oTd.firstChild.firstChild.firstChild.innerHTML = <span class="reserved">this</span>.getCellValueOriginal(oCell); } var oInput = oTd.firstChild.firstChild.firstChild; <span class="comment">// IE needs small delay</span> setTimeout(<span class="reserved">function</span>() { <span class="reserved">if</span> (oInput.tagName.toLowerCase() == <span class="literal">'textarea'</span>) { oInput.style.height = oInput.scrollHeight + <span class="literal">'px'</span>; oInput.style.width = oInput.scrollWidth + <span class="literal">'px'</span>; <span class="comment">// IE needs focus twice for large grids</span> oInput.focus(); oInput.select(); } oInput.focus(); <span class="comment">// Prevent possible memory leak in IE</span> oInput = null; }, 0); } }; <span class="comment">/** * Returns currently edited cell object. * * <span class="attrib">@return</span> Edited cell object * <span class="attrib">@type</span> object */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.getEditingCell = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.editingCell; }; <span class="comment">/** * Receives data back from other widget previosly passed to it using its * {<span class="attrib">@link</span> Zapatec.Widget#receiveData} method. * * <pre> * Arguments object format: * { * data: [string] edited original value of the cell * } * </pre> * * <span class="attrib">@param</span> {object} oArg Arguments */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.acceptData = <span class="reserved">function</span>(oArg) { <span class="comment">// Call parent method</span> Zapatec.EditableGrid.SUPERclass.acceptData.call(<span class="reserved">this</span>, oArg); <span class="comment">// Check argument</span> <span class="reserved">if</span> (typeof oArg != <span class="literal">'object'</span>) { oArg = {}; } <span class="comment">// Update edited cell</span> <span class="reserved">this</span>.setCellReadOnly(<span class="reserved">this</span>.editingCell, oArg.data); }; <span class="comment">/** * Deprecated. Use {<span class="attrib">@link</span> Zapatec.EditableGrid#acceptData} instead. */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.editDataReceive = Zapatec.EditableGrid.<span class="reserved">prototype</span>.acceptData; <span class="comment">/** * Turns cell into read-only state and assigns new value. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oCell Cell object */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.readOnlyCell = <span class="reserved">function</span>(oCell) { <span class="comment">// Check arguments</span> <span class="reserved">if</span> (!oCell || !oCell.editing) { <span class="reserved">return</span>; } <span class="comment">// Mark cell as read-only</span> oCell.editing = false; <span class="comment">// Remove reference</span> <span class="reserved">this</span>.editingCell = null; <span class="comment">// Get new value if we are responsible for visualisation</span> var val; var sVal; <span class="reserved">if</span> (<span class="reserved">this</span>.visualize) { <span class="comment">// Get table cell element</span> var oTd = document.getElementById(<span class="literal">'zpGrid'</span> + <span class="reserved">this</span>.id + <span class="literal">'Row'</span> + <span class="reserved">this</span>.getRowId(<span class="reserved">this</span>.getRowByCell(oCell)) + <span class="literal">'Cell'</span> + <span class="reserved">this</span>.getCellId(oCell)); <span class="comment">// Can be on different page</span> <span class="reserved">if</span> (oTd && oTd.firstChild && oTd.firstChild.firstChild) { var oInput = oTd.firstChild.firstChild.firstChild; <span class="comment">// Check if this is input element</span> <span class="reserved">if</span> (oInput && typeof oInput.value != <span class="literal">'undefined'</span>) { <span class="comment">// Get cell value from input element</span> var sDataType = <span class="reserved">this</span>.getCellDataType(oCell); <span class="reserved">if</span> (sDataType && sDataType.indexOf(<span class="literal">'boolean'</span>) == 0) { <span class="comment">// Checkbox</span> val = oInput.checked; } <span class="reserved">else</span> <span class="reserved">if</span> (typeof oInput.selectedIndex != <span class="literal">'undefined'</span>) { <span class="comment">// Selectbox</span> var iIndex = oInput.selectedIndex; <span class="reserved">if</span> (iIndex != -1) { var oOption = oInput.options[iIndex]; <span class="reserved">if</span> (oOption) { val = oOption.value; <span class="reserved">if</span> (val && val.length) { <span class="comment">// Check if value attribute is the same as displayed text</span> <span class="reserved">if</span> (val != oOption.innerHTML) { sVal = oOption.innerHTML; } } <span class="reserved">else</span> { val = oOption.innerHTML; } } <span class="comment">// Save selected index</span> oCell.selectedIndex = oInput.selectedIndex; } } <span class="reserved">else</span> { <span class="comment">// Textarea</span> val = oInput.value; <span class="comment">// Unselect: required for tab navigation in IE</span> <span class="reserved">if</span> (document.selection && document.selection.empty) { document.selection.empty(); } } } } } <span class="comment">// Turn cell into read-only state</span> <span class="reserved">this</span>.setCellReadOnly(oCell, val, sVal); }; <span class="comment">/** * Turns cell into read-only state and assigns new value. If new value is * undefined, cell value is not changed. * * <pre> * Fires gridCellEdited event before turning cell into read-only state if it was * changed. Event listener receives following object: * { * cell: [object] edited cell, * previousState: [object] cell before editing * } * * Calls callbackCellReadOnly function when grid cell is turned into read-only * state. Callback receives Zapatec.EditableGrid and cell object. * * Fires gridEdited event when grid cell is turned into read-only state and * after calling of callbackCellReadOnly. Event listener receives edited cell * object as argument. * </pre> * * <span class="attrib">@param</span> {object} oCell Cell object * <span class="attrib">@param</span> {any} val Optional. New cell value * <span class="attrib">@param</span> {string} sVal Optional. Value to display unless it is the same as val * after conversion according to the data type. Normally this argument should be * omitted */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.setCellReadOnly = <span class="reserved">function</span>(oCell, val, sVal) { <span class="comment">// Check arguments</span> <span class="reserved">if</span> (!oCell) { <span class="reserved">return</span>; } <span class="comment">// Mark cell as read-only</span> oCell.editing = false; <span class="comment">// Remove reference</span> <span class="reserved">this</span>.editingCell = null; <span class="comment">// Set new value</span> <span class="reserved">if</span> (typeof val != <span class="literal">'undefined'</span>) { var sPrevVal = oCell.v; <span class="reserved">this</span>.setCellValue(oCell, val); <span class="comment">// Modify value to display</span> <span class="reserved">if</span> (typeof sVal != <span class="literal">'undefined'</span>) { oCell.v = sVal; } <span class="reserved">if</span> (sPrevVal != oCell.v) { <span class="reserved">this</span>.fireEvent(<span class="literal">'gridCellEdited'</span>, { cell: oCell, previousState: oCell.previousState }); } } <span class="comment">// Refresh cell without refreshing whole grid</span> <span class="reserved">this</span>.refreshCell({ cell: oCell }); <span class="comment">// Read-only callback</span> <span class="reserved">if</span> (typeof <span class="reserved">this</span>.config.callbackCellReadOnly == <span class="literal">'function'</span>) { <span class="reserved">this</span>.config.callbackCellReadOnly(<span class="reserved">this</span>, oCell); } <span class="comment">// Fire event</span> <span class="reserved">this</span>.fireEvent(<span class="literal">'gridEdited'</span>, oCell); }; <span class="comment">/** * Refreshes a cell without refreshing whole grid. * * <pre> * Arguments format: * { * cell: [object] cell object * } * </pre> * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oArg Arguments */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.refreshCell = <span class="reserved">function</span>(oArg) { <span class="comment">// Check arguments</span> var oCell = oArg.cell; <span class="reserved">if</span> (!oCell) { <span class="reserved">return</span>; } <span class="comment">// Display updates if we are responsible for visualisation</span> <span class="reserved">if</span> (<span class="reserved">this</span>.visualizeCellReadOnly && <span class="reserved">this</span>.visualize) { <span class="reserved">this</span>.visualizeCellReadOnly(oCell); } <span class="comment">// Redraw totals</span> <span class="reserved">if</span> (<span class="reserved">this</span>.redrawTotals) { <span class="reserved">this</span>.redrawTotals({ column: <span class="reserved">this</span>.getCellId(oCell) }); } <span class="comment">// Redraw filter out forms</span> <span class="reserved">this</span>.displayFilterOut(); }; <span class="comment">/** * Extends parent method. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oCell Cell object */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.unselectCell = <span class="reserved">function</span>(oCell) { <span class="comment">// Editable cell is always selected as well. When cell is unselected, it must</span> <span class="comment">// be turned into read-only state.</span> <span class="reserved">this</span>.readOnlyCell(oCell); <span class="comment">// Call parent method</span> Zapatec.EditableGrid.SUPERclass.unselectCell.call(<span class="reserved">this</span>, oCell); }; <span class="comment">/** * Extends parent method. * <span class="attrib">@private</span> */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.refresh = <span class="reserved">function</span>() { <span class="comment">// If there is editable cell, its value must be updated. Otherwise changes</span> <span class="comment">// will be lost.</span> <span class="reserved">this</span>.readOnlyCell(<span class="reserved">this</span>.editingCell); <span class="comment">// Call parent method</span> Zapatec.EditableGrid.SUPERclass.refresh.call(<span class="reserved">this</span>); }; <span class="comment">/** * Extends parent method. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {number} iRowId Id of row that was clicked * <span class="attrib">@param</span> {number} iCellId Id of cell that was clicked */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.rowOnDblClick = <span class="reserved">function</span>(iRowId, iCellId) { <span class="comment">// Call parent method</span> Zapatec.EditableGrid.SUPERclass.rowOnDblClick.call(<span class="reserved">this</span>, iRowId, iCellId); <span class="comment">// Turn cell that is currently edited into read-only state</span> <span class="reserved">if</span> (<span class="reserved">this</span>.editingCell) { <span class="reserved">this</span>.readOnlyCell(<span class="reserved">this</span>.editingCell); } <span class="comment">// Turn cell into editable state</span> <span class="reserved">this</span>.editCell(<span class="reserved">this</span>.getCellById(iRowId, iCellId)); }; <span class="comment">/** * Sends contents of a cell to the server. Waits for server response and * restores previous cell value if successful response is not received. * * <pre> * Using POST method sends to the server script specified in autoSaveCell config * option following arguments: * * <b>i</b> cell id * <b>r</b> row id * <b>o</b> input value * * If callbackAutoSaveCell config option is defined, it is used for checking of * server response. Otherwise only HTTP success response is checked. * callbackAutoSaveCell must return true is cell was saved successfully. * * Server script may return any content, which is passed to the gridCellSaved * event listeners. * * Fires following events: * * <b>gridCellSaved</b> when HTTP success response is received from the server * and callbackAutoSaveCell config option is not defined or callback function * returns true. Event listener receives following object as argument: * { * cell: [object] cell object, * request: [object] XMLHttpRequest object (see * {<span class="attrib">@link</span> Zapatec.Transport#fetch} for details) * } * * <b>gridCellNotSaved</b> when HTTP error response is received from the server * or callbackAutoSaveCell config option is defined and callback function * doesn't return true. Event listener receives following object as argument: * { * cell: [object] cell object, * error: [object] error object (see {<span class="attrib">@link</span> Zapatec.Transport#fetch} for * details) * } * * Arguments format: * { * cell: [object] cell object * } * </pre> * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} oArg Arguments */</span> Zapatec.EditableGrid.<span class="reserved">prototype</span>.saveCell = <span class="reserved">function</span>(oArg) { <span class="comment">// Validate cell</span> var oCell = oArg.cell; <span class="reserved">if</span> (!<span class="reserved">this</span>.validateCell(oCell)) { <span class="reserved">return</span>; } <span class="comment">// Form content</span> var sContent = [ <span class="literal">'i='</span>, <span class="reserved">this</span>.getCellId(oCell), <span class="literal">'&r='</span>, <span class="reserved">this</span>.getCellRowId(oCell), <span class="literal">'&o='</span>, escape(<span class="reserved">this</span>.getCellValueOriginal(oCell)) ].join(<span class="literal">''</span>); <span class="comment">// Send changes to the server</span> var oGrid = <span class="reserved">this</span>; Zapatec.Transport.fetch({ <span class="comment">// Server-side script</span> url: <span class="reserved">this</span>.config.autoSaveCell, <span class="comment">// Use POST method</span> method: <span class="literal">'POST'</span>, <span class="comment">// Arguments string</span> content: sContent, <span class="comment">// onLoad handler</span> onLoad: <span class="reserved">function</span>(oRequest) { var fCallback = oGrid.config.callbackAutoSaveCell; <span class="reserved">if</span> (typeof fCallback == <span class="literal">'function'</span> && !fCallback({request: oRequest})) { <span class="comment">// Cancel editing</span> oCell = oGrid.revertCell({ cell: oCell }); <span class="comment">// Show previous state</span> oGrid.refreshCell({ cell: oCell }); <span class="comment">// Inform listeners about error</span> oGrid.fireEvent(<span class="literal">'gridCellNotSaved'</span>, { cell: oCell, request: oRequest }); } <span class="reserved">else</span> { <span class="comment">// Inform listeners about success</span> oGrid.fireEvent(<span class="literal">'gridCellSaved'</span>, { cell: oCell, request: oRequest }); } }, <span class="comment">// onError handler</span> onError: <span class="reserved">function</span>(oError) { <span class="comment">// Cancel editing</span> oCell = oGrid.revertCell({ cell: oCell }); <span class="comment">// Show previous state</span> oGrid.refreshCell({ cell: oCell }); <span class="comment">// Inform listeners about error</span> oGrid.fireEvent(<span class="literal">'gridCellNotSaved'</span>, { cell: oCell, error: oError }); }, <span class="comment">// Show "Saving" animated GIF</span> busyContainer: <span class="reserved">this</span>.container, <span class="comment">// Use standard "Saving" animated GIF</span> busyImage: <span class="literal">'zpsaving.gif'</span> }); }; </pre> <hr> <!-- ========== START OF NAVBAR ========== --> <a name="navbar_top"><!-- --></a> <table border="0" width="100%" cellpadding="1" cellspacing="0"> <tr> <td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1"> <a name="navbar_top_firstrow"><!-- --></a> <table border="0" cellpadding="0" cellspacing="3"> <tr align="center" valign="top"> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a> </td> <td bgcolor="#FFFFFF" class="NavBarCell1Rev"> <font class="NavBarFont1Rev"><b>File</b></font> </td> <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a> </td> </tr> </table> </td> <td bgcolor="#EEEEFF" align="right" valign="top"><em> <b>Zapatec Grid</b></em> </td> </tr> <tr> <td bgcolor="white" class="NavBarCell2"><font size="-2"> PREV NEXT</font></td> <td bgcolor="white" class="NavBarCell2"><font size="-2"> <a href="index.html" target="_top"><b>FRAMES</b></a> <a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a> <script> <!-- if(window==top) { document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>'); } //--> </script> <noscript> <a href="allclasses-noframe.html" target=""><b>All Classes</b></a> </noscript> </font></td> </tr> </table> <!-- =========== END OF NAVBAR =========== --> <hr> <font size="-1"> </font> <div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Thu Aug 16 12:18:56 2007</div> </body> </html>