jQuery Grid Plugin – jqGrid

Hello All,

We are pleased to announce the new Guriddo jqGrid 5.0 release. This release is a cornerstone in our job. We plan great new features and improvements in the future like Node.js port, JavaScript exporting to PDF and much more.

In addition to adding native Bootstrap support to the grid, we’ve also added a lot of improvements to our pivot and tree grid features, improved support for the latest jQuery releases (2.1.x), intensive tests with jQuery 3.0 future release, provided better experience for mobile users adding a responsive option and fixed more than 20 bugs. Here are the highlights:

Native Boostrap Support

As of version 5.0 Guriddo jqGrid can be adapted easy with any CSS framework. We have develoed a Bootstrap port. To use the feature you will need only to include the appropriate CSS

...
<link rel="stylesheet" type="text/css" media="screen" href="path_to_css_files/ui.jqgrid-bootstrap.css" />
...


file and tell jqGrid to use Bootstrap – with the option:


$("#grid").jqGrid( {
...
styleUI : "Bootstrap",
...
});

Except Column Chooser and re sizing the grid with a mouse we support all the jqGrid existing features.

You can enjoy the Guriddo jqGrid Bootstrap Demo

Independent CSS Styling

We have changed our code so that jqGrid can be developed with any CSS framework. This can be achieved with a setting of the styleUI object to use the appropriate classes. The full description will be added into the documentation.

Responsive Grid
We have added a responsive options which make the grid a really responsive.
With this options the grid is re sized automatically when the device is rotated and the windows width is changed. Another useful feature is auto calculating the the space of the navGrid buttons – if the space does not fith the grid width we create a drop dawn menu button where all actions are inserted.

TreeGrid

We added new events and a method called reloadNode. With this method is possible to reload only certain node data and put it into the treeGrid instead of reloading the entrie treeGrid which in some situations consume a lot of time.

The code below reloaded only the added or edited node (Form editing module)

...
var reloadnode = function (rowid, rowdata, rowobject)
{
var id = $("#tree").jqGrid('getGridParam','selrow');
if(id) { // if add a root do not reload
var record = $("#tree").jqGrid('getLocalRow',id);
$("#tree").jqGrid('reloadNode', record);
}
}

$("#grid").jqGrid("navGrid",
{...},
{ "afterComplete" : reloadnode, "reloadAfterSubmit" : false, "closeAfterSubmit" :true}, //add
{ "afterComplete" : reloadnode, "reloadAfterSubmit" : false, "closeAfterSubmit" :true}, //edit
...
);


PivotGrid
Fixed a lot of Bugs related to showing the labels and groupig.

Full list of changes us a URI ENCODED, comma separated list of tags. For example to tag with 'ASP.NET MVC', 'dependency injection', 'DI' and 'TDD': data-tags="ASP.NET%20MVC%2cdependency%20injection%2cDI%2cIOC%2cTDD" ---------------------------------------------------------------------------- -->