Home > jQuery > jQuery Grid 2.0

jQuery Grid 2.0

August 4th, 2007

I have made a decision to go direct to version 2.0, since this release has a lot of new features and bug fixes. Thanks to all that helped me to make this better. I will begin with a fixed bugs.

  • IE and Safari hanging when some values in the xml node are empty – i.e. <row></row>. Now I use a different approach – see the new features.
  • IE does not format correct the table row if some data is empty – I analyze the data and add a space if it is empty.
  • Sorting problem if we do not set sort property in the column model.
  • Pager does not have correct navigation if we use a onSelectRow method and are on the first(last) page and clicking the first(last) or previous (next) page buttons.
  • Now the Grid can read a xml file which is not returned from any server side language (thanks to Damian).

New features

  • The long awaited support for JSON data. See documentation for more details. In short – if we want to use a JSON there is a new option datatype. Set this option to “json” and enjoy. Default is “xml”. In case of “json” the grid is much more faster.
  • Improved is a speed of reading the xml data. The bug in IE (empty node value) force me not to use a firstChild.nodeValue (iteration of the xml tree), but a simple text (IE) and textContent (Mozilla) property. This improved a speed in a big data sets.
  • Now we can set a width of the grid (thanks to Luca). This is achieved with a new option width. How it works: If this option is not set, the width of the grid is a sum of the width’s of the columns defined in the column model + 20 pixels. If this option is set the width of each column is scaled according to the defined width. Example: if we define two columns with a width of 80 and 120 pixels, but want the grid to have a 300 pixels – then the columns are recalculated as follow: 1- column = 300(new width)/200(sum of all width)*80(column width) = 120 and 2 column = 300/200*120 = 180. In the next release I will add a method setWidth which will change the width of the grid dynamically.
  • Automatic height resizing. This is done with a new option rowheight. This option defines the height of the single row (we must make some experiments here). If is set the height of the grid is changed according to the number of the returned rows from the server and the scroll bar does not appear. Important note here – if we want this to work we should not change the property overflow hidden and white-space nowrap in the CSS .
  • In the xml and JSON data formats I add a new tag – records. In this tag we can put the total records from the query. To view the total records from the query in the pager bar we should set the new option viewrecords to true. By default this option is false for backward compatibility. There is another option related to this – recordtext. This displays a text after the viewed records. The default value is in English and is: Record(s).
  • I add another option – imgpath. Whit this option we can define the path to the images that are used from the grid. Define this without a “/” at the end.
  1. Alek
    August 7th, 2007 at 23:39 | #1

    Hi, thanks for your great work.
    I used the grid in one sample page, but I couldn’t use getSelectedRow() function; how should I call this method on a button click event for example.
    I tried:
    But none of them works


  2. Tony
    August 8th, 2007 at 11:08 | #2


    I do not known how you use this, but I have updated the example page and put some examples on how to use the methods. Please check the Example page – right button – View source.



  3. Alek
    August 9th, 2007 at 17:20 | #3

    Thanks, Tony
    I saw your example works correctly
    I think my issue is due to creating the grid in separate dll and bundling the scripts as WebResource (I’m working with C#.Net). So when the page render; It doesn’t recognize object grid; so the function calls fail as well.
    Do you have any idea in my case ?


  4. Tony
    August 9th, 2007 at 18:36 | #4


    To be a honest, I never work with .Net, but you can try this:
    Define the grid as global variable – i.e before document.ready function: var grid1.
    Remove the “var” when you construct the grid. After that you can simply call the grid1.getSelectedRow function every time. See the example page again. I have made the needed changes.


  5. Alek
    August 9th, 2007 at 18:55 | #5

    Great! It worked.

    By defining the grid variable in global scope I can now access it in my page.
    Thank you very much.


  6. jiming
    August 13th, 2007 at 15:20 | #6

    Hi man, very impressive work.

    I have several suggestions to make it better, hope you can agree them:)

    1. support multi-select
    2. support google like page numbers, like 1,2,3,4…..
    3. support go to page [by input page number] directly
    4. support sort in page only option, which do not send request to server but sort in currect page only
    5. hidden the page part if the records less than one page

    Wa, too much request this time, hope you do not mind!

    Best regards,


  7. Chinchih
    August 15th, 2007 at 02:21 | #7

    Hi, thanks for the great plugin.

    I tried the grid with 250 test data using the ‘json’ datatype. The grid seemed populated correctly, but the red “Loading…” div on the upper left coner of the grid would not go away. Could you please help?


  8. August 15th, 2007 at 11:37 | #8

    @jiming – Most of the features are planed in the next release, some not and this is number 4 in your list – client side sorting require a lot of work. There are a lot of such plugins that do that. If you want to use data returned from the server and client side sorting you can combine such plugins with a Taconite plugin

    @Chinchih Please, if possible send me a link with this issue. I’m not a JSON expert, but please check the data returned from the server. Is it formated correct? – If data contains special characters they must be escaped


  9. Dino
    August 16th, 2007 at 16:08 | #9

    Hi, first of all, congratulations for the excelent piece of code!

    I??m struggling to create an addRow method, since I would need to populate the grid rows one by one (and also delete a specificly row).

    The plan is allow the user to insert items, and them send the grid data to a PHP application.

    I??ve tried this to the addRow (copying from addJSONData, of course)
    var addRow(data,t) {
    var row = “”
    var cur = “”
    row = ”;
    for (var j=0;j”+data.cell[j]+””;
    formatCol($(data,t), j);
    row += ”;
    but could not figure out the format of the expected data parameter! ๐Ÿ™

    Could you help me on this?

    thanks in advance for any help!

  10. August 16th, 2007 at 19:36 | #10

    Since WP removes some chars, could you please send me e-mail with the code. Please send the code to: tony (at) trirand (dot) com.

    Some idea – instead that i do not see the full code maybe:
    formatCol($(data,t), j); should be replaced with:
    formatCol($(row,t), j); – where row should be jQuery object


  11. jiming
    August 17th, 2007 at 12:41 | #11

    Hi Tony,

    Thank you for having most features I expected in next version, which is a supprise!

    Best regards!


  12. Fabio
    August 19th, 2007 at 18:29 | #12

    Hi, thanks for this wonderful plugin which I’m trying to modify a little. I would like to know how to work server side with the search box. I see that a ‘whr’ var is added to the querystring, but how do I have to set the mysql query?


  13. Fabio
    August 19th, 2007 at 18:37 | #13

    Nevermind, I eventually get it to works. It was simple because I do not thought that the querystring was generated entirely by the javascript.

    So I added this

    if(isset($_GET[‘whr’])) $whr = $_GET[‘whr’]; else $whr = “1=1”;

    and then added “…WHERE $whr…” in the SQL string.

  14. Jalindar
    August 21st, 2007 at 13:43 | #14

    Hi all,
    Thanx a lot to makers of this grid . I would like to know features of subgrid in this plug-in .Nothing is mentioned about sub grid , sub grid column model, and it’s usage in documentation.

  15. September 11th, 2007 at 13:12 | #15

    your plug-in not work with jquery1.2

  16. Anon
    September 17th, 2007 at 10:05 | #16

    Any chance to get more polish on the UI? Looks a bit outdated. Also is it possible to hide columns?

  17. September 17th, 2007 at 16:32 | #17

    Hi all,

    Sorry for the late answers. I was a little busy.

    @darkknight Yes the plugin does not work with 1.2 version of jQuery. To save the users that use a plugin with a diffrent version of 1.2 I will include the missed functions for those that use a 1.2 version.

    @Anon There is a new beta version with a lot of new features – adding, updating deleting rows (client side), export the grid data to XML and JSON, adding data only once from the server with client side sorting, multi rows section, new theme, user selectable page (i.e user will input in wich page to go). I’m sure that hidding a columns can be done. Let see if I can do that.


  18. pablo
    September 19th, 2007 at 16:55 | #18

    hi, im using your amazing plugin and im trying to complement it with Thickbox. in every row i show some information and in the last column put a ‘more details’ link, wich shows extra info. this extra info is showed in a modal window with thickbox, but i have a problem: the version of jquery used for jqgrid is not compatible with the jquery version used with thickbox (v1.2) . do you have any idea how to solve it?

  19. palPalani
    September 20th, 2007 at 12:09 | #19

    Hi, Thank you very much for this component!

    I have question regarding generating image and links in jqGrid, currently i generating complete image tag in server side, instead of i want sent only the image name and it should be generated client side scripting. same thing for link also, please help me how can do this?

  20. Sven
    September 21st, 2007 at 11:32 | #20

    I missed an important feature for the jqGrid component; selecting an item from JS.
    So extended the class a little;

    this.setSelection = function(selection)
    var ptr = $(“tbody tr#”+selection,grid.bDiv);
    if (!ptr.html())
    return false;
    if( p.selrow ) { $(“tbody tr#”+p.selrow,grid.bDiv).removeClass(“selected”);}
    p.selrow = $(ptr).attr(“id”);
    if($(ptr).attr(“class”) != “subgrid”) $(ptr).addClass(“selected”);
    if( p.onSelectRow ) { p.onSelectRow(p.selrow); }
    return true;
    I hope this is useful for some of you

  21. September 21st, 2007 at 13:06 | #21

    Although i have yet to try your code the Demo looks great and is just what i am after.

    Thank you very much for your hard work!

  22. September 23rd, 2007 at 17:03 | #22

    Upcomming release will include getRowData and setRowData client side methods. I hope that this way you can do what you want.

    Thank you very much for this method. I will make some tests and include this code.

    The 3.0 release candidate is finished. In the next days I will make demo pages which will include all the features of the jqGrid.
    Thank you all the people that helped me to make jqGrid better.

  23. pepe perez
    September 26th, 2007 at 20:13 | #23

    how build json array in php for jqgrid

  24. September 27th, 2007 at 09:59 | #24

    Please go into the documentation page and look in the JSON syntax.

  25. September 28th, 2007 at 22:28 | #25

    to get working with 1.2
    replace line 192 with
    formatCol($(‘tr #’ + cur.id,t), j);

    and for a php json array example
    this works as a json datasource for the current example site

    total = 1;
    $response->page = 1;
    $response->records = 1;
    $response->rows[0][‘id’] = “1”;
    $response->rows[0][‘cell’] = array (1,2,3,4,5,6);
    echo json_encode($response);

  26. Pablo
    October 4th, 2007 at 10:20 | #26

    i try the plugin with the new version of jquery but dont work….what is the problem?? with the previus version runs fine

    Sorry for my bad english

  27. October 4th, 2007 at 10:47 | #27

    jqGrid does not work with 1.2 of jQuery, but work fine for me with 1.2.1. Please download the 1.2.1 version of jQuery and try.


  28. Pablo
    October 4th, 2007 at 11:09 | #28

    i don’t now how that was worng but that not work with 1.2.1 i try with ie 6.1

  29. Pablo
    October 4th, 2007 at 11:28 | #29

    I try with the version and work find (this version is the version of the demo page)

  30. October 4th, 2007 at 12:57 | #30

    Sorry it is my bad. I have forgot to update the grid.
    To make the grid work with 1.2.1 access line 136 and change

    $(“rows/page”,xml).each( function() { p.page = this.textContent || this.text ; });
    $(“rows/total”,xml).each( function() { p.lastpage = this.textContent || this.text ; } );
    $(“rows/records”,xml).each( function() { p.records = this.textContent || this.text ; } );
    $(“rows/row”,xml).each( function( j ) {

    $(“rows>page”,xml).each( function() { p.page = this.textContent || this.text ; });
    $(“rows>total”,xml).each( function() { p.lastpage = this.textContent || this.text ; } );
    $(“rows>records”,xml).each( function() { p.records = this.textContent || this.text ; } );
    $(“rows>row”,xml).each( function( j ) {

    I have finished the 3.0. I will publish it on sunday


  31. Pablo
    October 4th, 2007 at 13:41 | #31


  32. Pablo
    October 4th, 2007 at 13:54 | #32

    I find another problem on the searchdb.js with the new version of jquery that not work…there is a javascript error

    Error: [Exception… “‘type property can’t be changed’ when calling method: [nsIDOMEventListener::handleEvent]” nsresult: “0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)” location: “” data: no]

  33. October 4th, 2007 at 18:02 | #33

    Eh ๐Ÿ™‚

    This is maybe a bug in last release.
    To work, please coment the line 80 – i.e:
    // type: “text”,

  34. Pablo
    October 5th, 2007 at 13:18 | #34

    Thanks for all

  35. akel
    October 6th, 2007 at 08:34 | #35


    im trying to have a modifications for the grid is that ok ? i want the source of the grid to be more flexible i mean xml format should not be like rows etc..

    i will give you guyz an update for this one and if you want a copy of my work



  36. mliga
    October 6th, 2007 at 11:00 | #36

    I am experiencing a weird problem when instancing the grid in a iframe inside another iframe.
    In FF I get a JS error:

    document.defaultView.getComputedStyle(elem, null) has no properties

    It seems to be a JQuery .css() problem.
    It works without problems in IE.

  37. mliga
    October 6th, 2007 at 12:07 | #37

    Further investigations took me to the conclusion that the problem is not the iframe, but a jquery tab-control that surrounds it.
    The jqgrid is contained into an iframe that is hidden by a tab control.
    I try to instantiate it into nested iframes and it worked until i try to hide via the tab control one of the iframes. It seems that this way the css properties disappear, and FF runs into js error.
    Again, IE works well.
    If I’m right, some of jqGrid startup logic depends on css properties of the container, and if it can’t get these properties it runs into error.

  38. Tony
    October 7th, 2007 at 17:10 | #38

    @akel – no problem. As you see jqGrid is dual licensed GPL and MIT. You are welcome to send me a new features, so that this way all users of jqGrid can use them.

    @mliga If you want try to isolate the problem. First of all (instead that this is not good) try the grid without including the style – i.e without grid.css and then include step by step some lines from grid.css.


  39. Alex K
    June 9th, 2008 at 01:29 | #39

    Hey! ๐Ÿ™‚
    You`ve made a great plugin, it helps me a lot and I don`t have a need to reinvent a bicycle ๐Ÿ™‚

    But have a little problem with search reset.
    Search works perfect, by when reset event fires, nothing happens, data inside of grid stays old. Little debug shown me when $($t).trigger(“reloadGrid”) fires – it sends old search options, not empty array of them (i mean 3 search fields).
    Don`t know what to do. Can you help me a little with advice? ๐Ÿ™‚

    This is server side. Didn`t find serverdside-sample with search at here, so did it myself.

    $searchField = $this->conn->clean($_GET[‘searchField’]);
    $searchOper = $this->conn->clean($_GET[‘searchOper’]);
    $searchString = $this->conn->clean($_GET[‘searchString’]);
    case “bw”:
    $whr=”`”.$searchField.”` LIKE ‘”.$searchString.”%'”;
    case “cn”:
    $whr=”`”.$searchField.”` LIKE ‘%”.$searchString.”%'”;
    $SQL = “SELECT * FROM `”.DB_WINDOWS_TABLE.”` WHERE “.$whr.” ORDER BY “.$sidx.” “.$sord.” LIMIT “.$start.” , “.$limit.”;”;

    Regards and thanks again for this really amazing plugin! ๐Ÿ™‚

  40. tony
    June 9th, 2008 at 16:31 | #40

    If search is not activated only a _search with false value is send.
    You can easy check this with getGridParam(‘search’) and getGridParam(‘searchdata’) which will return the current state of the search.

    Maybe you missed this
    if(_search == ‘true’) {
    // do search here
    } else {
    // clear serch


  41. Alex K
    June 11th, 2008 at 18:42 | #41

    There is a piece of this code at grid.formedit.js file:

    if ($t.p.search) {
    $t.p.search = false;
    $t.p.searchdata = {};
    $t.p.page= 1;
    if(p.dirty) $(“.no-dirty-cell”,$t.p.pager).removeClass(“dirty-cell”);
    And it executes fine, but grid doesn`t reloaded with correct parameters. There is a problem.

  42. Alex K
    June 11th, 2008 at 19:24 | #42

    Ok what I`ve found:
    after RESET button click, there goes an AJAX request with old searchdata (this is why grid doesn`t reloaded with no search) and _search param becomes false. So we should lood at it at server side, not at searchdata parameters.

    So code at server becomes:


    Thanks to Tony again ๐Ÿ™‚

  43. Natesh
    September 15th, 2008 at 09:14 | #43


    Thanks for giving such a good grid, I was trying to add column dynamically to grid. But could not find it. Can you please help me with this.

    With Best regards,

  44. Jqgrid multiple selection problem
    September 17th, 2008 at 05:47 | #44

    I can do multiple selection in only current page.
    when go back the previouse page, all those selected item is unchecked.
    how can I save all the selected rows in different pages?


  45. Chris Dolan
    March 19th, 2009 at 23:55 | #45

    @Jqgrid multiple selection problem

    I get around this by:
    a) changing grid.base such that I comment out the line:

    ts.p.selarrrow = [];

    in several places where it’s inside an if(ts.p.multiselect) block (in 3.4.1, I think I disabled it around lines 1031, 1106, 1153 and 1437. I could have been overzealous, but it works for me). This is to prevent the selarrrow array from getting nuked any time the page is sorted, reloaded, etc. I’m not totally sure why this is, and I hate to change the core code, but hey, it works for me.

    adding (to your grid options)
    loadComplete: function() {

    var selected = $(“#my_table”).getGridParam(‘selarrrow’);

    if (selected.length) {
    for (var i = selected.length – 1; i >= 0; i–){
    var row = $(‘#’+selected[i]);
    if (row) {


  46. Bryan Moyles
    June 2nd, 2009 at 18:45 | #46

    Hello, I am trying to get the grid working in an iFrame. I had no doubts that it would work, however the pager is where the issue lies. When I render the content in it’s own window everything shows up just fine, but when I render it within an iframe (Mozilla 3.0) I haven’t tested other browsers yet, the pager just disappears entirely. Any help would be greatly appreciated.

  47. Bryan Moyles
    June 2nd, 2009 at 19:15 | #47

    I’ve just confirmed that IE is functional with this bug, however fixing what I had to fix to make it IE ready (we all hate it) it still does not work properly in FF

  48. LanN
    February 16th, 2010 at 20:59 | #48

    Thanks for the work. Everything works great.

    I have a small suggestion for this bug fix.

    “IE does not format correct the table row if some data is empty รขโ‚ฌโ€œ I analyze the data and add a space if it is empty.”

    Would it be possible for you to add a space to the td only but not to the title attribute of td? In IE it shows a small blank tooltip when you mouse over the empty column.

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information