Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
wiki:inline_editing [2011/12/12 11:42] tony |
wiki:inline_editing [2017/12/12 17:19] (current) admin |
||
|---|---|---|---|
| Line 11: | Line 11: | ||
| ===== Software Requirement & Installation ===== | ===== 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]].\\ | + | 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. | Note to Developers - Source code can be found in the grid.inlinedit.js file, located in the src directory. | ||
| Line 27: | Line 27: | ||
| 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: | 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> | <code javascript> | ||
| Line 50: | Line 50: | ||
| Calling conventions: | Calling conventions: | ||
| <code javascript> | <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> | </code> | ||
| or when we use the new API | or when we use the new API | ||
| <code javascript> | <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> | </code> | ||
| Line 105: | Line 105: | ||
| - | 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. \\ \\ | + | 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 | 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 113: | Line 113: | ||
| Calling convention: | Calling convention: | ||
| <code javascript> | <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> | </code> | ||
| or when we use the new API | or when we use the new API | ||
| <code javascript> | <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> | </code> | ||
| Line 126: | Line 126: | ||
| jQuery("#grid_id").jqGrid('saveRow',rowid, | jQuery("#grid_id").jqGrid('saveRow',rowid, | ||
| { | { | ||
| - | succesfunc: function( response ) { | + | successfunc: function( response ) { |
| return true; | return true; | ||
| } | } | ||
| Line 295: | Line 295: | ||
| Where parameters is a object with the following default values | Where parameters is a object with the following default values | ||
| + | <code javascript> | ||
| parameters = { | parameters = { | ||
| edit: true, | edit: true, | ||
| Line 307: | Line 308: | ||
| editParams : {} | 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 ===== | ===== Notes ===== | ||
| Line 340: | Line 363: | ||
| {name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}}, | {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:'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"}} | {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} | ||
| ], | ], | ||
| Line 354: | Line 377: | ||
| }); | }); | ||
| var mydata2 = [ | 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++) | for(var i=0;i<mydata2.length;i++) | ||
