Requirements and installation

In order to use these methods is necessary to include additionally the jQuery UI library in the head section of the document. For more information how to download the jQuery UI library visit here
After downloading the jQuery UI your configuration can look like this: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
</head>
<body>
...
</body>
</html>

Where jquery-ui-1.8.2.custom.min.js is the jQuery UI library.
In order to overcome some confusions we recommend to download the full version of the UI library.

Column Chooser

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

$grid->callGridMethod('#grid','columnChooser');
or
$grid->callGridMethod('#grid','columnChooser', array(options));

where options is a array with properties listed below #grid is the id of the grid anf $grid is the grid object created with jqGridRender method

To see Column Chooser dialog like on the picture above, one should include ui.multiselect.css and ui.multiselect.js before jqGrid.
The plugin and the CSS file are bounded with the package, so there is no need to download it separatley.

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.

Since the method usually is a attched to button click it can be used with setJSCode methods.
Another possibility is to add a button at pager and call the grid method navButtonAdd. Below is example how to do this using the following tutorial

<?php
require_once 'jq-config.php';
// include the jqGrid Class
require_once "php/jqGrid.php";
// include the driver class
require_once "php/jqGridPdo.php";
....
// add a custom button via the build in callGridMethod
// note the js: before the function
$colChooser = << COLCH
function() 
{
jQuery("#grid").jqGrid('columnChooser',{title:'My Column Chooser'});
}
COLCH;
$buttonoptions = array("#pager",
    array("caption"=>"Column Chooser", "onClickButton"=>"js:".$colChooser)
);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions); 

$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>

Below is the list of options that can be used for this method

Name

Type

Description

Default

title

string

Title of the modal dialog

See $.jgrid.col.title in language file

width

number

Set the width of the dialog in pixels

420

height

number

Set the height of the dialog in pixels

240

classname

string

Class which will be added to the selector where the selects are build

null

done

function

Function which will be called when the user press Ok button. In the current implementation we cal remapColumns method in order to reorder the columns


msel

mixed

msel is either the name of a ui widget class that extends a multiselect, or a function that supports creating a multiselect object (with no argument, or when passed an object), and destroying it (when passed the string “destroy”)

multiselect

dlog

mixed

dlog is either the name of a ui widget class that behaves in a dialog-like way, or a function, that supports creating a dialog (when passed dlog_opts) or destroying a dialog (when passed the string “destroy”)

dialog

dlog_opts

mixed

dlog_opts is either an option object to be passed to “dlog”, or (more likely) a function that creates the options object. The default produces a suitable options object for ui.dialog


cleanup

function

Function to cleanup the dialog, and select. Also calls the done function with no permutation (to indicate that the columnChooser was aborted


Sortable Rows

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

$grid->callGridMethod('#grid','sortableRows', array(options));

where options is a array with properties listed below #grid is the id of the grid anf $grid is the grid object created with jqGridRender method
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
Method can be calles using the setJSCode method.

Known problems

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


Resizable Grid

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

$grid->callGridMethod("#grid,'gridResize', array(options));

where options is a array with properties listed below #grid is the id of the grid anf $grid is the grid object created with jqGridRender method
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
Method can be calles using the setJSCode method.

Known problems

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

Drag and Drop rows between grids

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

Calling convetions:

$grid->callGridMethod('#grid','gridDnD', array(options));

where options is a array with properties listed below #grid is the id of the grid anf $grid is the grid object created with jqGridRender method

Name

Type

Description

Default

connectWith

string

Determines the target grid(s) to which the row should be dropped. The option is a string. In case of more than one grid the ids should be delemited with comma - i.e ”#grid1, #grid2”

empty string

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 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 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.
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 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 jQuery UI droppable

{ activeClass : “ui-state-active”,
hoverClass : “ui-state-hover”
}

drag_opts

object

Predefined options which can be applied to the draggable grid (i.e. to which this method is applied). Also you can set any option and event (except start and stop events which are replaced with onstart and onstop events listed above). For more information refer to jQuery UI draggable

{ revert: “invalid”,
helper: “clone”,
cursor: “move”,
appendTo : ”#jqgrid_dnd”,
zIndex: 5000
}

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

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_

Known problems

  • 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

Example:

Let suppose that two grids are created with grid1.php and grid2.php files and the ids of the grids are respectivley #grid1 and #grid2.
Lets suppose that the file grid2.php is included after the file grid1.php, then in file grid2.php the following code will connect both grids, so that we can drag and drop rows between them

// file grid2.php
require_once 'jq-config.php';
// include the jqGrid Class
require_once "php/jqGrid.php";
// include the driver class
require_once "php/jqGridPdo.php";
....

$grid->callGridMethod('#grid1','gridDnD', array(array("connectWith"=>"#grid2")));
$grid->callGridMethod('#grid2','gridDnD', array(array("connectWith"=>"#grid1")));
$grid->renderGrid('#grid2','#pager',true, null, null, true,true);