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 13:12] tony |
wiki:inline_editing [2017/12/12 19: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 278: | Line 278: | ||
| Actually this method uses two already constructed methods. When calling the method first executes the addRowData method which add a local row. | 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. | 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 ===== | ===== Notes ===== | ||
| Line 311: | 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 325: | 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++) | ||
