======
jqGrid is a popular jQuery Plugin for displaying and editing data in tabular form. It has some other more sophisticated features, like subgrids, TreeGrids, grouping and so on.
jqGrid was developed mostly by Tony Tomov in the past and it was available under MIT/GPL-licences till the version 4.7.0 published Dec 8, 2014 (see here). Short time after that the license agreement was changed (see here) and new 4.7.1 version was published.
The code from the GitHib repository is the fork of jqGrid 4.7.0 - the latest version available under MIT/GPL-licences. It will be provided under MIT/GPL-licences.
Below you can find short description of new features already implemented in the fork.
- the default values of some option of jqGrid are changed (see detailed description below).
- some changes in "local files" from
i18n
folder are made. One should used the files included in the fork and not combine old "local files" of jqGrid 4.7.0 with newjquery.jqGrid.min.js
orjquery.jqGrid.src.js
.
- Auto-adjustment of the width on columns based on the content of data in the column and the column headers.
- gridview: true are used now. It improves performance of rendering of the grid. In case of usage
afterInsertRow
instead ofcellatr
androwattr
(which is very ineffective) in old projects one will have to need to specifygridview: true
explicitly. - autoencode: false are used now instead of
autoencode: false
used before. It corresponds to rendering on the client side. The old defaultautoencode: false
combined with JSON data loaded from the server or local data loaded from the object produces sometimes to strange side effects if the data contains symbols&
,;
,>
and other used in HTML markup. - height: "auto" are used now instead of
150
before. It improves the visibility of small grids or the grids having small number of rows. NoscrollOffset: 0
are required to remove unneeded free space which one sees on some grids which have no vertical scrollbar. - dynamic default value is used now for
rowNum
. The default valuerowNum: 20
will be changed to 10000 (the value of the newmaxRowNum
property) if no pager exists in jqGrid (nopager
andtoppager: true
option are used) or if one uses jqGrid option which switches off the pagination (liketreeGrid: true
). New jqGrid optionmaxRowNum
can be used to change the maximal value of rows displayed in the grid from 10000 default to another value. - datatype: "local" are use now instead of datatype: "xml" used before. If one uses
"xml"
input data then one should add datatype: "xml" option which explicitly specify the type of data. - editurl: "clientArray" are use now instead of editurl: null used before. It allows to use local editing without minimal additional efforts and the requirement to have any server part implemented.
- cellsubmit: "clientArray" are use now instead of cellsubmit: "remote" used before.
The most the changes corresponds the tendency of web development last years. Local JavaScript data and JSON data loaded from the server (especially in combination with loadonce: true
) are used now much more frequently. The data
- support of auto-adjustment of the column width based on the content of data in the column and the content of the column header. To use the feature one should specify
autoResizable: true
property in the column (one can usecmTemplate: {autoResizable: true}
to set the property for all columns). After that the usage of double-click in the resizer (in the column header close to vertical line between columns) the width of the column will be adjusted. One can useautoresizeOnLoad: true
jqGrid option to autoresize all columns havingautoResizable: true
property directly after loading/sorting/paging of the grid. - one can specify the alignment of the column headers. See below the description of
labelAlign
andlabelClasses
properties ofcolModel
. - CSS of jqGrid is changed to simplify integration of jqGrid in projects which uses frameworks other as jQuery UI, for example Bootstrap.
jsonmap
property ofcolModel
can be used now withdatatype: "local"
. The only exception is the existence of non-emptydataTypeOrg
jqGrid option. The option will be set automatically after loading the data from the server and changingdatatype: "json"
anddatatype: "xml"
todatatype: "local"
. The option allows to usejsonmap
property for the data loading from the server and skip the property in later processing of the local data..trigger("reloadGrid")
will reload the data from the server automatically in case of the usage remotedatatype
("json"
and"xml"
) together withloadonce: true
. No additional call ofsetGridParam
to resetdatatype
to original value are more required (like described in the old answer).- including of English localization file
grid.locale-en.js
is not more required for successful working of jqGrid.
- new
lastSelectedData
option with sorted and filtereddata
can be used. See the old answer for details. No "subclassing" of internal$.jgrid.from
method are required more. The name of the internal optionlastSelected
are changed tolastSelectedData
. - new
widthOrg
option saves the value ofwidth
during creating of the grid. It will be used internally mostly to detect the case when jqGrid was created without specifying of anywidth
explicitly. It will be interpreted so, that the width of the grid could be adjusted on other changes of the width of the columns. - new
dataTypeOrg
option will be used internally in case of the usage remotedatatype
("json"
and"xml"
) together withloadonce: true
. The option will be deleted by.trigger("reloadGrid")
. - new
doubleClickSensitivity
option with the default value250
specify the time in ms. The resizer will stay visible at least the time after the first click. In the time the user can makes the second click and the double-click on the resizer could be detect. - new
autoresizeOnLoad
option used in combination withautoResizable: true
property ofcolModel
. IfautoresizeOnLoad: true
option are used then jqGrid make auto-resizing of all columns havingautoResizable: true
property direct afterloadComplete
. - new
autoResizing
option is map of properties likegroupingView
used in grouping. It allows to tune some behaviour of auto-resizing.- compact - default value
false
. Means the usage of compact calculation of the width of the column header without reservation of the place of sorting icons - widthOfVisiblePartOfSortIcon: default value 12. Should be used only if one replaces the default jQuery UI icons to another icons.
- minColWidth: 33 - minimal width of column after resizing
- maxColWidth: 300 - maximal width of column after resizing
- wrapperClassName: "ui-jqgrid-cell-wrapper" - the name of the class assign to
<span>
included in every cell of the grid - adjustGridWidth: true - means that the width of the grid need be adjusted after resizing of the column
- fixWidthOnShrink: false - fill be removed later. It will be not included in the release
- compact - default value
- one can use
template: "integer"
,template: "number"
,template: "actions"
incolModel
to simplify the usage offormatter: "integer"
,formatter: "number"
andformatter: "actions"
incolModel
. The list of the standard templates will be extended in the next versions. One can use$.extend(true, $.jgrid.cmTemplate, { myDataTemplate: {...}}
to define custom column templates which can be used liketemplate: "myDataTemplate"
incolModel
. See the post and the old answer for more information about column templates. autoResizable
which will be used for auto-adjustment of the column width based on the content of data in the column and the content of the column headerautoResizingOption
property is an object likeeditoptions
,searchoptions
orformatoptions
. It can be used to change some commonautoResizing
grid options to another value which is specific for the column only. The properties ofautoResizingOption
:minColWidth
,maxColWidth
,compact
.labelAlign
property with "left", "center" (default), "right" and "likeData" values,labelClasses
property allows to add CSS class to the column header.
- setColWidth - allows to change the width of the column after the grid is created.
- autoResizeColumn - has no parameters. It resize of all columns having
autoResizable: true
property - getGridComponent - allows to get different components of jqGrid like . The method will be extended later.
fatalError
- new callback which can be used to change displaying of critical error with respect of another function as default JvaScript function alert. One can use the feature in unit tests for example.resizeDblClick
callback andjqGridResizeDblClick
event will be called on the double-click on the column resizer. It's important to stress that the callbacks will be called even if noautoResizable: true
property are defined incolModel
. It allows to implement some custom action on double-click on the column resizer. Returningfalse
or"stop"
value fromresizeDblClick
callback orjqGridResizeDblClick
event in case ofautoResizable: true
property set in the column will prevent resizing on the column by calling ofautoResizeColumn
.
- ... to be included soon
- files from
i18n
are changes to UTF-8 format. The texts should be always used as Unicode characters if the corresponding characters are visible. Compare for example grid.locale-ja.js with the corresponding file included in jqGrid 4.7.0 (see here). - jqGrid display the alert message now if some additional fatal error will be detected. For example if one don't included
- some common properties which have no relation to the language are moved to
- we recommend to use
getGridParam
without additional parameter to get the reference to object with all jqGrid options:var p = $("#grid").jqGrid("gerGridParam");
for example. One can use thep.rowNum
to accessrowNum
option. The usage of$("#grid").jqGrid("gerGridParam", "rowNum")
will be supported too, but the usage of$("#grid")[0].p.rowNum
could be not work in some of the future version, because the place of the option could be changed in the future.
- GetFilteredData - demonstrates how to use new
lastSelectedData
option which returns, in contrast todata
, filtered and sorted data items from all pages of jqGrid. Try to set some filter in the demo, make sorting by some column and set the page size to 2 for example. Click the button above the grid and see the displayed results. - autoResizing - demonstrates the default behaviour of auto-resizing feature. Double-click on the column resizer (in the header close to the right border which divides the columns). You will see the default behaviour of column resizing.
- autoResizingCompact - demonstrates the default behaviour of auto-resizing feature. Double-click on the column resizer (in the header close to the right border which divides the columns). You will see the behaviour of column resizing in case of usage
autoResizing: { compact: true }
. - autoResizingWithShrinkCompact - modification of the previous demo. It uses no
shrinkToFit: false
option andwidth: 518
instead. - autoresizeOnLoad - demonstrates auto-resizing on loading. Try to use sorting, paging the grid, and see the results.
- autoresizeOnLoadCompact - the same demo as before (auto-resizing on loading), but with the usage of
autoResizing: { compact: true }
additionally. - autoResizingPerformane1000 - the demo create the grid with 1000 rows. By double-click on resizer you can see the performance of resizing for relatively large number of rows.
- alignLabel - demonstrates the usage of new
labelAlign
andlabelClasses
properties ofcolModel
.