Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
wiki:jquery_ui_methods [2010/06/29 20:30] tony |
wiki:jquery_ui_methods [2017/12/12 17:28] (current) admin |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ~~ODT~~ | ||
| ====== UI Integrations ====== | ====== UI Integrations ====== | ||
| + | |||
| ===== Sortable Columns ===== | ===== Sortable Columns ===== | ||
| - | This method is integrated in jqGrid, so there it is not necessary to do something special. The method allow to reorder the grid columns using the mouse. The only necessary setting in this case is to set the sortable option in jqGrid to true. | + | This method is integrated in jqGrid, so there it is not necessary to do something special. The method allow to reorder the grid columns using the mouse. The only necessary setting in this case is to set the sortable option in jqGrid to true. |
| using our example this will look like this: | using our example this will look like this: | ||
| <code javascript> | <code javascript> | ||
| Line 51: | Line 51: | ||
| where //options// is a object with properties listed below.\\ | where //options// is a object with properties listed below.\\ | ||
| <note important>In order to use this method the jQuery multiselect plugin should be loaded before jqGrid</note> | <note important>In order to use this method the jQuery multiselect plugin should be loaded before jqGrid</note> | ||
| - | After calling this a modal dialog appear where the user can reorder columns and set which of them can be visible and which of them can be hidden. | + | After calling this a modal dialog will appear where the user can reorder columns and set which of them can be visible and which of them can be hidden. |
| {{:wiki:columnchooser.jpg|}} | {{:wiki:columnchooser.jpg|}} | ||
| Line 70: | Line 70: | ||
| |cleanup|function|Function to cleanup the dialog, and select. Also calls the done function with no permutation (to indicate that the columnChooser was aborted| | | |cleanup|function|Function to cleanup the dialog, and select. Also calls the done function with no permutation (to indicate that the columnChooser was aborted| | | ||
| - | Function done defined above has the following definition: | + | Function done defined above has the following definition in the original jqGrid code: |
| <code javascript> | <code javascript> | ||
| opts = $.extend({ | opts = $.extend({ | ||
| Line 79: | Line 79: | ||
| </code> | </code> | ||
| - | In order to do other things after reordering you can redefine this option. By example let say that we want to recalculate the width of the grid after reordering or when the user show or hide some columns. The code can look like this: | + | In order to do other things after reordering you can redefine this option. For example let say that we want to recalculate the width of some elements on the page after the user show or hide some columns. The code can look like this: |
| <code javascript> | <code javascript> | ||
| jQuery("#list").jqGrid('columnChooser', { | jQuery("#list").jqGrid('columnChooser', { | ||
| done : function (perm) { | done : function (perm) { | ||
| - | if (perm) { | + | if (perm) { |
| + | // "OK" button are clicked | ||
| this.jqGrid("remapColumns", perm, true); | this.jqGrid("remapColumns", perm, true); | ||
| - | var gwdth = this.jqGrid("getGridParam","width"); | + | // the grid width is probably changed co we can get new width |
| - | this.jqGrid("setGridWidth",gwdth); | + | // and adjust the width of other elements on the page |
| + | //var gwdth = this.jqGrid("getGridParam","width"); | ||
| + | //this.jqGrid("setGridWidth",gwdth); | ||
| + | } else { | ||
| + | // we can do some action in case of "Cancel" button clicked | ||
| } | } | ||
| } | } | ||
| Line 168: | Line 173: | ||
| |autoid|boolean|This option determines how the new row id should be generated. If this option is true we generate a id wich begin with string setted with the option autoidprefix (see below) and a random number. If this option is false the id can be either the the next record count or value determined by key property in colModel. \\ If the parameter is defined as function this function should return value which will act as id to the target grid. Parameters passed in this case is the data array which will be inserted into the target grid row|true| | |autoid|boolean|This option determines how the new row id should be generated. If this option is true we generate a id wich begin with string setted with the option autoidprefix (see below) and a random number. If this option is false the id can be either the the next record count or value determined by key property in colModel. \\ If the parameter is defined as function this function should return value which will act as id to the target grid. Parameters passed in this case is the data array which will be inserted into the target grid row|true| | ||
| |autoidprefix|string|This option have sense only if the option autoid is set to true and determines the prefix of the new genearted id. |dnd_| | |autoidprefix|string|This option have sense only if the option autoid is set to true and determines the prefix of the new genearted id. |dnd_| | ||
| + | |dragcopy|boolean|Copies the source row to the target rather than moving it. (GridDnD only).|false| | ||
| ==== Used jQuery UI widget(s) and other plugins ==== | ==== Used jQuery UI widget(s) and other plugins ==== | ||
