Home > jQuery > Guriddo jqGrid JavaScript 5.0 is released

Guriddo jqGrid JavaScript 5.0 is released

August 3rd, 2015 Leave a comment Go to comments

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" ---------------------------------------------------------------------------- -->

Tags:
  1. qianhong zhang
    October 19th, 2015 at 05:34 | #1

    .form-control{
    display: block;

    }

    Can cause

    Page of 1

    In IE 11 wrap

    Such as

    Page 1
    of 10 “

  2. qianhong zhang
    October 20th, 2015 at 11:40 | #2

    createData
    ……
    $(trdata).append(tmpl);
    trdata[0].rp = rp;
    ……

    Form edit in the order of the field may not be the same as the list

    How to do?

  3. October 20th, 2015 at 12:18 | #3

    Hello,

    Can you please post a simple test case including all the files and data.
    A link toy the problem will be fine too.

    Thank you.

    Kind Regards

  4. October 20th, 2015 at 12:19 | #4

    Hello,

    I’m not sure that I undestand the problem.

    Kind Regards

  5. qianhong zhang
    October 23rd, 2015 at 08:24 | #5

    use jqgrid for Bootstrap In IE 11

    display wrap

    Page
    of
    50,000

  6. qianhong zhang
    October 23rd, 2015 at 08:42 | #6

    Form edit/view in the order of the field may not be the same as the list.

    colModel:[
    {name:’id’, index:’id’, hidden:true,key:true,viewable:false},
    {name:’yhm’, index:’yhm’},
    {name:’yhkl’, index:’yhkl’},
    {name:’enabled’, index:’enabled’},
    {name:’accountNonLocked’, index:’accountNonLocked’,},
    {name:’zcTime’, index:’zcTime’},
    {name:’slTime’, index:’slTime’}]
    ……

    $(this).setColProp(‘yhm’,{formoptions:{rowpos:1,colpos:1}});
    $(this).setColProp(‘yhkl’,{formoptions:{rowpos:1,colpos:2}});
    $(this).setColProp(‘enabled’,{formoptions:{rowpos:3,colpos:1}});
    $(this).setColProp(‘accountNonLocked’,{formoptions:{rowpos:3,colpos:2}});
    $(this).setColProp(‘zcTime’,{formoptions:{rowpos:2,colpos:1}});
    $(this).setColProp(‘slTime’,{formoptions:{rowpos:2,colpos:2}});

  1. December 12th, 2018 at 16:01 | #1

Anti-spam: complete the taskWordPress CAPTCHA


Privacy Policy   Terms and Conditions   Contact Information