Differences

This shows you the differences between two versions of the page.

--- wiki:inline_editing [2010/05/17 21:30]
tony
+++ wiki:inline_editing [2017/12/12 19:19] (current)
admin
@@ Line 11: / Line 11: @@
 ===== Software Requirement & Installation =====
 In order to use this functionality, make sure you put a check mark by the Inline Editing and Common modules when you downloaded jqGrid.  For more information refer to [[Download]].\\
 Note to Developers - Source code can be found in the grid.inlinedit.js file, located in the src directory.
@@ Line 18: / Line 18: @@
 ===== Methods =====
-For inline editing, we have three additional methods (of the Grid API) available:
+For inline editing, we have five additional methods (of the Grid API) available:
     * editRow
     * saveRow
     * restoreRow
+    * addRow
+    * inlineNav
 These methods can be called, of course, only on an already-constructed grid, from a button click or from an event of the grid itself:
-Exmaple:
+Example:
 <code javascript>
@@ Line 48: / Line 50: @@
 Calling conventions:
 <code javascript>
-jQuery("#grid_id").editRow(rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
+jQuery("#grid_id").editRow(rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
 </code>
 or when we use the new API
 <code javascript>
-jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
+jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
 </code>
@@ Line 61: / Line 63: @@
   * keys: when set to true we can use [Enter] key to save the row and [Esc] to cancel editing.
   * oneditfunc: fires after successfully accessing the row for editing, prior to allowing user access to the input fields. The row's id is passed as a parameter to this function.
+succesfunc, url, extraparam, aftersavefunc,errorfunc and afterrestorefunc are described below, in the saveRow section.
 <note tip>The row can not be edited if it has class 'not-editable-row' instead that in colModel some fields can have a property editable set to true.
 </note>
 <note>When set in the editRow the parameter function oneditfunc should not be enclosed in quotes and not entered with () - show just the name of the function.</note>
-If keys is true, then the remaining settings -- succesfunc, url, extraparam, aftersavefunc, errorfunc and afterrestorefunc - are passed as parameters to the saveRow method when the [Enter] key is pressed (saveRow does not need to be defined as jqGrid calls it automatically). For more information see saveRow method below. \\ \\
+<note important>As of version 4 of the jqGrid,  parameters passed to the method can be enclosed in object see below</note>
+Calling with object parameter:
+<code javascript>
+jQuery("#grid_id").jqGrid('editRow',rowid,
+{
+    keys : true,
+    oneditfunc: function() {
+        alert ("edited");
+    }
+});
+</code>
+The default object parameter is as follow:
+<code javascript>
+editparameters = {
+	"keys" : false,
+	"oneditfunc" : null,
+	"successfunc" : null,
+	"url" : null,
+        "extraparam" : {},
+	"aftersavefunc" : null,
+	"errorfunc": null,
+	"afterrestorefunc" : null,
+	"restoreAfterError" : true,
+	"mtype" : "POST"
+}
+jQuery("#grid_id").jqGrid('editRow',rowid,  parameters);
+</code>
+If keys is true, then the remaining settings -- successfunc, url, extraparam, aftersavefunc, errorfunc and afterrestorefunc - are passed as parameters to the saveRow method when the [Enter] key is pressed (saveRow does not need to be defined as jqGrid calls it automatically). For more information see saveRow method below. \\ \\
 When this method is called on particular row, jqGrid reads the data for the editable fields and constructs the appropriate elements defined in edittype and editoptions
@@ Line 76: / Line 113: @@
 Calling convention:
 <code javascript>
-jQuery("#grid_id").saveRow(rowid, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
+jQuery("#grid_id").saveRow(rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
 </code>
 or when we use the new API
 <code javascript>
-jQuery("#grid_id").jqGrid('saveRow',rowid, succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
+jQuery("#grid_id").jqGrid('saveRow',rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
+</code>
+<note important>As of version 4 of the jqGrid,  parameters passed to the method can be enclosed in object see below</note>
+Calling with object parameter:
+<code javascript>
+jQuery("#grid_id").jqGrid('saveRow',rowid,
+{
+    successfunc: function( response ) {
+        return true;
+    }
+});
+</code>
+The default object parameter is as follow:
+<code javascript>
+saveparameters = {
+	"successfunc" : null,
+	"url" : null,
+        "extraparam" : {},
+	"aftersavefunc" : null,
+	"errorfunc": null,
+	"afterrestorefunc" : null,
+	"restoreAfterError" : true,
+	"mtype" : "POST"
+}
+jQuery("#grid_id").jqGrid('saveRow',rowid,  saveparameters);
 </code>
@@ Line 116: / Line 183: @@
 jQuery("#grid_id").jqGrid('saveRow',"rowid", false, 'clientArray');
 </code>
+Using the object parameter this should be written:
+<code javascript>
+jQuery("#grid_id").jqGrid('saveRow',"rowid", { url : 'clientArray' });
+</code>
 Additionally to this we have other two options which can be set in grid options.
@@ Line 136: / Line 209: @@
 jQuery("#grid_id").jqGrid('restoreRow',rowid, afterrestorefunc);
 </code>
+<note important>As of version 4 of the jqGrid,  parameters passed to the method can be enclosed in object</note>
+Calling with object parameter:
+<code javascript>
+jQuery("#grid_id").jqGrid('restoreRow',rowid,
+{
+    "afterrestorefunc" : function( response ) {
+        // code here
+    }
+});
+</code>
+The default object parameter is as follow:
+<code javascript>
+restoreparameters = {
+	"afterrestorefunc" : null
+}
+jQuery("#grid_id").jqGrid('restoreRow',rowid,  restoreparameters);
+</code>
 where
   * rowid is the row to restore
   * afterrestorefunc if defined this function is called in after the row is restored. To this function we pas the rowid
+==== addRow ====
+This method add a row for inline edit.
+Calling convention:
+<code javascript>
+jQuery("#grid_id").addRow(rowid, parameters);
+</code>
+or when we use the new API
+<code javascript>
+jQuery("#grid_id").jqGrid('addRow',parameters);
+</code>
+where parameters is a object and has the following default values:
+<code javascript>
+parameters =
+{
+    rowID : "new_row",
+    initdata : {},
+    position :"first",
+    useDefValues : false,
+    useFormatter : false,
+    addRowParams : {extraparam:{}}
+}
+</code>
+Where
+  * rowID - (string) the value of the id of the new added row
+  * initdata  - (object) the object of the pair name:value where the name correspond to the name in colMode. When set this is the initial value of the the cell.
+  * position - (string) determines the position of the new adde row in the grid. Default is first. Can have a value last to be added at the last position
+  * useDefValues - (boolean) if set to true uses the defaultValue property in editoptions of the colModel
+  * useFormatter : (boolean) if set to true synchronises the parameters from the formatter actions
+  * addRowParams : (object) parameters which are passed to the addRow - they are the same as of editRow
+Actually this method uses two already constructed methods. When calling the method first executes the addRowData method which add a local row.
+After this the method call editRow method to edit the row. If the keys parameter is set to true and the user press ESC key the row is automatically deleted.
+==== inlineNav ====
+Add a navigators buttons which correspond to the inline methods addRow, editRow, saveRow, restoreRow. In order to use this method a navGrid method should be called before to call this method
+Calling convention:
+<code javascript>
+jQuery("#grid_id").navGrid(pagerid, {...});
+jQuery("#grid_id").inlineNav(pagerid, parameters);
+</code>
+or when we use the new API
+<code javascript>
+jQuery("#grid_id").jqGrid('navGrid',pagerid, {...});
+jQuery("#grid_id").jqGrid('inlineNav',pagerid, parameters);
+</code>
+Where parameters is a object with the following default values
+<code javascript>
+parameters = {
+   edit: true,
+   editicon: "ui-icon-pencil",
+   add: true,
+   addicon:"ui-icon-plus",
+   save: true,
+   saveicon:"ui-icon-disk",
+   cancel: true,
+   cancelicon:"ui-icon-cancel",
+   addParams : {useFormatter : false},
+   editParams : {}
+}
+</code>
+^Property^Type^Description^Default((English variant))^
+|add|boolean| Enables or disables the add action in the Navigator. When the button is clicked a addRow with parameters //addParams// is executed|true|
+|addicon|string|Set a icon to be displayed if the add action is enabled. Note that currently only icons from UI theme images can be added|ui-icon-plus|
+|addtext|string| The text than can be set in the add button|empty|
+|addtitle|string|The title that appear when we mouse over to the add button (if enabled)| Add new row|
+|edit|boolean| Enables or disables the edit action in the Navigator. When the button is clicked a editRow method is executed with //editParams// parameter the - current selected row|true|
+|editicon|string|Set a icon to be displayed if the edit action is enabled. Note that currently only icons from UI theme images can be used|ui-icon-pencil|
+|edittext|string| The text than can be set in the edit button|empty|
+|edittitle|string|The title that appear when we mouse over to the edit button (if enabled)| Edit selected row|
+|position|string|Determines the position of the Navigator buttons in the pager. Can be left, center and right. |left|
+|save|boolean|Enables or disables the save button in the pager. When the button is clicked a saveRow method is executed with  //editParams// parameters|true|
+|saveicon|string|Set a icon to be displayed if the refresh action is enabled. Note that currently only icons from UI theme images can be used|ui-icon-disk|
+|savetext|string| The text than can be set in the refresh button|empty|
+|savetitle|string|The title that appear when we mouse over to the refresh button (if enabled)|Save row|
+|cancel|boolean|Enables or disables the cancel(restore) button in the pager.When the button is clicked a restoreRow method is executed with parameters //editParams//|true|
+|cancelicon|string|Set a icon to be displayed if the search action is enabled. Note that currently only icons from UI theme images can be used|ui-icon-cancel|
+|canceltext|string| The text than can be set in the cancel button|empty|
+|canceltitle|string|The title that appear when we mouse over to the search button (if enabled)|Cancel trow editiong|
+|addParams|object|Parameters that can be passed to the addRow method in navigator. For detailed information see addRow parameters|{useFormatter : false}|
+|editParams|object|Parameters that can be passed to the editRow, saveRow, restoreRow methods in navigator. For detailed information  the related methods|{}|
 ===== Notes =====
@@ Line 173: / Line 363: @@
       {name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}},
       {name:'stock',index:'stock', width:60, editable: true, edittype:"checkbox",editoptions: {value:"Yes:No"}},
-      {name:'ship',index:'ship', width:90, editable: true, edittype:"select", editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
+      {name:'ship',index:'ship', width:90, editable: true, edittype:"select",formatter:'select', editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
       {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
               ],
@@ Line 187: / Line 377: @@
   });
   var mydata2 = [
-    {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
+    {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FE"},
-    {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
+    {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"IN"},
-    {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
+    {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TN"},
-    {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX"},
+    {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"AR"},
-    {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
+    {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FE"},
-    {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
+    {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FE"},
-    {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
+    {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"AR"},
-    {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
+    {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TN"},
-    {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
+    {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FE"}
     ];
   for(var i=0;i<mydata2.length;i++)

Differences

Navigation

Search

Toolbox

QR Code