Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
1161 lines (915 sloc) 44.3 KB
3.6 version
Bug Fixes
* Fix problem with getAbsoluteIndex on IE8
* Fix in triggerReload grid to reset the savedRow array.
* Fix in setGridWidth method when try to resize a grid a and there is no data.
* Fix header aligment in ie8
* Fix in createEl function to check for val and not for html when select
* making getChangedCells method compatible with unformat function if defined
* Fixed record count when scroll true
* Fix in setSelection method to accept numbers
* Fix IE header checkbox when multiselect is true
* Fix for searching DOM elements with id containing special characters
* Fix a checkbox checking in form editing module.
* Fix getCol to use unformat function
* Better looking buttons in form editing
* Fix searchFilter in IE7 and IE6 not to return undefined value when more
than one field is searched.
* Some fixes for datepicker UI in inline and cell edit (when present)
* Fix in setLabel method not to clear the sort icons when we set new label
* Fix in form edit when a formatter select is used
* Fix the id pollution when multiselect is enabled. Now the id of every
common multiselect is combination of cb_ + id of the grid
* Fixed bug when deselectAfterSort false and we are in multiselect mode
* Fix in unformat number and currency
* Fixed bug when creating a select with dataUrl and select is set to multiple.
* Fix a bug when creating select with multiple option. Also the attribute
should be set immediatley after the element is created and not after.
* Fix a bug in form edit. The comapared values should be trimed since of
split(",") which cause the elements to begin with space.
* Fix a jqGrid loader (development version) for IE browsers
* Fix for form icons in Opera
* Fix getGridParam to return values 0 or false
* Avoiding the overhead of local functions and maintenance issues when the
parameters change
* Opera fix for cursor col-resize
* Fix in editGridRow when a save key is defined and the key is Eneter we
should not do save when we are in teaxtarea element
* Fix in formatter checkbox when the value is undefined. We also add a
default format for the checkbox too
* Fix addRowData to use key:true (keyIndex) when rowid is not defined
* Fix formatter bug for the select to use the defaultFormat
* Adding a 3 parameter to the unformat function - the cellobject.
* Fix alternate rows when we sort data locally.
* Fix in addRowData for alternate rows when we add item as last
* Fix collapseRow in treegrid preventing infinite recursion
* Fix in stripHtml function to parse numeric values
* Fix in delGridRow to get "fresh" Data from delData object
* Fix problems with width option if set as string.
* Fixing $jgrid.format function in base module to accept undefined parameter.
* Fix for saveRow method in aftersave function. Also we pass the request and
not the responseText. Also both aftersave and success functions have the
same type parameter - the response
* Fix for serchhidden in searchGrid method
* Fix for setGridWidth method
* Fix setColWidth function
* Fix for topinfo and bottom info in formedit to appear separatley in edit and add dialogs
* Fix searchFilter css to work when called from subgrid
* Fix celledit to work better when datepicker is attached
* Fix in viewGrid row to vizualize only the columns that only not hidden.
Additions and changes
* New API
* RTL Support
* Column reordering
* Added life scrolling of data
* Added gridResize method which can resize the grid. Also use a jQuery UI
resizable and can use any options of this widget
* Added sortableRows method which allow us to sort rows with drag and drop
* Added gridDnD method. The method connect two or more grids so that drag and drop rows
between these is possible
* Add columnChooser method which allows choosing/sorting columns at the same
time. This method requiere multiselect plugin
* Now getRowData can return all rows when rowid is not set.
* getCol now can return summary, average and count of the selected row. The
3 parameter determines this (valid are sum, avg, count). If this parameter
is set and is valid, the returned value is a scalar.If the param is not
valid the returned value is empty array.
* To setRowData we add a 3 parameter. If the parameter is string we use
addClass to add classes. If the parameter is object we use css to add css
properties. Note that we can set properties and classes without data, in
this case we should set data to false
* Adding a event object to ondblClickRow and onRightClickRow events as 4 parameter
* Add a ant based build system which allow us to minify the JS code
* Added custom validation property in editing modules
* Added possibility to create custom element in editing modules
* Adding support to configure the ajax request in a way that user want. This
is done in all modules where ajax is used.
* Added class in cell edit and inline edit so that the cell or row can not
be edited - the corresponding classes are 'not-editable-cell' and
* Added Hebrew Translation
* Added a beforeCheckValues event in editGridRow method. The execution is
before checking the values. Should return object of the posted data.
* Added Romanian translation
* Added a property classes in colModel where we can attach classes to column.
* info_dialog function can be used as separate modal dialog
* Added a class ui-ellipsis in grid css file. Also work in FireFox too.
* Changind the order of calling the events beforeSearch and beforeClear in
filterToolbar method. Also the events are called immediatley after triggering the grid
* To onCellSelect we replace the 4 parameter with the more natuaral event instead of -
sorry if this will bring to some confusions.
* Added searchoptions value parameter in order to separate the editing module and search module.
We first look for such option in searchoptions and if not found we use the
editoptions value
* Added fixed property in colModel which allow us not to change the
column width if shrinkToFit is true and we set new width of the grid.
* Added buildSelect function to deserialize data for the select. This is option
can be added in editoptions or search options
Please read The Installation instructions first in install.txt
3.5 beta (buld6- build11)
New Properties and methods
- Added new grid parameter hoverrows. When set to false the mouse hovering is
disabled in the grid data rows.
- Added rowid as parameter to error function in saveRow method - inline
editing module
- treeGrid to be initially work with datatype local
- Added new method updateGridRows (grid.custom.js)
This method update the existing data in the grid by given id rowname.
Syntax: updateGridRows (data, rowidname, jsonreader)
data is a array of data in format
where the name is the name from colModel and value is the actuall value.
It is not neccessary that all columns are present in the data item object
(the same as setRowData method)
rowidname (string) - is the name of the row which should acts as id.
If not set the name "id" is used.
jsonreader (boolean) default false. If set to true a jsonReader definition
is used to set the data. Note that this work only of the item in jsonReader
object 'repeatitems' is set to true.
- Switch to namedItems JS function. This improve the speed. Previously we
walk throught the entry rowset to find the rowIndex of the given rowid.
Now we use the build in javaScript method namedItems which do the same.
- multiselect is enabled in inline edit module.
- To the importComplete event in jqGridImport method we pass the response.
- Added support for alternate rows. Also added new jqGrid option altclass.
The default value is 'ui-priority-secondary' THis way we can develop our own
alternate class.
- Added ShrinkToFit option in setColumns method which fit columns to the grid
width. Default value is false.
- Extend tableToGrid method to use custom options when building the grid.
The call to this function is
tableToGrid(selector, options)
where options is the object with jqGrid options.
- Adding 4px right to the view records text for better view
- Add a onClose event to all modals in form editing (except alert dialog)
The default value is null. This event can be passed in editGridRow, delGridRow,
viewGridRow, and setColumns methods. The event raised when a close icon is clicked,
a cancel button is clicked or ESC key is pressed (if this is enabled).
- Significant speed improvents in tree Grid when a relative large data is loaded.
- Added dataheight parameter to all modal windows, where we can control the
scrolling content. Intitially this parameter is auto.
To summarize - we have two parameters for controlling the height of the modal.
height and dataheight.
The height parameter control the height of the entry modal, dataheight parameter
control the height of the scrolling content. The buttons of the modals are
allways visible at the bottom of the modal.Also some improvments in jqDnR.
- In setColumns method we add colnameview and closeAfterSubmit parameters. The
colnameview (default true). If set to false the names from colModel are not
visible. closeAfterSubmit if defined cleses the dialog after the submit
button is clicked.
- Added parameter viewsortcols in jqGrid parameters. The purpose of this
parameter is to define different look and behavior of sorting icons that
appear near the header. This parameter is array with the following default
viewsortcols : [false,'vertical',true]
The first parameter determines if all icons should be viewed at the same time
when all columns have sort property set to true.
The default of false determines that only the icons of the current sorting column
should be viewed.
Setting this parameter to true causes all icons in all sortable columns to be viewed.
The second parameter determines how icons should be placed - vertical means that
the sorting icons are one under another. 'horizontal' means that the icons should
be one near other.
The third parameter determines the click functionality. If set to true the columns are
sorted if the header is clicked. If set to false the columns are sorted only when
the icons are clicked.
Important note: When set a third parameter to false be a sure that the first parameter
is set to true, otherwise you will lost the sorting.
- Fixed bug in filterToolbar. We search now by index and when not found by
- Fix in searchGrid method. We search now by index and when not found by
- Fixed bug in IE when resizing columns. The function getOffset is changed
so that the resizing speed is the same as in Safari and FF.
- Fix multiple select bug in createEl function. Now we set the options before
checking for multiple:true
- Fixed bug in treegrid. The strict comparation in getNodeParent method
causes bad results.
- Fix in setGridWidth method. We do not initialize correct the new width which
causes after the first set of the width to not work in other grid in the same
- Fixed bug in GridExport. We delete the columns that are generated
dynamically - multiselect, subgrid, treegrid or rownumbers. This way the
import is without errors
- Fixed a bug in addRowData method to add data with id = 0 (number)
- Fixed a forever loading bug in IE.
- Fixed altRows bug in delRowData method
- navGrid method fix for warning modal and IE6
- Fix setColumns method to the common apprach of forms and modals
- Fix for IE8 in getAbsoluteIndex method. IE8 seems to work as other browsers
- Fixed bug in delRowData - the grid does not resize when first row is
- Fixed bug when rownumbers and subgrid are used together
- Fixed bug in row editing when the column name contain dot.
- Fixing bug in viewGridRow - also the id manes of the form are changed in order
to be not equal of those in editGridRow
3.5 beta (buld5)
- added options checkOnUpdate (default false) in editGridRow method.
Also available in add and edit mode.
When this option is set to true the behaviour as follow:
When something is changed in the form and the user click on
Cancel button, navigator buttons, close button (on upper right corner of the
form), in overlay (if available) or press Esc key (if set) a message box apper
asking the user to save the changes, not to save the changes and go back in the
form or cancel all changes (this will close the modal form)
Note that checkOnSubmit option will work only when a submit button is clicked.
When nothing is changed we contionue with the action.
- added option - rowabove (default false) in colModel formoptions
When set to true a new empty row is added above this row in form editing.
- added option - rowcontent (default empty) in colModel formoptions.
This option have sense only when rowabove option is set to true.
With this option is possible to set a content to the new added empty row in
the form. In order to style easy these rows a class 'contentinfo' is set.
- added new items in the language files to support the checkOnUpdate option
- added class 'delmsg' in the delGridRow method. This allow us to change the
message dynamically using a beforeShow or afterSow eventrs. The class is added
to a element td.
- fix in Bulgarian translations files.
- fix in searchGrid method. Now we search by index (from colModel) and only if
it is not available we search by name.
- Fix for date parser in the base module. Now we can sort locally on
dates that contain month names
- Fixed bug in searchGrid. The translation messages for the operations does not
apper when not set in colModel
- removed some not needed events from base grid. Also return false do these
by default;
- Fix bug to check if datepicker is available in searchGrid.
- Fix a bug in searchGrid in IE6, where the data value is not set for elements
after the first
- Fixed bug when calling of jqModal multiple times on the same element. We
need the initialization only once and not every time. This cause a memory
- Fixed bug in formatter where the data containing ' causes break in IE
- Fixed bug in base module when adding data where the data contain a ' char.
This breaks in IE browsers.
- Fixed bug in checkboxes. We add the value setted in the editoptions. Also
converting to lower case make the option checkOnUpdate to be true every time.
- We replace white-space nowrap with pre in td element in the CSS file. This fixes
the bug in IE where the first row does not wrap when the text is longer than
the column width. Also this requiere DOCTYPE declaration in the document.
- Fixed bug in viewGridRow method where when resizing the modal causes the data
to apper bad.
3.5 beta (buld4)
- added option footerrow - default false. If set to true this will place a
footer table with one row below the gird records and above the pager.
The number of columns equal of these from colModel
-added option userDataOnFooter(default false) which directly place the user data
array at footer. The rules are as follow: If the userData array contain name
which is equal to those of colModel then the value is placed in that column.
If there are no such values nothing is palced. Note that if this option
is used we use the current formatter options (if available) for that column.
-Added method getCol(colname). Colname can be either number which represents
the index of the column or name from colModel. The method return array with
the values of the coulmn.
- Added method footerData ( action, data, format). This method get or set data
on footer.
action - can be 'get' or 'set'. If not set default is get.
When set to 'get' - the result is object of type name:value, where the name is
a name from colModel. This will return a data from the footer. The other two
options does not have effect in this case.
When set to 'set' a data array (object) should be set. This will place
the values in the footer.
format - default is true. This instruct the method to use the formmater
(if set in colModel) when a new values are set.
Setting to false will disable the using of formatter.
Related css items in the ui.jqgrid.css
.ui-jqgrid-sdiv - is a div container for the footer
.ui-jqgrid-ftable - is the class for the table
tr.footrow - is the class for the footer row
tr.footrow td is the item for the cell formating
In order to format every cell in a way that you want
maybe you can use
jQuery("tr.footrow td:eq(2)","#gbox_mygrid").css(...)
where the td:eq(2) point to the third column
and mygrid is the id of the grid. The id of the global grid container
is constructed via "gbox_"+the id of the grid.
There are no methods to show and hide the footer row dynamically, but
following the above example we can do
jQuery(".ui-jqgrid-sdiv","#gbox_mygrid").hide() - this will hide the footer row.
jQuery(".ui-jqgrid-sdiv","#gbox_mygrid").show() - this will show the footer row.
Form Editing
aded option in editGridRow - checkOnSubmit (default false)
This option only work in editing mode and not in add.
When set to true - the method looks if any data is changed in the form and
if this is a case a dilog message appear where the user is asked to confirm the
changes or cancel it. Pressing cancel will return to the form, but does not
set the values to its original state.
Note that this causes a some changes in the language file.
- Removed imgpath from cell edit and inline edit modules and common module.
This parameter is no longer valid in 3.5
- Replace $ with jQuery in grid.common.js which causes problems when used with
other librariers like prototype.
- removed a checking e.srcElement from base module. jQuery allready fix this.
- fixing the size option in select when using ajax to load selects.
- Fixed bug in IE browsers, when clicked on href tag with child nodes,
IE incorrect report in all cases that this is a href element. This couses
onSelectCell not to behave correct.
- Fixed bug in searchGrid - group options are not passed to serchFilter in
order get them from Language file.
- Fix in bulgarian trnslations.
- Fix on sorting column. The initial sort check first for index and then for
column name. Before the checking for the index was missed.
Sortorder converted to lower case in order to avoid some cofusions.
- Fix in set columns module. The modal does not appear correctly due to
missed parameter
3.5 beta (buld3)
- To the loading message is added ui-state-active class from Theme roller.
This is more natural, indicating that the grid is active when data is loaded.
Form Editing
- Added keyboard navigation, which allow us to navigate throught the records while
in form editing pressing certain keys. This option is available in editGridRow
and viewGridRow methods. The default state is disabled. To enable this you
should set the options in the edit/add parameters:
navkeys: [true,38,40]
The first item enables the navigation.
The second item corresponds to reccord up and by default is the the key code
for Up key
The third item corresponds to reccord down and by default is the key code for
Down key
$("#mygrid").navGrid("#pager",{options},{id:'myeditid',navkeys: [true,38,40]}..)
Also this option does not work in add mode.
Note: Instead that this does not have sense, if you plan to navigate with keys
it is recommended to add this option in add mode. This should be done
because the form for add and edit is the same and it is unknown which action
will be lunched first.
- Added posibility to save the form pressing certain key - add/edit mode only
By default this option is disabled.
To enable
savekey: [true,13]
The first item enables saving with pressing certain key.
The second item corresponds to key code for saving. Default Enter (key code 13)
Note that this binding should be used for both adding and editing a row.
Since the binding is for the form, there is no possibility to have one
key in add and another in edit mode.
- Added icons for the buttons in the form. The corresponding class in the css
is "fm-button"
By default all icons are enabled.
For add/edit method editGridRow
The save button is defined with
saveicon : [true,"left","ui-icon-disk"]
The close button is defined with
closeicon: [true,"left","ui-icon-close"]
The first item enables the icon
The second item tells where to pu icon left or right
The third item corresponds to valid ui icon from theme roller
For viewGrid Row
closeicon : [true,"left","ui-icon-close"]
For Deleting
delicon: [true,"left","ui-icon-scissors"]
cancelicon: [true,"left","ui-icon-cancel"]
-Fixed bug when getting the index of the row. Strict compare should be removed.
-Fixed bug when datatype is function - we need to exit when call it and not to
-Fixed bug in form editing - the buttons do not align properly.
3.5 beta (build2)
This was missed in the first build
In the navGrid we can pass uniquie id's of the buttons in order to manipulate
them easy. If no id is set we create one which is combination of:
for add button "add_"+ the id of the grid
for edit button "edit_"+ the id of the grid
for view button "view_" + the id of the grid
for delete button "del_" + the id of the grid
for search button "search_" + the id of the grid
for refresh button "refresh_" + the id of the grid
$("#mygrid").navGrid("#pager",{options}, {id:'myeditid'},{id:'myaddid'}...)
Base Grid
- Record number information now can format the values according to the
formatter setting (if available) getting information from language file.
- Fixed bug when multi select with json. We pass wrong parameter to addMulti
- Spelling error in all language files, which cause not to set the default
value correct
- Fixed bug when creating warning message. Fixed bug when determining the
number column element in the form
- Fixed bug - clientSide datatype should be converted to lower case
according to the new improvements
- Fixed bug in IE6/7 when try to select a option in the select generated via
Upgrade from 3.4.x to 3.5 beta.
1. Installation
See install.txt
2. Code changes
2.1 The following grid options are deprecated - i.e. you can remove them from
the grid options. They are not needed in 3.5 version
2.2 Second change is related to custom formatters. Starting with version 3.5,
the custom formatter is passed the following parameters:
formatter : function ( cellvalue, options, rowObject )
// format the cellvalue to new format
return new_formated_cellvalue;
Note the return in the function. This function should always return a value
in order to work correctly. The parameters are
cellvalue - is the value to be formatted
options - is an object containing the following element
options : { rowId: rid, colModel: cm}
where rid - is the id of the row
colModel is the object of the properties for this column getted from colModel
array of jqGrid
rowObject - is a row data represented in the format determined from datatype
If we have datatype: xml/xmlstring - the rowObject is xml node,provided
according to the rules from xmlReader
If we have datatype: json/jsonstring - the rowObject is array, provided
according to the rules from jsonReader
Code in 3.4.x variant
formatter : function ( elem, cellvalue, options)
var newval = "<strong>"+cellvalue+"</strong>";
Code in 3.5
formatter : function ( cellvalue, options, rowObject )
return "<strong>"+cellvalue+"</strong>";
Base Module
Bug fixes
- fixed bug in onCellSelect event when used in IE browsers - now the rowIndex
passed to this event is calculated correctly regardless of hidden columns.
- fixed width bug when multiselect is used. Previously the width of this column
is recalculated according to table width and when shrinkToFit is set to true.
Now the column has fixed width and is no longer recalculated when the grid
width is changed. See documentation for the new options
- fixed width bug when subgrid is used. Previously the width of this column is
recalculated according to table width and when shrinkToFit is set to true. Now
the column has fixed width and is no longer recalculated when the grid width
is changed. See documentation for the new options
- fixed bug in addRowData method when the grid is empty and we try to add one
or more columns. The width of the data was not being recalculated correctly,
according to the header elements.
- fixed bug when we use xmlstring and jsonstring to add data. Previously all
the data from the string is loaded without reference to the rowNum parameter.
Also this behaviour is changed for xml and json data. In other words, we now
load only rowNum number of rows even when the request consists of more rows.
- fixed bug when posting values of input of type select set to multiple:true.
Now in all editing modules the posted values in for multiselect are separated
with comma
- fixed bug in the size option of multi select. If the size option is not set
for multiselect the default value is 3
Deprecated options
imgpath: "", in all modules
sortascimg: "sort_asc.gif",
sortdescimg: "sort_desc.gif",
firstimg: "first.gif",
previmg: "prev.gif",
nextimg: "next.gif",
lastimg: "last.gif",
sortclass: "grid_sort",
resizeclass: "grid_resize",
Note that imgpath is not used anymore in all modules.
The altRows option is still here, but will have no effect until the jQuery
UI Theme roller supports alternative rows.
Note that the table element where we define the grid can not have a class
scroll - i.e. class scroll in the table definition can be omitted, but this
is NOT true for the pager element.
New options
datatype can now set as 'script'. In other words, we now support script
as datatype.
reccount: numeric, Default 0. Determines the exact number of available
grid rows. Can be <= from rowNum parameter
autowidth: boolean, Default false. When set to true, the grid width is
recalculated automatically to the width of the parent element. This is done
only initially when the grid is created. In order to resize the grid when
the parent element changes width you should apply custom code and use a
setGridWidth method for this purpose.
scrollOffset: numeric, Default 18. Determines the width of the vertical
scrollbar. Since different browsers interpret this width differently (and it
is difficult to calculate it in all browsers) this can be changed.
cellLayout: numeric, Default 5. This option determines the padding + border
width of the cell. Usually this should not be changed, but if custom changes
to td element are made in the grid css file this will need to be changed.
subGridWidth: numeric, Default 20. Determines the width of the subgrid column
if the subGrid option is set to true.
multiselectWidth: numeric, Default 20. Determines the width of the multiselect
column if multiselect is set to true.
rownumbers: boolean, Default false. If this option is set to true, a new column
at left of the grid is added. The purpose of this column is to count the number
of available rows, beginning from 1. In this case colModel is extended
automatically with new element with name - 'rn'. Also, be careful not to use
the name 'rn' in colModel
rownumWidth: numeric, Default 25. Determines the width of the row number column
if rownumbers option is set to true.
pagerpos: string, Default 'center'. Determines the position of the pager in the
grid. By default the pager element when created is divided in 3 parts (one part
for pager, one part for navigator buttons and one part for record information)
recordpos: string, Default 'right'. Determines the position of the record
information in the pager.
toolbar now accepts another option: "both". When we set toolbar: [true,"both"]
two toolbars are created -- one on the top of table data and one of the bottom
of the table data. When we have two toolbars then we create two elements (div).
The id of the top bar is constructed like "t_"+id of the grid and the bottom
toolbar the id is "tb_"+id of the grid. In case when only one toolbar is
created we have the id as "t_" + id of the grid, independent of where this
toolbar is created (top or bottom)
gridview: boolean, Default value false. In the previous versions of jqGrid,
including 3.5 alfa, reading a relatively big data sets (Rows >=100 ) caused
speed problems. The reason for this was that as every cell was inserted into
the grid we applied about 5-6 jQuery calls to it. Now this problem is resolved;
we now insert the entry row at once with a jQuery append. The result is
impressive - about 3-5 times faster. What will be the result if we insert all
the data at once? Yes, this can be done with a help of gridview option when set
to true. The result is a grid that is 5 to 10 times faster. Of course when this
option is set to true we have some limitations. If set to true we can not use
- treeGrid
- subGrid, or
- afterInsertRow event.
If you do not use these three options in the grid you can set this option to
true and enjoy the speed.
addRowData now is 1-2 times faster because we are using the concept to insert
the row at once
Added jQuery function parse (removed from json2.js module):
To prevent JavaScript hijacking attacks, web application authors are encouraged
to use this function. This returns a JSON representation of the variable.
Cyclic structures are detected and safely interrupted, but could not be further
1. The while(1); construct, located at the beginning of JSON text,
2. Comments at the beginning and end of the text.
JSON data providers are encouraged to use one or both of these methods to
prevent data execution. Such JSON response may then look like this:
{"name":"safe value 1"},
{"name":"safe value 2"},
jqGrid uses this function when obtaining a data with datatype:'json', also used
in subGrid.
Added jQuery function stringToDoc: jQuery.stringToDoc(xmlstring). This returns
the xml document of xml string
Added new method: jQuery("#mygrid").updateColumns(); this synchronizes the
width of the headers with the data. Useful when used with table drag and drop.
colModel changes and additions
searchhidden is removed from editrules object
added searchoptions object to define properties, events and other settings when
a search is performed
searchoptions : {
dataUrl : value,
dataInit: function,
dataEvents : array,
defaultValue: value,
attr: object,
searchhidden: boolean,
sopt: array
To summarize - when we want to deal with search we should use the following
options in colModel
search : boolean , // true/false
stype: value, // text/select
searchoptions : object // see above
Note: when the dataUrl is not used for the search type select, the definitions
for the select are taken from editoptions value property - i.e
editoptions:{value:"1:one;2:two",...}. See below for how to use these options in
different search methods.
Added new object formoptions to define various settings in form editing. Also
valid only in this module.
formoptions : {
rowpos: number,
label: value
See below for how to use
The editoptions are extended with the following properties. Valid in all editing
modules editoptions : {
dataUrl : value, dataInit: function, dataEvents : array, defaultValue:
} See below
Changes in all editing modules
edittype property is extended with the support of the following input elements:
button, image and file
As described above in all editing modules we can add additional properties and
events to the editing element:
editoptions : {
dataUrl : value, dataInit: function, dataEvents : array, defaultValue:
dataUrl option is valid only for the elements of type select - i.e.,
When this option is set, the element will be filled with values from the ajax
request. The data should be a valid html select element with the desired
options. <select>
<option value="1">One</option> <option value="2">Two</option>
In form editing for add/edit this is called only once. In order to call it every
time the form is launched you should set the option recreateForm:true or use
other events like beforeShowForm (with another custom ajax call) to fill the
desired element.
In inline edit and cell edit this is fired every time you edit the row or cell
dataInit : function (elem) {
// do something
If set, this function is called only once ? when the element is created. The
function is passed the specified element. This option is ideal for attaching
date picker, time picker, etc. Example:
dataInit : function (elem) {
dataEvents: list of events to apply to the data element; uses
$("#id").bind(type, [data], fn) to bind events to data element
Should be described like this dataEvents: [
{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(; }
}, { type: 'keypress', fn: function(e) { console.log('keypress'); } }
The event(s) are called only once when the element is created
defaultValue: 'value' or function This option is valid only in Form Editing
module when used with editGridRow method in add mode.If set this the input
element is set with this value if only element is empty. If used in selects the
text should be provided and not the key. Also when a function is used the
function should return value.
Now we can validate a url. The corresponding settings is in colModel
editrules:{required:true, url:true}
In all methods that deal with the modals are added the following options (thanks
to Faserline Team:
jqModal: true. The default value is true. How it works. If set to true, first
jqGrid checks if the jqModal plugin is available. If this plugin is available we
create the modal according to the jqModal plugin. If this plugin is not
available jqGrid create its own modal. The difference between the jqModal window
and jqGrid modal window is that the overlay covers only the grid, but not the
entry page as jqModal does. If this option is set to false, jqGrid will create
its own modal as described above even if jqModal is available.
The only exception here is searchGrid method created with the new searchFilter
plugin, where this option is not available. In this method a jqGrid modal window
is used.
closeOnEscape : false. Default false. When set to true the modal window can be
closed with ESC key.
From now on jqGrid use a new search engine
thanks to wonderful plugin provided from Kasey Speakman (
This plugin can also be used separately. Detailed documentation is provided in
the jquery.searchFilter.js which is provided with jqGrid package.
These options are not used anymore in the searchGrid method
top : 0,
left: 0,
width: 360,
height: 80,
modal: false,
closeicon: 'ico-close.gif',
dirty: false,
processData: "",
Added the following options
recreateFilter: false, This option construct the filter every time a search
button is clicked.
multipleSearch : false, When set to false the behaviour of the search is the
same as those in versions before 3.5 When set to true: 1. We have a possibility
to add/delete as many conditions as we want 2. The posted data to the server is
string (actually a json array converted to string)
sFilter: 'filters', This option has an effect only when the multipleSearch is
set to true; it describes the name of the posted string. By default this, i.e.
the posted data, can look like this
filters ={
groupOp determines the logical operator that can be used in the where statement
of the select. The value can be AND or OR. This can be changed used a select box
which is created at bottom of the search filter.
The rules array describes actually which fields and how they are included in the
where clause The field element describes the name of the field The op element
describes the operator that should be used in the search The data element is the
data that we want to search.
The above example (if getted and constructed correctly) should generate the
following where clause
SELECT .... FROM table,... WHERE id > 1 AND name LIKE 'Client%'
As described above the search is constructed according to the searchoptions in
search : boolean , // true/false stype: value, // text/select
searchoptions : {
dataUrl : value,
dataInit: function,
dataEvents : array,
attr: object,
searchhidden: boolean,
sopt: array
Note that here is missing the defaultValue. The option is not implemented in
this method.
stype determines the search type - can be select or text. If not set a text is
dataUrl option is valid only for the elements of type select, i.e.
When this option is set the element will be filled with values from the ajax
request. The data should be a valid html select element with the desired
options. <select>
<option value="1">One</option> <option value="2">Two</option>
This is called only once.
dataInit : function (elem) {
// do something
If set this function is called only once when the element is created. To the
function is passed the element. Also this option is ideal for attaching date
picker, time picker and etc. Example
dataInit : function (elem) {
dataEvents: list of events to apply to the data element; uses
$("#id").bind(type, [data], fn) to bind events to data element
Should be described like this
dataEvents: [
{ type: 'click', data: { i: 7 }, fn: function(e) { console.log(; }},
{ type: 'keypress', fn: function(e) { console.log('keypress'); } }
The event(s) are called only once when the element is created
attr is object where we can set valid attributes to the created element
attr : { title: "Some title" }
searchhidden : if set to true, the hidden element will appear in the search.
array that correspond to the op element in the posted data and determines the
operation. If not set all the available options will be used; if set only the
set values will appear as selectboxes.
All available option are sopt:
The corresponding texts are in language file and mean the following ['equal',
'not equal', 'less', 'less or equal','greater','greater or equal', 'begins
with','does not begin with','is in','is not in','ends with','does not end
with','contains','does not contain'],
Note that the elements in sopt array can be mixed in any order.
=========add/edit form==========
In the editGridRow method the following options are no longer used
closeicon: 'ico-close.gif',
imgpath: ''
Added new property formoptions (in colModel); thanks to Faserline Team
The purpose of these options is to reorder the elements in the form and to add
some information before and after the editing element.
formoptions : {
label: value
If you go to use this object in collModel it is recommended that all editing
fields use this property and with at least the rowpos and colpos set.
Elemprefix: if set, a text or html content appears before the input element
Elemsuffix: if set, a text or html content appears after the input element
Label: if set, this replace the name from colNames array that appears as label
in the form.
rowpos : number determines the row position of the element (again with the
text-label) in the form; the count begins from 1
colpos : number determines the column position of the element (again with the
label) in the form beginning from 1
Two elements can have equal row position, but different column position. This
will place the two elements in one row on the form.
=========== delete=================================
In the delGridRow method the following options are no longer used
closeicon: 'ico-close.gif',
imgpath: '',
============= view =============================
Added viewGridRow method; thanks to Faserline Team (
This method is similar to the editGridRow method except that the fields are not
editable and we do not have any events attached to the form. Here are the
options viewGridRow (options) where
options = {
top : 0,
left: 0,
width: 0,
height: 0,
modal: false,
drag: true,
closeOnEscape : false,
labelswidth: '30%'
All the options have the same thing as these in editGridRow except the option
labelswidth which default value is 30%. Since we construct the view with table
element it is difficult to calculate, in this case, how much width is needed for
the labels. Depending on the needs this value can be increased or decreased
Custom method
In the custom module is added new method filterToolbar.
This method is the same as filterGrid, except that the search input elements are
placed in the grid just below the header elements. When the header elements are
resized the input search elements are also resized according to the new width.
Another difference to the filterGrid is that the filter toolbar uses definitions
from colModel just like the searchGrid
Should be called like this
where options are
options = {
autosearch: true,
beforeSearch: null,
afterSearch: null,
beforeClear: null,
afterClear: null,
searchurl : ''
autosearch: true Search is performed according to the following rules For text
element when a Enter key is pressed while inputting values a search is
performed. For select element when the value changes.
beforeSearch - event which fires before a search
afterSearch - event which fires after a search
beforeClear - event which fires before clearing entered values (i.e.,
clearToolbar is activated)
afterClear - event which fires after clearing entered values (i.e., clearToolbar
is activated)
The rules of creating toolbar search input elements are the same as searchGrid
using the colModel
searchoptions : {
dataUrl : value,
dataInit: function,
dataEvents : array,
defaultValue: value,
attr: object
Note the missing sopt element, but addition of defaultValue property
This method has 3 new additional methods that can be used:
triggerToolbar - when called perform a search dynamically
clearToolbar - when called clear the search values and set the default one if
toggleToolbar - toggles the searchbar
A typical call to these methods
var sgrid = $("#mygrid")[0] sgrid.triggerToolbar();
will trigger the search of mygrid.
Import module
added option importComplete event which fires after constructing the grid.
Inline edit
added afterrestorefunc as 9th parameter. The event fires after the row is
the tree icons can be changed using the following grid parameter treeIcons. The
default values are.
treeIcons ={
Note that icons from UI Theme should be used.
- the source format for date formatter (srcformat) now can accept month names
- it is possible to enable checkboxes as editable when created with formatter In
the format options we should in this case checkbox : {disabled:false} The
default is false. To enable this option globally you can change this value in
the language file
- the showLink now can accept custom name for the id The parameter is idName :
'id' The default is id. Can be changed in formatoptions or in the language
Something went wrong with that request. Please try again.