Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:jquery_ui_methods [2010/05/03 15:37]
tony
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|}}
  
-<note important>​In order to use this method the jQuery multiselect plugin should be loaded before jqGrid</​note>​ 
  
 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 69: 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 78: 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 167: 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 ====
Line 173: Line 180:
   * jQuery UI draggable widget.   * jQuery UI draggable widget.
   * jQuery UI droppable widget.   * jQuery UI droppable widget.
 +
  
 ==== Known problems ==== ==== Known problems ====

QR Code
QR Code wiki:jquery_ui_methods (generated for current page)