======
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
i18nfolder 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.jsorjquery.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
afterInsertRowinstead ofcellatrandrowattr(which is very ineffective) in old projects one will have to need to specifygridview: trueexplicitly. - autoencode: false are used now instead of
autoencode: falseused before. It corresponds to rendering on the client side. The old defaultautoencode: falsecombined 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
150before. It improves the visibility of small grids or the grids having small number of rows. NoscrollOffset: 0are 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: 20will be changed to 10000 (the value of the newmaxRowNumproperty) if no pager exists in jqGrid (nopagerandtoppager: trueoption are used) or if one uses jqGrid option which switches off the pagination (liketreeGrid: true). New jqGrid optionmaxRowNumcan 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: trueproperty 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: truejqGrid option to autoresize all columns havingautoResizable: trueproperty directly after loading/sorting/paging of the grid. - one can specify the alignment of the column headers. See below the description of
labelAlignandlabelClassesproperties ofcolModel. - CSS of jqGrid is changed to simplify integration of jqGrid in projects which uses frameworks other as jQuery UI, for example Bootstrap.
jsonmapproperty ofcolModelcan be used now withdatatype: "local". The only exception is the existence of non-emptydataTypeOrgjqGrid 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 usejsonmapproperty 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 ofsetGridParamto resetdatatypeto original value are more required (like described in the old answer).- including of English localization file
grid.locale-en.jsis not more required for successful working of jqGrid.
- new
lastSelectedDataoption with sorted and filtereddatacan be used. See the old answer for details. No "subclassing" of internal$.jgrid.frommethod are required more. The name of the internal optionlastSelectedare changed tolastSelectedData. - new
widthOrgoption saves the value ofwidthduring creating of the grid. It will be used internally mostly to detect the case when jqGrid was created without specifying of anywidthexplicitly. It will be interpreted so, that the width of the grid could be adjusted on other changes of the width of the columns. - new
dataTypeOrgoption 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
doubleClickSensitivityoption with the default value250specify 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
autoresizeOnLoadoption used in combination withautoResizable: trueproperty ofcolModel. IfautoresizeOnLoad: trueoption are used then jqGrid make auto-resizing of all columns havingautoResizable: trueproperty direct afterloadComplete. - new
autoResizingoption is map of properties likegroupingViewused 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"incolModelto 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. autoResizablewhich 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 headerautoResizingOptionproperty is an object likeeditoptions,searchoptionsorformatoptions. It can be used to change some commonautoResizinggrid options to another value which is specific for the column only. The properties ofautoResizingOption:minColWidth,maxColWidth,compact.labelAlignproperty with "left", "center" (default), "right" and "likeData" values,labelClassesproperty 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: trueproperty - 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.resizeDblClickcallback andjqGridResizeDblClickevent 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: trueproperty are defined incolModel. It allows to implement some custom action on double-click on the column resizer. Returningfalseor"stop"value fromresizeDblClickcallback orjqGridResizeDblClickevent in case ofautoResizable: trueproperty set in the column will prevent resizing on the column by calling ofautoResizeColumn.
- ... to be included soon
- files from
i18nare 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
getGridParamwithout additional parameter to get the reference to object with all jqGrid options:var p = $("#grid").jqGrid("gerGridParam");for example. One can use thep.rowNumto accessrowNumoption. The usage of$("#grid").jqGrid("gerGridParam", "rowNum")will be supported too, but the usage of$("#grid")[0].p.rowNumcould 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
lastSelectedDataoption 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: falseoption andwidth: 518instead. - 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
labelAlignandlabelClassesproperties ofcolModel.