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. eshu
    October 8th, 2007 at 15:57 | #1

    downloaded jqGrid from this site, and there is some files missing inside…
    i hope you will check this!?

  2. October 8th, 2007 at 19:43 | #2

    I have found a problem. If you use FF – please clear the cache.

  3. Scott
    October 9th, 2007 at 05:28 | #3

    Do you have a simple example page like you did for version 2? I just need to know how to get the grid working without the splitter and tab plugins that are a part of your example page.

    Thank you.

  4. Scott
    October 9th, 2007 at 05:36 | #4

    I figured it out. Instead of loading the script like this:

    I had to put this in the head section of the page:

    var grid1 = jQuery(document).ready(function(){ ….

  5. October 9th, 2007 at 15:46 | #5

    I have updated the demo page, so that you can view separate example

  6. eshu
    October 11th, 2007 at 19:46 | #6

    hello again…
    i have downloaded the complete demo from your page, uploaded to my site (at Freehostia) and raned it from there and all i get is that browser can not parse the data ( there is red sign says loading and its just keep hanging on) do i have to change something in some files, or i have to have some options enabled on my web host provider?
    p.s. i mean there is one file named server_ado.php do i have to change some paths there?

  7. eshu
    October 11th, 2007 at 21:52 | #7

    firstly thx for nice plugin… i can imagine, and knows its not a easy job…
    but, as we are here….
    files in your root folder are not same as those i found in jqgrid_demo.zip file ie. some .php files are like empty?!
    i unzipped this demo file, uploaded to my web site but still nothing is loading ( there is red loading sign hanging but nothing is loading to the table.. i really like this plug in for its uniqueness but… i hope this will be resolved in the future so that even novice can handle this one…



  8. Scott
    October 12th, 2007 at 08:44 | #8

    Thanks for the new demo page and for all of your hard work on jqGrid.

    Is there a way to execute a function after the table has loaded? I want to change the background color of certain rows based on their content. I know how to get the content and how to change the class in tr to change the color – but my code keeps executing before the data has been loaded. I don’t want the user to have to click to activate it.

  9. October 12th, 2007 at 10:01 | #9

    In the demo package there is a file readme.txt. In this file I explain how to make this demo working on your site.
    If you have problems with this I have updated the jqGrid demo page and write a step by step example – see Simple Example in the demo page.
    If you have trouble you can give me a link. Only in this case I can help you.


  10. October 12th, 2007 at 10:14 | #10


    This is just idea. You should manipulate the data at server. Here is a simple example – suppose we use a xml.

    while( ..) // loop the rows

    if (some condition) {
    echo ““;

    } else {
    //data with no red color
    end while

    Note that this at cell (td) level. This way you can color not only rows, but cols

  11. Jiming
    October 13th, 2007 at 19:06 | #11

    Hi Tony,
    Hi Tony,

    Great job, thanks!

    May I suggest that in multiselect, support SHIFT and CTRL, just like
    GMail does. Which means that you can press SHIFT and select a range of


  12. October 15th, 2007 at 15:07 | #12


    Thank you for the suggestion. It can be done, but not in this release.
    The beta is at end. I will finish it about some days. There are other features, that are not documented :). In this release I will try to include a hideCol and showCol methods, but it is a little difficult.
    In the next release plans are to add keyboard support, multiselect with SHIFT keypress support and maybe editable cell.

  13. palPalani
    October 15th, 2007 at 15:29 | #13

    Hi Tony,
    How to generate image/link in client side, i don’t know how to use setRowData, please give me the sample.

  14. October 15th, 2007 at 16:10 | #14


    Go into the example page. From the tree select Manipulating and then select Grid Data. Click on link “Update amounts in row 11”


  15. Matt
    October 15th, 2007 at 20:12 | #15

    Hi Tony,

    I just wanted to first say that your plug-in is great. In the way I want to set up my grid, I wont know the number of columns or names until i get the response back from the server. So i added this into the xml that gets sent back in the response. The problem I’m running into is trying to set the colNames. From what I can tell in your code you go ahead and setup the colNames in table header tags before you even make the ajax request, around line 570. Is this correct? If not please correct me. So I tried to make the call to the server before appending the column names in the html, but can’t get that to work. I was wondering if you could give me some advice, or a better approach to take or even a solution :).



  16. October 16th, 2007 at 01:43 | #16

    Awesome. Your plugin is a must-have.

  17. October 16th, 2007 at 19:11 | #17


    This is just idea.
    Maybe you must call a custom function before constructing a grid, after this line:

    return this.each( function() {
    if(this.grid) {return false;}

    This function will fill the colNames and colModel array with the appropriate data from xml.
    If you make a ajax request I recommend you to use a ajax option async:false.

    Please let me know for the result

  18. Matt
    October 16th, 2007 at 22:54 | #18

    Hey Tony,

    Thanks for the reply, what you mentioned worked fine. I just wrote another function that made the ajax call getting the header information and set the option async:false, which did the trick.

  19. Pascal
    October 18th, 2007 at 10:38 | #19

    I would like to have a multiselect using datatype=’local’. It makes me javascript error

    Error : ts.p.colModel[pos] has no properties
    Source file : xxxxxxx/jqGrid.js
    Line : 287

    My script perfectly works without the ‘multiselect : true’ option.
    Any idea?


  20. October 18th, 2007 at 10:56 | #20


    I will look into the code. Maybe it is a bug. Could you please give me more information. Do you add data with addRow method or do you load data first with xml(json) and then use it as local.

  21. Pascal
    October 18th, 2007 at 11:31 | #21


    I use the mydata structure as in the “Array Data” exemple :
    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″} ];

    Everything is done like in your example, including the addRowData method. Except that I build the mydata into a loop from my own js object.

    Thanks for your reactivity.

  22. October 18th, 2007 at 11:56 | #22

    Hi Pascal,

    Thank you I found this bug. If you can not wait I will tell you what to do. I plan to publish the final releas on sunday.

  23. Pascal
    October 18th, 2007 at 12:05 | #23

    Thank you, i would appreciate that you explain me was has to be done if it doesn’t take to much of your time.


  24. October 18th, 2007 at 12:16 | #24

    No problem,
    In the source file find addRowData method – i.e:
    $.fn.addRowData = function(rowid,data) {…
    whitin this function find:
    t.formatCol($td[0],t.grid.bDiv), i+gi) //line 187
    and change to:
    t.formatCol($td[0],t.grid.bDiv), i)

    Let me know for the result

  25. Pascal
    October 18th, 2007 at 14:03 | #25

    It works but only the first row appears (I should have 4 rows). What is more, i lost the content of my first column.

  26. October 18th, 2007 at 14:38 | #26


    Very sorry about that, forgot to add another condition.
    OK. I have updated the plugin and you can download it.
    Again very sory for the confusion.


  27. Pascal
    October 18th, 2007 at 14:41 | #27

    You don’t have to be sorry. That ‘s a great plugin you working on. It saves me a lot of time. Thank you

  28. palPalani
    October 18th, 2007 at 14:45 | #28

    Hi Tony,

    While loading a data grid in a page, how can i call a user defined function:

    jQuery(“#a3″).click( function(){
    var gridD = jQuery(‘#list2’).getRecords();
    var su, ret, img = ”;

  29. Joe
    October 19th, 2007 at 03:16 | #29

    Thanks for the great plugin and the willingness to help everyone use it.
    I had a problem similar to Scott’s above in that I need to do make a call after the table has loaded. I’m doing some processing on the data severside and I need to be sure that the database call has finished before I ask for the processed result. Anyway, I added a little bit to your code to hook into the ajax callbacks. If your interested in seeing it I’d be happy to send over a patch.

  30. Pascal
    October 19th, 2007 at 12:03 | #30


    It seems I have an problem when I try to use 2 grid on same page. Display works fine but delRowData setRowData try to work on the wrong grid.
    Does anyone have the same problem?

  31. October 19th, 2007 at 16:32 | #31

    Great you can send me a patch to tony at trirand dot com
    I will look at the code maybe another bug.


  32. October 19th, 2007 at 19:00 | #32

    Thank’s. It is another bug on both methods. I have correct this and now it should work as well. You can downoad the corrected version.

  33. Pascal
    October 22nd, 2007 at 14:33 | #33

    Thank you again for your reactivity. My application is in a go way now and I think I won’t find bugs anymore.


  34. Pascal
    October 24th, 2007 at 11:26 | #34

    Hi Tony,

    Do you you think it is possible to add a ‘hide’ parameter into the colModel. This would allow to define an attribute to a row object without displaying column in the grid. It is usefull when user doesn’t have to see unique id of a row.

    Thank you

  35. palPalani
    October 24th, 2007 at 17:14 | #35

    Thanks Tony…

    Now i’m able to call function after grid get loaded.

  36. October 25th, 2007 at 13:31 | #36

    If you speak about the id it is not necessary to put the id in row data.
    The id is only needed to identify the unuque row (passed as attribute as you can see this clear in xml examples). If the id is not passed the jqGrid assign the next count. To be clear – example (JSON):
    This line:


    can be changed with:


    and if you remove the id column from colModel and colNames all will be ok and the user will see the grid without the id column.

    In princip you are right – the first step is a hideCol method.
    Writing this I came with a Idea to put two new functions –
    beforeLoad and afterLoad data which will be executed only once when the grid is constructed at first time. This way you can call a method hideCol after the first loading is complete and the user will not see some columns.
    I will include the functions in the final release and will think about you suggestion

  37. October 27th, 2007 at 22:57 | #37

    jQuery Grid is great… thanks..

  38. Ken Kuhlman
    November 6th, 2007 at 17:19 | #38

    Are the toXmlData & toJSONData functions still a work in progress? They’re mentioned in your blog entry & the documentation, but I don’t see them in the 3.0 version of the source.

    btw, thanks for a great plugin! I’ve given it high marks at the jquery plugin page (http://jquery.com/plugins/project/jqGrid).

  39. November 7th, 2007 at 13:36 | #39


    Thank you for the good words.
    I have removed these two methods from the plugin. Reason for this is that many people asked me – could be the output have another structure?
    So I have added another method – getDataIDs (wich return the id’s of the grid). This method with combination with getRowData(rowid) give you a possibility to output a string with your choice. If you need help please let me known.


  40. Alain
    November 8th, 2007 at 20:06 | #40


    Is there a place to suggest some ameliorations to avoid bugs (currently here on ie)

    Because I want to use the 100% height value… (so “” on firefox, but ie don’t like)

    Suggestion :

    Instead of : ts.p.height+”px”, you could do ts.p.height+(isNaN(ts.p.height)?””:”px”)

    What else : jqGrid is simply good, thanks (Alain)

  41. November 8th, 2007 at 20:19 | #41

    Thanks – added.
    Just now I have added another page – Forums

  42. November 14th, 2007 at 14:13 | #42

    Hi Tony,

    i detected a problem with loading xml data in safari. First thought was an error in my implementation of your (very fine) plugin. But after checking the example pages i realized that every example with xmldata does not work in safari. The JSON examples on the other hand work fine. Do you have a hint/idea? If you need support on testing/debugging with safari feel free to contact me.

    Kind regards

  43. November 19th, 2007 at 06:39 | #43

    Great work,, this is the first time i visite this site,, still working like that.

  44. Sebastian
    November 21st, 2007 at 17:26 | #44

    How in method POST ?:
    datatype: “json”,
    height: 150,
    colNames:[‘Index’,’Usuario’, ‘Nombre’],
    {name:’id’,index:’id’, width:65},
    {name:’usuario’,index:’usuario’, width:150},
    {name:’nombre’,index:’nombre’, width:100}
    // rowList:[10,20,30],
    imgpath: ‘images’,
    pager: jQuery(‘#pager5’),
    sortname: ‘FECHA’,
    viewrecords: true,
    sortorder: “desc”

  45. snowDrummer
    November 21st, 2007 at 20:36 | #45

    I’m pretty happy about this plugin. I have difficulty sometimes with the sizing, I’d like to be able to control the header table and pager sizes directly through the CSS. Is this something you’d be interested in incorporating?

    Thank you for all of you work, I’m happy to help in any way.

  46. November 21st, 2007 at 20:56 | #46

    Since many people ask this feature, I have added just now a new option: mtype. If not set the default method is GET, if set to POST all requests are via type “POST”.

    It is easy :). Suppose you have set in CSS something like this:

    table.scroll {
    table-layout: fixed;
    background-color: white;
    width: 700px;
    where the width is the width what you want.
    Before constructing the grid you can do:
    var mywidth = jQuery(“#mygrid”).width(), and then

    jqGrid is flexible 🙂


  47. snowDrummer
    November 21st, 2007 at 22:42 | #47

    Is there a difference in the way that onSelectRow works when multiselect is enabled?

    For Example:

    $(‘mylist’).jqGrid({ multiselect:true,onSelectRow: function(iRow){ alert(“select row triggered”); }, …});

    I get the alert when the grid is initialized, but not when I select rows thereafter, which is the opposite of what I’d like.

    The functionality I am going for is:
    a) Ignore the event if it’s just the jqgrid reloading
    b) function a if user is selecting row
    c) function b if user is unselecting row

  48. November 22nd, 2007 at 08:08 | #48


    It is a good idea! I do not known which version do you have, but onSelectRow is raised only when you click on the row and multiselect is not true. The old behavior is removed.

    Now let’s discuss the functionality b) and c). I think that we should have only onSelectRow with two parameters iRow and selected(boolean). The second parameter can be accepted only if multiselect is true – this way selected is true if you select the row and false if you unselect it. What you think about this?

  49. snowDrummer
    November 26th, 2007 at 22:42 | #49

    I think that sounds like the perfect way to handle it.

    I’m not sure why the second parameter (selected) would only be accepted if multiselect is true. I guess that since there is no way to ‘unselect’ a row without multiselect enabled, it makes sense that you wouldn’t need to bother with the selected variable.

    I guess if I were to write a method which I expected to work with both multiselect and non-multiselect grids, I would expect that with the non-multiselect grid that the ‘select’ boolean variable would just always be true when onSelectRow is called. If that wasn’t the case then I could easily program around it, but it seems intuitive to me that way.

    Whichever way we can do it, I appreciate it.

    Thank you again.

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