Home > jQuery > jQuery Grid 3.0 rc

jQuery Grid 3.0 rc

October 7th, 2007

At end 3.0 (rc) version of jqGrid is out. This version is a major release, because I have totally rewrite the code for the methods without affecting the behavior of the plugin.
The grid is now compatible with jQuery 1.2.1, but in the example page I use 1.1.4 version of jQuery. The problem is that with 1.2.1 jqGrid has a little slowly behavior. I do not know why?
The example page is totally rewritten. Every example has a separate code for html and javascript. You can view this here.

This version fixes a lot of bugs relating to json data, formating, xml manipulation and add following features.

  • The user can now manipulate the number of requested pages. This is done with adding a input box in the pager.
  • I have added 4 methods – add, update, delete get row data. With these method we can manipulate the data at client side and of course a possibility to add local array data. See documentation for more information.
  • Added is a method to load data only once from the server – loadonce flag in settings. After loading data we do all the manipulation at client side – sorting, scrolling ant etc. Note that in this case pager is disabled.
  • Added is a new data type – local (against with xml and json). When this flag is set the grid expect data to be loaded locally via array.
  • Now we can multi select rows. This can be done with only one flag multiselect. This feature can be used with server and local array data.
  • For first time I introduce a sub grid. This feature can work only with xml data for now. The code and style for sub grid must be optimized and should be used with json too. See example page for more details.
  • It is possible now to export the grid data to xml and json format. This is done with two new methods.
  • A few new methods are added according to the new features – see documentation page for this.
  • New theme of course
  1. RomanovAS
    December 29th, 2007 at 17:45 | #1

    Thank you, Tony!

    Whether it is possible to draw a conclusion of data from MySQL, but the usual table, that it was possible to make the reference to editing to other file in the next cell of the table, for example:

    Sorry, but I cant attach normal code. I shall try to make it having replaced in a code Edit[//a]



    ???? And how? Please help! Very need! Sorry for spam, please!

  2. RomanovAS
    December 29th, 2007 at 17:49 | #2

    Thank you, Tony!

    Whether it is possible to draw a conclusion of data from MySQL, but the usual table, that it was possible to make the reference to editing to other file in the next cell of the table, for example:

    Sorry, but I cant attach normal code. I shall try to make it having replaced in a code Edit[//a]



    ???? And how? Please help! Very need!

  3. RomanovAS
    December 29th, 2007 at 17:55 | #3

    Tony, sory for this spam. But I need some help. Can I send my code to your e-mail? In advanced thanks.

  4. December 30th, 2007 at 11:22 | #4


    You can write e-mail to: tony at trirand dot com


  5. ljweko
    December 30th, 2007 at 15:07 | #5

    Really nice plugin Tony. Following are some observations.

    1. In createEl and el is checkbox, due to bug in IE I added elem.defaultChecked = true; after elem.checked = true; see: http://channel9.msdn.com/wiki/ default.aspx/Channel9.InternetExplorerProgrammingBugs under Dynamic Checkboxes Unchecked.

    2. In saveRow and edittype is checkbox, old value is posted to server (new is shown on browser). Somwhere around line 305 I added:

    if( $t.p.colModel[i].hidden===true) tmp[nm] = $(this).html();
    else if( $t.p.colModel[i].edittype===’checkbox’) tmp[nm]= $(“input”,this).attr(“checked”) ? 1 : 0
    else tmp[nm ….

    3. IMO, callback in editRow is useless as is called at the end of editRow() function, so it can be called by appli program after editRow with the same effect, if needed. However, after the end of user edit process there should be a callback, so I defined onEditDone(success, rowId) public member, which is called at the start of saveRow() and restoreRow() functions.

    4. I integrated colorpicker to jqGrid. I use two columns, one hidden, editable / not editable to hold hex color value and another not editable, where the backgroud is changed according to user selection. When the edit is done by the user the onEditDone (see 3) is fired to repair value of first column (if edit succeeded) or restore backgroud color, if edit failed. Problem arouse when posting value of the first (hidden) column to server. Column one should be hidden. If editable, its value is spoiled by saveRow function, if not editable its value is not sent to server at all. I added condition && !$t.p.colModel[i].hidden in two if statements around lines 320 and 365 (where you check if subgrid etc..), so the value of column is changed when editable but not hidden, much the same as hidden form input when submitting form.

    Anyway, wonderful plugin and HNY 2008.

  6. January 3rd, 2008 at 19:40 | #6


    Happy New 2008!

    Thank you for the comments and corrections.
    As for 1. and 2. and 4. I will add these corrections in the last revision. Thank ‘s.

    As for 3. I will think, maybe it is better that editRow will return true if editing is success and false otherwise – in this case this callback is not needed.
    Always thank you

  7. ljweko
    January 12th, 2008 at 19:41 | #7

    In fact there are two callbacks needed.

    First to perform client side verification. onEditDone(success, rowID) can do that.
    Second after server side verification (when Ajax done), one can name it onSaveDone(success, response), jqGrid allready has it under different name, but not publicly accessible.

  8. January 30th, 2008 at 20:20 | #8

    Hi there!

    Im amazed for the capabilities of your script. Awesome!

    But I cant integrate it, I just dont know how to… Could you help me? I want to use the Bigset but I’ve tried, I cant get it.

    Please, help

  9. January 31st, 2008 at 18:42 | #9

    Hi there! … again.

    I’ve did it!

    Its amazing, dude. Congrats, but there’is something I need to and I cant:

    I’ve created a select input, but when the query is sent, the select value isn’t queried.

    I’ve modified the bigset.js adding the variable to the url in get method, but the grid stops and no data is loaded after.

    How could I integrate the select input to work with the script and with autoseach?

  10. tony
    February 1st, 2008 at 15:53 | #10

    Maybe you should use onchange event. Something like this:

    <select name="cars" onchange="searchme(this.value)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>

    The Javascript
    function searchme(svalue)
    if (svalue)


  11. windywany
    February 3rd, 2008 at 05:55 | #11

    two tables are bad ! layout is not in control!

  12. Tony
    February 5th, 2008 at 19:40 | #12

    windywany ,

    Could You please give me a example. What is not in control?


  13. HSDell
    February 6th, 2008 at 20:10 | #13

    Great plug-in!

    I can’t get the save row working on pressing Enter as with Row Editing Using Callback example. Server script does not get called and row stays selected. Any suggestions for where to look?



  14. Tony
    February 6th, 2008 at 20:46 | #14
  15. HSDell
    February 7th, 2008 at 02:11 | #15

    Hi Tony,

    Thanks, for the help. I was not getting data from $_POST correctly, now it works.


  16. Antonio
    February 23rd, 2008 at 20:35 | #16

    I don’t know the colNames before I get the data from the server.
    How an I use the plugin instead of this:

    jQuery(“#list2”).jqGrid({ url:’server.php?q=2&nd=’+new Date().getTime(), datatype: “json”, colNames:[‘Inv No’,’Date’, ‘Client’, ‘Amount’,’Tax’,’Total’,’Notes’], colModel:[


  17. tony
    February 25th, 2008 at 11:29 | #17

    Hi Antonio,
    Currently this is not possible. The upcoming release will give you the possibility to write your own extension to do that.
    One possible solution is:
    Write your own ajax call to obtain the names, before constructing the grid and fill the colNames array with this values.
    The very important note here is that this ajax call should be with option async:false.


  18. Alan Rowe
    February 25th, 2008 at 11:53 | #18

    Hi there, still loving jqgrid! So thanks for that. My question is: is it possible to display images from a field containing image source urls? e.g. a field called image may contain data such as http://www.somesite.com/images/someimage.jpg or maybe just someimage.jpg with a default local image path.

    Any help would be gratefully appreciated.

  19. Tony
    February 25th, 2008 at 12:24 | #19

    hi tony, very impressed with jqGrid! One bug i have found in testing: the custom multi select does not work in safari v3.0.4. Cheers, tony

  20. Tony
    February 25th, 2008 at 12:25 | #20

    If you set direct in the cell http://somesite/someimage.jpg this will not work,
    but if you set

    < img src=http://somesite/somepic.jpg >

    this will work

  21. February 27th, 2008 at 22:39 | #21

    Hi Tony.. congratulation.. your plugin is amazing!!!

    I have a question to you..

    I realized that in the method delRowData, i can remove row by id, that’s the same i passed in json data.

    But i can´t show id on dataGrid, and i need to manipulate data. Do you know how can i do???



  22. February 28th, 2008 at 10:45 | #22

    Hi Tony!
    Super plugin!
    I’m currently customizing it for one of the projects i work on.
    I have lots of suggestions for you, mainly concerning the behaveiour of the grid, adding more flexibility, autowidth, autoheight, resizing the whole grid by mouse drag, etc :D. I’ll come back to my suggestions later, when I’m done customizing :)

    But for now I have a question: In the jqGrid 2.0rc release you mentioned you would add a ‘setWidth’ method to dynamically adjust the width of the grid.
    Is it possible to do that now? I haven’t seen the ‘setWidth’ method.
    If not, maybe you could suggest me what methods to use to achieve this functionality. I’ll be glad to share the code afterwards.

    I wrapped the whole grid in a resizable div (jQuery.interface) and I’m trying to get the grid to resize along with this wrapper div. I found that by adding ‘height:false’ it automatically adjusts to the divs height (though the pager is outside the div), Now i would like to also adjust the width of the grid. Interface resizeble has an ‘onResize’ handler so all i need to do is call the ‘jqGrid.setWidth’ method, when it will exist… :)

    PS: My first sugestion would be for you to wrap the whole grid in a wrapper div. :)

    PS2: I’ve followed the development of jqGrid from start. Super work! It became very fast the (probably) most complete grid solution for jQuery. Nice work!

  23. Tony
    February 29th, 2008 at 12:06 | #23

    Just add the Id in colModel – that is all :)

    Thank you very much for the suggestions. All of them are very reasonable. The final release is ready and soon will be published. The very good news are that the grid is now modular – divided in modules and you can write your own extensions. :)
    About the width – If you do not known there is a option width with which you can ajust the width of the grid. More over there is additional option shrikToFit.

  24. LK
    March 1st, 2008 at 13:24 | #24


    Nice work!
    With xml everything is working well but with php and mysql I get a error.
    Searched the internet but couldn’t find a solution.
    Couldn t execute query.You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ” at line 1

    Any help will be appreciated.

  25. Guillermo Winkler
    March 12th, 2008 at 19:32 | #25


    Really nice work.

    Having some issues with delRowData needed to add:

    if (success) {
    var t = this

    Because it’s not decrementing the total number of rows. Is it the correct approach?


  26. March 12th, 2008 at 19:40 | #26

    It is corrected in final preview


  27. david187
    April 3rd, 2008 at 19:16 | #27


    when there are two grid in a page, the second grid’s pager data(record no), will as same as the first one.

  28. david187
    April 4th, 2008 at 08:45 | #28

    I am sorry about that, it seem to be my mistake.

  29. 23JUL
    April 25th, 2008 at 01:50 | #29

    Since I use a json_encode’d string to initialize the grid, some properties, like the pager I could not set, therefore I added the following lines after the definition of $.fn.jqGrid. Perhaps an idea for a next version to keep configuration serializable? Nice work, btw!

    if (typeof p.pager == “string”) {
    p.pager = jQuery(p.pager);

  30. April 25th, 2008 at 16:23 | #30

    thank you

  31. oscarml
    May 20th, 2008 at 13:57 | #31


    First of all thx for sharing this great plugin. It makes life easier.

    I’ve a question that was asked time ago about loadcomplete: (remember Scot post 8)

    In my case what I want to do is add a jqueryConfirm in the delete buttons that I add (putting as trigger the delete link).

    2 options:
    a) In the page with the grid (the problem is that if i use the loadcomplete for that, the delete button’s are not still in the page.
    b) Placing the javascript for doing that in the PHP page that fills the datagrid: problem -> datagrid doesnt understand the … as data, and grid is clear.

    Joe(in post 29) said something about a change in the script that was going to send to u. Did it work?

    Thx again

  32. tony
    May 21st, 2008 at 08:59 | #32


    Could you please post here or send me the jqGrid configuration for that?
    my email is tony at trirand dot com.


  33. Jose Luis Domingo
    July 22nd, 2008 at 16:22 | #33

    hi tony,

    great peace of work. makes life really easier!!! my jqGrid is working.

    but on some other pages that has jqGrid, i’m having problems with “selecting” an items. it won’t select and it should leave a blue highlight (just like in my other pages with jqGrid). lightblue highlight comes out on hover, but when i click the row, it should display a blue highlight on the selected row.

    codes are almost the same except for the fields, what could have gone wrong? i’ve been trying to locate as to where i’ve gone wrong.

  34. Fernando
    August 18th, 2008 at 14:29 | #34

    Hello Tony.
    Congratulations for your plugin.
    It is perfect for my needs but I don’t know to implement “Live Data Manipulation – Navigator” without other funtions like theme selected, frame, etc. Repeating in other words, I need to implement only your excelent Navigator in my html but I don´t know how to do it. Complementing, my server don’t use XML. Could you send me an email with simple example ? Please, see a html composition in http://www.portaldoscoqueteis.com.br/grid/imagem.JPG .
    Thanks. Fernando

  35. tony
    August 19th, 2008 at 12:57 | #35

    There is a documentation page, where you can see what and how you can do it with jqGrid. If you have any problems please post your problem in the forum.


  36. September 29th, 2008 at 21:58 | #36


    I really like jqGrid, it is a great plugin and made my work lot easier.

    Few questions –

    1) Can I load the colModel & colName dynamically from a XML file?
    2) How can I sort data in the table if my repeatitems=true? I am unable to sort the data when repeatitems=true. I am getting my data from XML file.


  37. tony
    October 1st, 2008 at 11:38 | #37

    For the first currently this is not possible
    For the second – load the data and after loading set the datatype parameter to local


  38. Ruchi
    March 12th, 2009 at 13:14 | #38


    How can we select all the rows in a jqgrid programmatically??


  39. saryry
    June 22nd, 2009 at 11:39 | #39

    I try to do my first grid but it does not
    I followed the documentation the result is a table without data,someone can help me to do it

  40. saryry
    June 22nd, 2009 at 11:42 | #40

    i’m under easyphp in local

  41. saryry
    June 22nd, 2009 at 11:47 | #41
  42. Rajan
    November 19th, 2009 at 11:22 | #42

    I am not getting exact procedure to export grid..
    I have read the doc but there not getting examples to get it clear
    Can export the grid in xls format in php?

  43. VP
    December 16th, 2009 at 19:49 | #43

    I am trying to find out if jQGrid has some way of displaying an HTML table inside Grid’s cell because I have to display more than one value in a cell. Please let me know if there is a way and point me to a right document. That will be helpful!

  44. April 23rd, 2010 at 22:52 | #44

    There is a documentation page, where you can see what and how you can do it with jqGrid. If you have any problems please post your problem in the forum.

  45. iQuis
    September 21st, 2010 at 06:43 | #45

    Hi, good stuff.

    I wish that you some day can mimic (integrate?) all funcionality of
    bBrowser: http://www.votools.de/english/bbrowser/description.htm

    bbrowser have image fields, calculated fields, color condicional fields, etc.

    bbrowser born in 1990 … 20 years ago …

  46. September 22nd, 2010 at 15:47 | #46

    its a very useful jQuery Grid

  47. September 30th, 2010 at 15:32 | #47

    It’s very well :-) thans for Grid Plugin…

Comment pages
1 2 3 4 13
Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information