UI Integrations

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:

<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid',
    sortable: true
  }); 
}); 
</script>

• jQuery UI core
• jQuery UI sortable widget.

With this method we can reorder columns and set visible and hidden columns in the grid.
Calling convetions:

jQuery("#list").columnChooser(options);

or using the new API

jQuery("#list").jqGrid('columnChooser', options);

where options is a object with properties listed below.

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.

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).

Function done defined above has the following definition in the original jqGrid code:

opts = $.extend({
...
"done" : function(perm) { if (perm) self.jqGrid("remapColumns", perm, true) },
...
});

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:

jQuery("#list").jqGrid('columnChooser', {
   done : function (perm) {
      if (perm) {
          // "OK" button are clicked
          this.jqGrid("remapColumns", perm, true);
          // the grid width is probably changed co we can get new width
          // 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
      }
   }
});

• jQuery UI core
• jQuery UI sortable widget.
• jQuery UI dialog
• jQuery multiselect plugin

The jQuery multiselect plugin can be obained from here. Also this plugin is included in the plugins directory of the jqGrid build

This method allows reordering (sorting) grid rows in a visual manner using a mouse.
Calling convetions:

jQuery("#list").sortableRows(options);

or using the new API

jQuery("#list").jqGrid('sortableRows', options);

where options is a object with properties listed below.
The method is fully compatible with jQuery UI sortable widget. This means that we can set any option and event available in this widget. For more information on the options and events look here

• jQuery UI core
• jQuery UI sortable widget.

• Currently this method does not work correct in FireFox versions 3.0.x, Chrome and Safari browsers due to little problem in sortable widget, which we hope they will be corrected in future release of jQuery UI.
• Method does not work currently when treeGrid is enabled - i.e. you can not use the method to reorder tree rows.

This method allow to re size the grid width and/or height in visual manner using a mouse.

Calling convetions:

jQuery("#list").gridResize(options);

or using the new API

jQuery("#list").jqGrid('gridResize', options);

where options is a object with properties listed above.
The method is fully compatible with jQuery UI resizable widget. This means that we can set any option and event available in this widget. For more information on the options and events look here

• jQuery UI core
• jQuery UI resizable widget.

• Using the grid hide button (the button in the caption) does not hide the content created from the resizable widget. This cause appearing of borders of the grid after it is hidden.

This method allow drag and drop rows between two or more grids using a mouse.

Calling convetions:

jQuery("#list").gridDnD(options);

or using the new API

jQuery("#list").jqGrid('gridDnD', options);

where options is a object with properties listed below.

• jQuery UI core
• jQuery UI draggable widget.
• jQuery UI droppable widget.

• The method does not work well in Safari and Chrome because of the bug in the draggable widget. The effect is that the entry text is selected bellow the draggable row

In the example below we will create three grids with id grid1, grid2 and grid3. We will make so that rows from grid1 can be dragged to grid2 and grid3 and rows from grid2 can be dragged only to grid1.

// Creating grid1
jQuery("#grid1").jqGrid({
    datatype: "local",
    height: 100,
    colNames: ['Id1', 'Name1', 'Values1'],
    colModel: [
       {name: 'id1', index: 'id',width: 100}, 
       {name: 'name1',index: 'name',width: 100},
       {name: 'values1',index: 'values',width: 200}
    ],
    caption: 'Grid 1',
    pager: '#pgrid1'
});
 
//Creating grid2
jQuery("#grid2").jqGrid({
    datatype: "local",
    height: 100,
    colNames: ['Id2', 'Name2', 'Values2'],
    colModel: [
       {name: 'id2',index: 'id',width: 100},
       {name: 'name2',index: 'name',width: 100},
       {name: 'values2',index: 'values',width: 200}
    }],
    caption: 'Grid 2',
    pager: '#pgrid2'
});
// Creating grid3
jQuery("#grid3").jqGrid({
    datatype: "local",
    height: 'auto',
    colNames: ['Id3', 'Name3', 'Values3'],
    colModel: [
       {name: 'id3',index: 'id',width: 100},
       {name: 'name3',index: 'name', width: 100},
       {name: 'values3',index: 'values',width: 200}
    }],
    caption: 'Grid 3',
    pager: '#pgrid3'
});
 
// Data for grid1
var mydata1 = [
    {id1:"1",name1:"test1",values1:'One'},
    {id1:"2",name1:"test2",values1:'Two'},
    {id1:"3",name1:"test3",values1:'Three'}
];
// Data for grid2
var mydata2 = [
    {id2:"11",name2:"test11",values2:'One1'},
    {id2:"21",name2:"test21",values2:'Two1'},
    {id2:"31",name2:"test31",values2:'Three1'}
];
// Data for grid3
var mydata3 = [
    {id3:"12",name3:"test12",values3:'One2'},
    {id3:"22",name3:"test22",values3:'Two2'},
    {id3:"32",name3:"test32",values3:'Three2'}
];
// Adding grid data
for (var i = 0; i <= mydata1.length; i++) {
    jQuery("#grid1").jqGrid('addRowData',i + 1, mydata1[i]);
    jQuery("#grid2").jqGrid('addRowData',i + 1, mydata2[i]);
    jQuery("#grid3").jqGrid('addRowData',i + 1, mydata3[i]);
}
// connect grid1 with grid2 and grid3
jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid2,#grid3'});
// connect grid2 with grid1
jQuery("#grid2").jqGrid('gridDnD',{connectWith:'#grid1'});