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 [2009/11/28 08:07] 127.0.0.1 external edit |
wiki:jquery_ui_methods [2017/12/12 17:28] (current) admin |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== 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 49: | Line 50: | ||
| </code> | </code> | ||
| where //options// is a object with properties listed below.\\ | where //options// is a object with properties listed below.\\ | ||
| - | 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. | + | <note important>In order to use this method the jQuery multiselect plugin should be loaded before jqGrid</note> |
| + | 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|}} | ||
| + | |||
| To see Column Chooser dialog like on the picture above, one should include ui.multiselect.css and ui.multiselect.js (jQuery UI Multiselect Plugin, http://plugins.jquery.com/project/Multiselect). | To see Column Chooser dialog like on the picture above, one should include ui.multiselect.css and ui.multiselect.js (jQuery UI Multiselect Plugin, http://plugins.jquery.com/project/Multiselect). | ||
| Line 67: | 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 76: | 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 157: | Line 165: | ||
| |onstart|function|This event raises when we start drag a row from the source grid (i.e. to which this method is applied). Parameters passed to this event are the event handler and a prepared ui object. For more information refer to [[ http://jqueryui.com/demos/draggable/#event-start |jQuery UI draggable events]] |null| | |onstart|function|This event raises when we start drag a row from the source grid (i.e. to which this method is applied). Parameters passed to this event are the event handler and a prepared ui object. For more information refer to [[ http://jqueryui.com/demos/draggable/#event-start |jQuery UI draggable events]] |null| | ||
| |onstop|function|This event is triggered when dragging stops. Parameters passed to this even are the event handler and a prepared ui object. For more information refer to [[ http://jqueryui.com/demos/draggable/#event-stop |jQuery UI draggable events]]|null| | |onstop|function|This event is triggered when dragging stops. Parameters passed to this even are the event handler and a prepared ui object. For more information refer to [[ http://jqueryui.com/demos/draggable/#event-stop |jQuery UI draggable events]]|null| | ||
| - | |beforedrop|function|This event raises before droping the row to the grid specified in connectWith option. Parameters passed to this event are the event handler, prepared ui object, data which will be inserted into the grid in name value pair, source grid object and target(this) grid object.|null| | + | |beforedrop|function|This event raises before droping the row to the grid specified in connectWith option. Parameters passed to this event are the event handler, prepared ui object, data which will be inserted into the grid in name value pair, source grid object and target(this) grid object. \\ If the event return object in value name pair this object will be inserted into the target grid.|null| |
| |ondrop|function|This event raises after the droping the row to the grid specified in connectWith option. Parameters passed to this event are the event handler, prepared ui object, data which is inserted into the grid in name value pair. For more information refer to [[ http://jqueryui.com/demos/droppable/#event-drop |jQuery UI droppable events]]|null| | |ondrop|function|This event raises after the droping the row to the grid specified in connectWith option. Parameters passed to this event are the event handler, prepared ui object, data which is inserted into the grid in name value pair. For more information refer to [[ http://jqueryui.com/demos/droppable/#event-drop |jQuery UI droppable events]]|null| | ||
| |drop_opts|object|Predefined options which can be applied to the droppable grid (specified with connectWith option above). Also you can set any option and event (except drop event which is replaced with ondrop event listed above). For more information refer to [[ http://jqueryui.com/demos/droppable/ |jQuery UI droppable]] | { activeClass : "ui-state-active", \\ hoverClass : "ui-state-hover" \\ } | | |drop_opts|object|Predefined options which can be applied to the droppable grid (specified with connectWith option above). Also you can set any option and event (except drop event which is replaced with ondrop event listed above). For more information refer to [[ http://jqueryui.com/demos/droppable/ |jQuery UI droppable]] | { activeClass : "ui-state-active", \\ hoverClass : "ui-state-hover" \\ } | | ||
| Line 163: | Line 171: | ||
| |dropbyname|boolean|If set to true this means that only fields that have equal names will be added to the target grid. Note that we use addRowData to insert new row, which means that if some field with name "a" on source grid is hidden they can appear on the target grid. The default value of false mean that the grid data will be added to the target counted from the first column from source.|false| | |dropbyname|boolean|If set to true this means that only fields that have equal names will be added to the target grid. Note that we use addRowData to insert new row, which means that if some field with name "a" on source grid is hidden they can appear on the target grid. The default value of false mean that the grid data will be added to the target counted from the first column from source.|false| | ||
| |droppos|string|Determines where to add the new row. Can be first which mean as first row of the grid and last - as last row in the target grid. |first| | |droppos|string|Determines where to add the new row. Can be first which mean as first row of the grid and last - as last row in the target grid. |first| | ||
| - | |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.|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 ==== | ||
| Line 171: | Line 180: | ||
| * jQuery UI draggable widget. | * jQuery UI draggable widget. | ||
| * jQuery UI droppable widget. | * jQuery UI droppable widget. | ||
| + | |||
| ==== Known problems ==== | ==== Known problems ==== | ||
