Home > jQuery > jQuery Grid 3.2

jQuery Grid 3.2

The long avaited version 3.2 of jqGrid is finally out. This version is a big step forward and is primarily a bug fix release. Again with this there are some very usefull features and methods. You can view the full list of what was fixed and what is new in the Documentation page. Also check the Examples Page to view the new methods and properties.

I’d also like to take this opportunity to welcome Reg Brehaut to the jqGrid development team. He provided valuable help in pulling this release together – contributing the entry documentation, bug fixes, and features. You can see the result of his hard work on the Documentation page. Welcome Reg and thank him for all his contributions!

Tags:
  1. pako
    July 15th, 2008 at 16:59 | #1

    Oh, yeah:) I’m first, reallly great job Tonny! Thanks a lot

  2. July 15th, 2008 at 21:41 | #2

    I was just talking about the gridComplete event yesterday, stating how that would make the grid even easier to test.

    Thanks!

  3. julizar
    July 16th, 2008 at 22:31 | #3

    Really great plugin, with great documentation, and great examples!
    May The Force Be With You!

  4. oscarml
    July 17th, 2008 at 18:31 | #4

    I can’t get the navButtonAdd working. I have no error using the method, so I assume I have correctly included the new js files.

    Here you can see my code (adding the button)

    $(“#email_grid”).navGrid(‘#toolbar1’,{edit:false,add:false,del:false}).navButtonAdd(‘#toolbar1’,{caption:”Edit”, onClickButton:function(){ var gsr = jQuery(“#email_grid”).getGridParam(‘selrow’); if(gsr){ jQuery(“#email_grid”).GridToForm(gsr,”#order”); } else { alert(“Please select Row”) } } });

  5. tony
    July 17th, 2008 at 18:37 | #5

    Please, what does not work? What do you expect and what is not working?
    Regards
    Tony

  6. oscarml
    July 17th, 2008 at 19:12 | #6

    Hi,

    Is it possible to use client validation in online editing?? Or is just possible in form editing.
    thanks

  7. oscarml
    July 17th, 2008 at 21:59 | #7

    Sorry for my post (4º). I didn’t explain anything, not even asking gently 🙁

    . I don´t use to do it, but I was desesperaaate hehe. Well, the problem is that I can´t see the custom buttons, neither FF or IE.

    The default one, which you put true or false, display ok.

    There’s no javascript error at all, so I suppose I added the new files properly. I have tried just with the caption of the button (just in case image path was wrong, but nothing happens).

    Tomorrow I will upload a demo with the code printed.

    Thanks guys

  8. Tom
    July 22nd, 2008 at 23:08 | #8

    I’m having a little problem running some test code against 3.2. I’m sending JSON output (via Django) to a simple grid. The “cell” specification seems to not work or is being ignored or something. In the following example data/grid options I get the “key” column populated, and the one “invdate” field I pulled out of the cell area, but no others. If I move data fields out of the cell area they are correctly processed, but anything in the cell area is ignored.

    Any ideas? Thanks in advance.

    Tom

    javascript:

    jQuery(document).ready(function(){
    jQuery(“#list”).jqGrid({
    url:’jqgrid_loadtable’,
    datatype: ‘json’,
    mtype: ‘GET’,
    colNames:[‘key’, ‘Inv No’,’Date’, ‘Amount’,’Tax’,’Total’,’Notes’],
    colModel: [
    {name:’pk’, index:’pk’, width:40, jsonmap:’pk’},
    {name:’invid’, index:’invid’, width:55, jsonmap:’invid’},
    {name:’invdate’, index:’invdate’, width:90, jsonmap:’invdate’},
    {name:’amount’, index:’amount’, width:80, align:’right’, jsonmap:’amount’},
    {name:’tax’, index:’tax’, width:80, align:’right’, jsonmap:’tax’},
    {name:’total’, index:’total’, width:80, align:’right’, jsonmap:’total’},
    {name:’note’, index:’note’, width:150, sortable:false, jsonmap:’note’} ],
    pager: jQuery(‘#pager’),
    jsonReader: {
    root: “rows”,
    id: “pk”,
    page: “page”,
    total: “total”,
    records: “records”,
    repeatitems: false,
    cell: “fields”,
    },
    rowNum:10,
    rowList:[10,20,30],
    sortname: ‘id’,
    sortorder: “asc”,
    viewrecords: true,
    imgpath: ‘/css/jqGrid/themes/basic/images’, // may need to …fix…
    caption: ‘My first grid’,
    });
    });

    —————————————-
    JSON data I’m sending:
    {“total”:1, “page”:1, “records”:3,
    “rows”:[{“pk”: “1”, “model”: “polls.invheader”, “invdate”: “2008-07-21 16:07:30”,
    “fields”: { “tax”: 33, “note”: “This is a note”, “amount”: 222, “client_id”: 111, “invid”: 100, “total”: 255}},
    {“pk”: “2”, “model”: “polls.invheader”,
    “fields”: {“invdate”: “2008-07-21 16:07:30”, “tax”: 33, “note”: “This is a note 2”, “amount”: 222, “client_id”: 111, “invid”: 101, “total”: 255}},
    {“pk”: “2”, “model”: “polls.invheader”,
    “fields”: {“invdate”: “2008-07-21 16:07:30”, “tax”: 33, “note”: “This is a note 2”, “amount”: 222, “client_id”: 111, “invid”: 101, “total”: 255}},
    {“pk”: “3”, “model”: “polls.invheader”,
    “fields”: {“invdate”: “2008-07-21 16:11:35”, “tax”: 1.23, “note”: “Last Note for Now”, “amount”: 55, “client_id”: 234, “invid”: 103, “total”: 56.23} }] }

  9. Tom
    July 23rd, 2008 at 02:48 | #9

    ref entry 8: Found the error and the fix – already documented in forum port entitled: “Errors discovered integrating it with Django” Note that the error is not Django specific, it is a parameter application error.

  10. jcamacho
    July 26th, 2008 at 20:47 | #10

    Nice job. I think continued development on this is quite reassuring. I’ve been fairly happy with the plugin so far and you are clearly targeting this to the server developer crowd like myself. Thanks.

    BTW, I was a bit peeved by some methods becoming obsolete rather than deprecated, but it wasn’t too painful to find and replace the various places where it was being used. Maybe next time, give it at least a release cycle where you use some type of warning mechanisms to give people time to switch to the new while the old is still there.

  11. July 26th, 2008 at 21:00 | #11

    Hello,.
    First of all I’m sorry for repeating the comment. please if you don’t mind remove the other comments on 1.0 & 3.0

    This is A vvv-nice plugin!
    its just the best grid I’ve ever seen..
    I just wanna thank you..

    and I wanted to ask you about something, i believe it is a bug..
    the bug is:
    jqGrid doesn’t work at all if the column’s count is greater than 16.
    By the way, it was tested on “JSON”.

    Can you help out with this please.. i have about 38 important columns.

    Thanks a lot.
    and sorry again.

  12. August 5th, 2008 at 14:31 | #12

    Hi,

    Thanks alot for the plugin.

    I am facing a problem while implementing a basic row editing sample.
    The code is taken from Row Editing > Basic sample from http://www.trirand.com/jqgrid/jqgrid.html

    The following is the error shown by firebug.

    jQuery(modwin).jqDrag is not a function
    DnRModal(“#alertmod”, “#alerthd”)grid.for…it-min.js (line 62)
    navGrid()()grid.for…it-min.js (line 46)
    e()jquery.js (line 11)
    e()jquery.js (line 11)
    navGrid()()grid.for…it-min.js (line 45)
    (?)()()jqGrid2.html (line 39)
    e()jquery.js (line 11)
    e()jquery.js (line 11)
    e()jquery.js (line 11)
    e()jquery.js (line 11)
    [Break on this error] jQuery(mw).css({top:p.top+”px”,left:p.le…offsetTop;}while(obj=obj.offsetParent);}

    I am using jqGrid version 3.2
    Used default setting for including script files and style sheets as shown below

    This problem is occurring when i am using the following function related to paging.

    .navGrid(“#prowed1”,{edit:false,add:false,del:false})

    please help.

  13. tony
    August 5th, 2008 at 16:59 | #13

    A good start first is to read the documentation
    Regards
    Tony

  14. August 10th, 2008 at 14:20 | #14

    Srinivas:

    You must include jqDnR.js and jqModal.js

  15. Oliver
    August 16th, 2008 at 17:21 | #15

    same problem as Srinivas
    I included jqDnR.js and jqModal.js but still the same “jQuery(modwin).jqDrag is not a function” error. I checked the (great) documentation but really can’t figure it out.
    any idea ?
    Thanks again for this great piece of software.

  16. Oliver
    August 16th, 2008 at 20:28 | #16

    problem solved, it was indeed an include issue. checking the forums helps too !

  17. Cyb
    August 18th, 2008 at 12:54 | #17

    Can you describe how you solve the problem, please.

  18. Cyb
    August 18th, 2008 at 13:23 | #18

    Ok, I’ve found it it was js/query.jqModal.js, but there is js/jqModal.js
    hm…..

  19. Miller
    August 19th, 2008 at 17:39 | #19

    Version 3.2 row striping is broken. Works fine in 3.1……

  20. Alessandro
    September 5th, 2008 at 07:26 | #20

    Hello

    By jqGrid Congratulations! It is simply fantastic.

    I am starting to use the jqGrid however, to be beginner, do not work properly.

    When the page is loaded, the data of the grid are not shown. Only after clicking the Refresh button is that the data of the grid are displayed.
    Someone I could explain what might be wrong? How can I fix this? I would like to data from grid to appear to load the page, as well as work for examples. PS. I am using json. Thank you very much!

  21. Alex
    September 7th, 2008 at 16:54 | #21

    Hello. Can anybody explain me how to run it?
    I’m getting jQuery(“#list4”).jqGrid is not a function.
    Here is my code:

    gridimgpath = ‘script/grid/themes/basic/images’;
    jQuery(document).ready(function(){
    == code from Array Data example ==
    });

  22. Alex
    September 7th, 2008 at 16:55 | #22

    Sorry. Tags were skipped.
    script src=”script/grid/jquery.js” type=”text/javascript”
    script src=”script/grid/jquery.jqGrid.js” type=”text/javascript”
    script src=”script/grid/js/jqModal.js” type=”text/javascript”
    script src=”script/grid/js/jqDnR.js” type=”text/javascript”

  23. September 7th, 2008 at 22:52 | #23

    Hello Tony,
    frankly speaking … JqGrid is most powerful web tool that i have seen since years.
    Thanks a lot for your clear examples. Very good documention (such a shame for little mistakes like <?php echo”<?xml … “<?x” is problematic for php… )
    but it is nothing …
    thanks a lot for this great tools…

    just little question : have you implement a timer to refresh the grid data and showing new entries ?
    not seen … but it could help to have this tool…

    stephane bourquin -from france-

  24. tony
    September 8th, 2008 at 11:54 | #24

    If you look into the forum, the simple way is

    var refreshgrid = setInterval(function() {
    $(‘#mygrid’).trigger(”reloadGrid”);
    }, 5000);

    This will refresh grid every 5 second

    Regards
    Tony

  25. renso
    September 10th, 2008 at 22:41 | #25

    In FireFox 2 (on xp) the Modaldialog windows shows up for edit, find, etc, but as soon as I click inside the popup window the window disappears. In IE7 I do not have this issue. Also as soon as I try and scroll through the rows inside the EDIT RECORD modal dialog the window closes. The same issue is found in Google Chrome and Safari.

  26. renso
    September 10th, 2008 at 22:47 | #26

    By the way, just to add to my issue above, I do not have this issue with your demo model in Firefox, etc.

  27. September 17th, 2008 at 17:32 | #27

    Very nice plugin and very useful. I seem to be having the same problem as Alessandro (#20). In Internet Explorer 7 after dumping all cookies/cache/form data and loading a fresh page using jqgrid I get nothing and a JS error…”object doesn’t support this property or method”.

    After clicking refresh everything works fine. I know this has to be an MS thing but I’m wondering if there is any possible work around. There is literally no reason for error and nothing in debug tools in firefox and other browsers. IE7 shows an error under the conditions specified and then no error.

  28. Renso
    September 18th, 2008 at 20:55 | #28

    Issue got resolved. I was pointing to the wrong jqModal.css file in the wrong folder. I made sure I had the downloaded version in the “basic” sub-folder and it worked just fine.

  29. Renso
    September 18th, 2008 at 20:58 | #29

    Adam, I had the same issue when I tried to dynamically load the data for the editoptions via a function call (editoptions:{value:countries}), turns out I had to add “async: false” to my ajax call to make sure it finishes getting my data from the server before rendering the jqGrid. Maybe you have the same issue.

  30. Tank
    October 2nd, 2008 at 06:49 | #30

    I have problem with grid.

    If width of table (data load json) larger than width of table ( default – user for th), it will make bug.

    Please help me.

  31. October 6th, 2008 at 20:05 | #31

    To solve the error: jQuery(modwin).jqDrag is not a function

    Do as instructed in the manual:
    If you plan to use the form editing module you should include jqModal.js, jqDnR.js and jqModal.css files in your html page.

  32. sandesh
    December 6th, 2008 at 13:17 | #32

    hi,
    really great job.

    but i have one doubt how to get row index of selected row

  33. Paul
    December 9th, 2008 at 16:55 | #33

    Impresive control, how could i implement a warning triangle or colour the row if an editted cell broke a business rule?
    e.g. picked units cell > ordered units cell

  34. Paul
    December 9th, 2008 at 16:57 | #34

    Can the grid handle a straight xml file with no configuration info? would it render with the element names etc?

    thanks for your help

  35. December 26th, 2008 at 19:48 | #35

    @renso
    did you ever get resolution on the dialog window closing with firefox?

  36. ganga
    January 5th, 2009 at 07:48 | #36

    please explain me how to search one grid to another form in jQgrid

  37. Josue
    February 5th, 2009 at 22:51 | #37

    Hi,

    I’m using jqGrid, but I have one issue. I setup the DataSource with a XML file, But I’m unable to see the data on IE7 because the data it doesn’t show. (on FireFox and Opera work fine). I don’t what’s happening, because the IE doesn’t throw me an error. Perhaps is the format of my XML file, maybe someone can help me.

    jqGrid excellent approach 🙂

    Josue.

  38. Josue
    February 5th, 2009 at 22:54 | #38

    BTW this is my file (Tracking of the post #37 )

    1
    1
    1

    13
    2007-10-06

    1234.00
    0.00
    1000.00

  39. tony
    February 6th, 2009 at 11:30 | #39

    @Josue
    You will never make this work in IE – also search how IE interpret local ajax request. More on this you can find on jQuery google group
    Regards
    Tony

  40. Koli
    February 9th, 2009 at 11:46 | #40

    Hi,

    I spent lot of time to built a working jqgrid, but all of my attempt
    were unsuccessful. 🙁

    I followed the documentation to install jqGrid. I made a directory (jqry)in my web server. (C:\AppServ\www\jqry). I copied all of the required files – mentioned in documentation – into this directory. (jquery.js, jquery.jqGrid.js, js dir and themes dir)

    My HTML code:

    jqGrid Test

    jQuery(document).ready(function(){

    jQuery(“#list4”).jqGrid({
    datatype: “local”,
    height: 250,
    colNames:[‘Inv No’,’Date’, ‘Client’, ‘Amount’,’Tax’,’Total’,’Notes’],
    colModel:[
    {name:’id’,index:’id’, width:60, sorttype:”int”},
    {name:’invdate’,index:’invdate’, width:90, sorttype:”date”},
    {name:’name’,index:’name’, width:100},
    {name:’amount’,index:’amount’, width:80, align:”right”,sorttype:”float”},
    {name:’tax’,index:’tax’, width:80, align:”right”,sorttype:”float”},
    {name:’total’,index:’total’, width:80,align:”right”,sorttype:”float”},
    {name:’note’,index:’note’, width:150, sortable:false}
    ],
    imgpath: “jqry/themes/basic/images”,
    multiselect: true,
    caption: “Manipulating Array Data”
    });
    var mydata = [
    {id:”1″,invdate:”2007-10-01″,name:”test”,note:”note”,amount:”200.00″,tax:”10.00″,total:”210.00″},
    {id:”2″,invdate:”2007-10-02″,name:”test2″,note:”note2″,amount:”300.00″,tax:”20.00″,total:”320.00″},
    {id:”3″,invdate:”2007-09-01″,name:”test3″,note:”note3″,amount:”400.00″,tax:”30.00″,total:”430.00″},
    {id:”4″,invdate:”2007-10-04″,name:”test”,note:”note”,amount:”200.00″,tax:”10.00″,total:”210.00″},
    {id:”5″,invdate:”2007-10-05″,name:”test2″,note:”note2″,amount:”300.00″,tax:”20.00″,total:”320.00″},
    {id:”6″,invdate:”2007-09-06″,name:”test3″,note:”note3″,amount:”400.00″,tax:”30.00″,total:”430.00″},
    {id:”7″,invdate:”2007-10-04″,name:”test”,note:”note”,amount:”200.00″,tax:”10.00″,total:”210.00″},
    {id:”8″,invdate:”2007-10-03″,name:”test2″,note:”note2″,amount:”300.00″,tax:”20.00″,total:”320.00″},
    {id:”9″,invdate:”2007-09-01″,name:”test3″,note:”note3″,amount:”400.00″,tax:”30.00″,total:”430.00″}
    ];

    for(var i=0;i<=mydata.length;i++)
    jQuery(“#list4”).addRowData(i+1,mydata[i]);

    });

    But nothing happend. Blank page and a message in staus bar (with an exclamation mark): Problem on the page or Ready.

    That would be wrong? Could anybody help me?

    Regards,

    Koli

  41. Chandrashekar Kollipara
    April 5th, 2009 at 15:58 | #41

    Simply superb I have absolutely beginners knowledge in Javascript and being a back end programmer got grid working in first shot. Thanks a lot and you guys are best in what you do, started customizing the grid
    Regards
    Chandra

  42. DInesh Kanojia
    June 24th, 2009 at 16:20 | #42

    HI Masters

    it is really a fabulous i have work on it , it really a good tool as compare to vs gridview ,
    i have a one issue can any one tell that while searching record if no record is found so how can address this to enduser with appropriate user message

    thanks in advance

    best regards,
    Dinesh

  43. tilo
    August 27th, 2009 at 21:56 | #43

    I fixed the issue of function not found by changing this line below to my correct path of my app in function jgGridInclude() of jquery.jqGrid.js.

    //var pathtojsfiles = “js/”; // need to be ajusted

  44. Gopi
    August 29th, 2009 at 16:52 | #44

    I am new to JqGrid. I have implemented the same in Spring + JSP. I am not able to see the content in my table. The table heading, captions are displaying correctly. No clients side error.

    Will u pls some one help me to resolve this issue…

  45. Gopi
    August 29th, 2009 at 17:06 | #45

    My Spring + JSP code here…

    From controller i will be passing the “routers” and “pageinfo” model to my jsp.

    My building xml (dp_latestevents.jsp) page is :

    <% java.util.List rows = (java.util.List) request.getAttribute(“routers”);
    for (Router row : rows) {
    %>
    <row id="”>

    summary_disc_router.jsp:

    jqGrid Demo

    jQuery(document).ready (function() {
    jQuery(“#list”).jqGrid( {
    url:’../common/dp_latestevents.htm’,
    datatype: ‘xml’,
    mtype: ‘GET’,
    colNames:[‘Device Id’,’Device Name’, ‘Ip Address’,’Ro Community’],
    colModel :[
    {name:’deviceId’, index:’deviceId’, width:100},
    {name:’deviceName’, index:’deviceName’, width:150},
    {name:’ipAddress’, index:’ipAddress’, width:100, align:’right’},
    {name:’roCommunity’, index:’roCommunity’, width:120, align:’right’}
    ],
    pager: jQuery(‘#pager’),
    rowNum:10,
    rowList:[10,20,30],
    sortname: ‘deviceId’,
    sortorder: “desc”,
    viewrecords: true,
    imgpath: ‘../gui/jquery/themes/basic/images’,
    caption: ‘My first grid’
    });
    });

    when i access the xml content from URL (../common/dp_latestevents.htm):


    1
    2
    11

    5
    cmm-2600-02
    126.1.26.23
    public


    6
    cmm-2611-01
    126.1.25.22
    public


    2
    cmm-6503-c2.cisco.com
    126.1.5.14
    public


    4
    cmm-6504-c4
    126.1.8.16
    public


    10
    cmm-6506-c1.dns-sj.cisco.com
    172.20.111.200
    public


    8
    cmm-6506-c3.dns-sj.cisco.com
    126.1.7.15
    public


    11
    cmm-7206-sd1
    126.1.2.11
    public


    7
    cmm-7604-d1.dns-sj.cisco.com
    126.1.12.17
    public


    9
    cmm-7604-d2.dns-sj.cisco.com
    126.1.16.18
    public


    3
    cmm-7604-sd2.dns-sj.cisco.com
    126.1.4.12
    public


    1
    cmm-gsr
    126.1.17.19
    public

    I am able to get the XML content. But not able to see the content in my grid…

    Will you pls help me some one….

  46. Joe
    September 30th, 2009 at 15:48 | #46

    Did you ever find a question to your problem? I have the same problem.

    Adam :Very nice plugin and very useful. I seem to be having the same problem as Alessandro (#20). In Internet Explorer 7 after dumping all cookies/cache/form data and loading a fresh page using jqgrid I get nothing and a JS error…”object doesn’t support this property or method”.
    After clicking refresh everything works fine. I know this has to be an MS thing but I’m wondering if there is any possible work around. There is literally no reason for error and nothing in debug tools in firefox and other browsers. IE7 shows an error under the conditions specified and then no error.

  47. November 5th, 2010 at 01:08 | #47

    Not sure if you guys are still reviewing this code, if not what a waste, excellent code you have here. anyways Ive been implementing the grid using PHP POS which uses jquery 1.2.6 kind of old but the rest of the ajax in there needs it so anyways. my question is, I can show the grid I get the info I need but each time a mouse over I get an error stating “b(d.target).closest is not a function” not sure if it has to do with the jquery or if something screwy is up in my jquery.jqGrid.min.js. thax for the help!

  48. levin
    July 15th, 2011 at 10:58 | #48

    hai all,
    Can i get some simple jquery multiselect grid.

  49. Mubashar Latif
    February 14th, 2012 at 10:43 | #49

    I am using jquery grid and getting error “aw snap something went wrong while displaying this webpage” in google chrome. Its working fine in other browsers. Please help me to solve this problem.

  50. Ramesh
    February 16th, 2012 at 16:24 | #50

    Can some please tell me how use jqgrid with jsp. I want to send an xml file to my jsp and within the jsp use jqgrid to render the table with data from my xml

Comment pages
1 2 19
  1. No trackbacks yet.

Privacy Policy   Terms and Conditions   Contact Information