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 10:55] 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 244: | Line 244: | ||
This method add a row for inline edit. | 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 ===== | ===== Notes ===== | ||
Line 278: | 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 292: | 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++) |