Home > jQuery > jqGrid 3.5 alfa realese

jqGrid 3.5 alfa realese

March 16th, 2009 Leave a comment Go to comments

After lot of many user requests and work, I’m happy to introduce a new wave jqGrid realease.
This release is fully integrated with jQuery UI Theming.

The work is just in alfa stage, but I hope that the final will be released soon.
There are a lot of issueas that I should resolve. The most of them are (as usual) in IE browsers.
The theme integration should be polished too.There are some missing things like zebra striping, but I do not find a class in UI theme roller that corresponds to this.

Instead of this, I think that this is a good start.

Will be glad to hear from you what you think. Any recommendations and help will be welcome.

The link to the demo can be found here.

I will publish the final code after some days.


  1. Miguel Chico
    March 16th, 2009 at 17:16 | #1

    Hi tony, fantastic work!!

    Are you using jQuery UI Dialog for the editing window? I work daily with jQueryUI and jqgrid and believe that it might be a good idea to use it because we would not have to load any more plugins of jquery (jqmodal). I can help you in this task if you want.

  2. tony
    March 16th, 2009 at 17:48 | #2

    There is such integration. Just updated the demo to work with UI Dialog.
    I found UI Dialog very slow compared to jqModal (the speed of UI dialog in IE browsers is unteribal slow), but you can use it anyway.

  3. thedavix
    March 16th, 2009 at 19:42 | #3

    Hi Tony,
    Just wanted to say that JqGrid is getting better and better!!
    Does the 3.5 version will correct the bug of the multiple checkbox?

    Thank a lot for your work!


  4. Ross
    March 16th, 2009 at 19:49 | #4

    Hi tony,

    I too think this is absolutely amazing. The demo looks great. I will really be looking forward to a more stable version of 3.5. I have tried almost every other grid/datatable plugin out there and jqGrid is by far the best of them all. Thanks for your hard work!

  5. Miguel Chico
    March 16th, 2009 at 21:54 | #5

    You are in the correct. Someone jqueryUI widget (like datepicker and dialog) show very slow in IE.

  6. Miguel Chico
    March 16th, 2009 at 21:54 | #6

    Hi tony,

    I found a little bug. In the “Multiple Toolbar Search Example” if I hide the table (with the toolbar hidden) and then show the table, the toolbar appear visible.
    I see in old page demo and have the same problem.

  7. Justice
    March 16th, 2009 at 23:19 | #7

    The integrated themerollering in the jqGrid 3.5 alpha demo looks very nice!

  8. makro
    March 17th, 2009 at 09:15 | #8

    I’ve no words to say how amazing is jqGrid!!
    only one… THANKS!

  9. March 17th, 2009 at 11:42 | #9

    Awesome work Tony! Keep it up !

  10. Anthony
    March 17th, 2009 at 13:36 | #10

    Is there a plan to include jqGrid into jQueryUI in the future? To me, it doesn’t really make sense that jqGrid is just a plugin. It’s such a useful too that it should be part of jQueryUI core.

  11. March 17th, 2009 at 15:09 | #11

    This is the best jQuery plugin. I am in the works of developing a CMS and a datagrid was needed. The possibilities go beyound my imagination. Congratulations!

  12. majkel
    March 17th, 2009 at 16:02 | #12

    Great stuff. Every release gives me functional and esthetic orgasm 😛

  13. March 18th, 2009 at 01:49 | #13

    Hi Tony,

    Thank you for your fantastic work! Do you have any plans in future to add filtering to your grid?

  14. March 18th, 2009 at 15:14 | #14

    Great! Nice work!

    P.S. Why I cannot load JSON data? In previous versions I can load JSON data, but now, when I have updated Grid files, I catch an error.

    File: grid.base.js;
    Line: 860
    ts.rows is not defined or in Opera: could not create an object…

    Help me please!

    P.P.S. Sorry for my bad English.

  15. Lotta
    March 18th, 2009 at 18:02 | #15

    Hey Tony,
    I Love you (and your plugin;-))

    Good job


  16. Tac
    March 18th, 2009 at 19:32 | #16

    Looks great, Tony.

    Any change you’d consider adding native Gears suppport? I know the Gears database can be used for the data (and columns, etc.) by calling a function that creates a json string, but it’d be a great feature to be able to support Gears natively.

    Thanks for your consideration.


  17. Maff
    March 18th, 2009 at 19:48 | #17


    Hey Tony, is it possible to use multiple spans for cells ?
    For exemple, I would like to have a header that splits into 2 or 3 columns…

  18. snf
    March 19th, 2009 at 00:22 | #18

    Great work!

    Feature request: add an ability to add an extra row before columns heading (column titles) having a textbox for selected columns which would filter the column data as you type into it.

    Thats the only thing I’m missing.


  19. orlov
    March 19th, 2009 at 06:28 | #19

    Hi, Tony.
    Great, big and very great job!!!
    It’s so f**ing usefull and fast.
    Thank you very much.
    Keep working.

  20. donb
    March 19th, 2009 at 15:08 | #20

    You are making so many enhancements and improvements that I genuinely feel guilty about having no method of contributing to a ‘help Tony’ fund (meaning all the contributing developers, of course).

    Whenever someone says ‘how do I do ‘X’ with jQuery,’ I usually point them to your work as the best example for them to learn from.

  21. donb
    March 19th, 2009 at 15:56 | #21

    You probably are aware, as it’s pretty noticeable, but the font sizes are quite a bit larger on IE (I happened to use IE7 on XP) than on Firefox. Firefox seems to have ‘correct’ font sizes. That is, they are comparable to what I see in both Firefox and IE with jqGrid 3.4.2.

    Just wanted to mention it in case you had not seen this.

    I also submitted a note to the jQuery-UI group at


    We should all put in a note and click the ‘star’ to give this as much visibility as we can.

  22. fontzter
    March 19th, 2009 at 16:08 | #22

    Tony, this is an incredible advancement to an already amazing plug-in. I was trying to port it into jqueryUI myself and gave up. Thanks so much.

    I’m wondering if adding the class “ui-priority-secondary” to the alternate row will work for now? I would like to see the jQuery UI team add a alternate row class. The one above merely sets the opacity to 0.7. Because of this, the hover-state is not consistent.

    Thanks Again!


  23. makro
    March 19th, 2009 at 16:15 | #23

    Hi Tony.
    I’ve found a little bug on 3.5 alpha.

    When you start a grid in a hidden area, when you show it jqGrid shows itself but not the pager


    jqGrid here

    $(function() {



  24. fontzter
    March 19th, 2009 at 16:15 | #24

    applying this on your demo page (via firebug) gives you an idea:

    jQuery(“.ui-jqgrid-btable tr:odd”, “#tabs”).addClass(“ui-priority-secondary”);

    It’s not very noticeable on the lighter color themes though.

  25. makro
    March 19th, 2009 at 17:25 | #25

    In my previous comment number 23 the html code for jqGrid needs to be sourrounded by div id=test element

  26. donb
    March 20th, 2009 at 14:03 | #26

    Please help advance jqGrid and assist Tony! Request an ‘alt’ row CSS style to be incorporated into the UI structure:


  27. kpitn
    March 20th, 2009 at 16:26 | #27

    Do you plan to use percentage for column width ?

  28. Surej
    March 21st, 2009 at 08:10 | #28

    Tony, Great work ..
    Is there any feature so that we can use multiselecet and edit row together.

  29. tony
    March 21st, 2009 at 20:21 | #29

    Thank you All for the good words.
    I do not think that jqGrid will be a part from jQuery UI. There are a couple of reasons for this. Instead for now it is a good alternative.

    Thanks. I will correct this.

    Good Filtering will be added after the full integration with Themeroller.

    I think that Gears support is already here – use datatype as function. Also this should be added for all editing module. Will try to do this for the final.

    This is definitle good stuff and I consider this to be done after UI Theme integration.

    This is partial supported. Will be done in the near future.

    Thanks. Not sure if this will happen until jQuery UI grid is done. (Not sure when 🙂 )

    Thanks. Definitley I will try this.

    Thanks, I will check this.

    Currently no.

  30. Todd Parker
    March 22nd, 2009 at 18:25 | #30

    This is really great and as a member of the UI design team, we are thrilled to see plugins like this start to use the CSS framework because it makes it so much easier for people to use because theming is automatic. I have to say that you did a fantastic job of using the framework – perfect mapping of classes, slick use of the icon set.

    Re:fontzer’s comment on the alternating row color, we don’t have a lever for that in the framework because it’s a pretty specific color choice that only is needed for tables/grids and we’re trying to use the fewest number of levers that work across the widest range of UI widgets (though I agree it would be nice to set globally). For now, it would be best to set this color in your CSS as a class that could be applied to a grid like this or on any other element that you might want alternating colors so you at least have global control. Maybe we’ll add this in the future.

    I wouldn’t recommend using the “ui-priority-secondary” class for this purpose because it won’t achieve the right effect. This is mainly used to de-emphasize a button (or other element) by simply making it a bit transparent to reduce the contrast. You’re looking to leave the text/icons and other cell data intact and simply add a light bg color so this is best handled as a new class that is applied to alternating rows programmatically.

    Tony – maybe I missed this in all your great examples, but do you currently support a tree-style grid where the first column has + icons that expand sub-rows that simply indent a bit in that first column but are part of the larger table (i.e. sub rows use all the columns of the parent). I see you have nested grids, but this is more like the the MS Project list (see left panel):

    My only other little nit is that the default cell styles should probably include at least 2-3 pixels of left/right padding so the text looks a bit cleaner. It’s a tiny thing, but would make a big difference.

    Awesome work!

  31. Todd Parker
    March 22nd, 2009 at 18:30 | #31

    One more suggestion: since a few people have mentioned performance issues with the search dialog, it might be slick to have the search fields appear as a toolbar above or below the grid when the search icon is pressed, much like Firefox’s search bar. This avoids the modal interaction that forces the user to repeatedly open and close the dialog as the adjust their search and see the results. Maybe the bar vs. dialog would be a nifty option.

  32. fontzter
    March 23rd, 2009 at 15:48 | #32

    @Todd Parker

    Todd, thanks for your thoughts. Take a look at the demo page under “new in version 3.3”. There is an example of the tree-grid and the multiple toolbar search.

    I understand the UI teams desire to keep the css as thin as possible. However, since a grid/table component is already planned for an upcoming release, it seems an alternate row class will be needed soon anyway. It would be great to see it added. It’s a shame to have all this theme-ability with the plug-in and then have to manually change that one class every time you switch themes. But it’s what we have to work with now.

    Regardless, the UI library and the jqGrid are both fabulous tools. Having them integrated like this is wonderful. Thanks to both teams for such great work!


  33. snf
    March 23rd, 2009 at 16:21 | #33

    tony :
    This is partial supported. Will be done in the near future.

    Any suggestions how to accomplish it? What estimate can you give in implementing this feature?

  34. tony
    March 23rd, 2009 at 20:45 | #34

    Thank you very much for the unvaluable recommendations.
    Padding of the cell will be added in the upcomming first beta.
    As for the Tree Gird. This module is available and work as you explain – with ident of the element. I plan to make more power on this. The menu on right side of the demo (3.5)is actually a tree grid.

    As for the search toolbar – I plan to do this, but with my long experiance and every day work with users – search is not so simple. The most of my users ask to search on fields that are not visible in the grid, but still are present. Instread I will support both type of search, but pop up search will have higer priority.

    I agree with Dave – alternate row must be. This can not only be implemented in the grid component. Currently I develop a complex system with html reports, where the report output is simple table. Alternate row will add more readable output (can not find the right word).

    Thank you
    Best Regards

  35. Miguel Chico
    March 24th, 2009 at 14:53 | #35

    Hi tony,

    I found another bug for this version. In the Dynamic height/width Example when I change the width of the table several times the last column increases of size. This bug is visible only in this alfa release.

  36. Miguel Chico
    March 24th, 2009 at 14:57 | #36

    Miguel Chico :
    Hi tony,
    I found another bug for this version. In the Dynamic height/width Example when I change the width of the table several times With the same widththe last column increases of size. This bug is visible only in this alfa release.

  37. fontzter
    March 24th, 2009 at 22:24 | #37

    Hi Tony,

    Another bug: When you add your own buttons to the navgrid, the icons are translated into a class of the span rather than the src of an image:


    is produced from this:

    .navButtonAdd(“#mygrid”, {
    caption: “Add”,
    buttonimg: “images/notebook_plus.png”,
    onClickButton: myaddfunction,
    position: “first”



  38. March 24th, 2009 at 23:56 | #38

    I think this is the best plugin i ve seen for jquery.
    Congratulations Tony.

    I think that this is not a plug in this have to be included in the core of UI !!!!

    When do u think to publish a stable version ???

    Thanks in advance !!!

  39. March 25th, 2009 at 03:37 | #39


    What can I say that hasn’t been said other then to add my name to the chorus of thank you’s? (We have been working on open source clinical trial faceted search for a few years now that will help people talk to their own doctors about potentially life saving treatment options) Anyway thanks to your work, our own work should bear fruit sooner, and offer a better user experience to boot.

    Etienne Taylor
    Clinical Trial Semantics Incorporated
    American Cancer Society
    California Clinical Trials Collaboration
    500 12th Street suite 320
    Oakland, CA 94607

  40. qb
    March 25th, 2009 at 12:51 | #40

    Hi Tony!
    This is really Awesome!
    Many Many thanks for your great job.
    jQGrid is really my favorite jQ plugin.

    Best Regards.

  41. makro
    March 26th, 2009 at 09:43 | #41

    Hi Tony, maybe I’m doing something wrong…
    I’m using formatter (currency or number) for a column and it works fine in grid (I’m using comma as decimal separator).
    If I edit column in default form with editGridRow, number format are not the same and the validation too (it doesn’t accept , as decimal separator)

    Thanks in advance,

  42. tony
    March 26th, 2009 at 11:39 | #42

    You do nothing wrong. This is a standart behaviour. In my experiance with Java script number like this $2,000.23 can not be validated correct as number. So all numbers in jqGrid in edit mode are converted back to 2000.23 in order to compare, sum, multiple and etc correctly. The formatter is only for dispalyng.
    Best Regards

  43. Joro
    March 26th, 2009 at 14:03 | #43

    absolutely great job you`ve done Tony!

    how can we set the default theme? For example to theme: start

  44. makro
    March 26th, 2009 at 15:23 | #44

    Ok thanks for your fast reply!


  45. March 26th, 2009 at 15:49 | #45

    wow, I’m totally impressed! This does a lot for the presentation of the grid, and better integrates it into the jquery family. I was wondering if you might like to setup a bug / svn system. I have duplicated a lot fo the fixes / improvements that you do, only to see you post them a couple of days later. I would love to contribute my changes directly instead of sending them in email.

  46. March 26th, 2009 at 23:27 | #46

    Believe I’ve found a bug with checkboxes. I copied your example

    edittype:”checkbox”,editoptions: {value:”Yes:No”}

    for my checkboxes but used Y/N for my values since that’s what’s in my database:

    edittype:”checkbox”,editoptions: {value:”Y:N”}

    Problem arises the second time I display the edit dialog for a row. The N values become checked in the Edit dialog. I changed my editoptions to use “Yes:No” as in your example and the problem goes away.

    I actually don’t mind seeing Yes for Y and No for N, but I would have expected the single character to work.


  47. mario
    March 27th, 2009 at 00:37 | #47

    Hello Tony,
    Nice work!

    I have a little problem with XHTML 1.0 Transitional not validating because the table element cannot be empty.

    My solution:
    Replace the Tag with:

    inside the html.

    And right before “jQuery(“#my_table”).jqGrid({…})” simply add the following javascript:


  48. mario
    March 27th, 2009 at 00:42 | #48

    Hello Tony,
    Nice work!

    I have a little problem with XHTML 1.0 Transitional not validating because the table element cannot be empty.

    My solution:
    Replace the Tag with:

    <div id="my_table"></div>

    inside the html.

    And right before “jQuery(“#my_table”).jqGrid({…})” simply add the following javascript:

    $(“<table id=\"my_table\" class=\"scroll\" cellpadding=\"0\" cellspacing=\"0\"></table>”).replaceAll(“#my_table”);

  49. March 27th, 2009 at 21:09 | #49

    Dude! This is unreal!

Comment pages
1 2 231
  1. March 20th, 2009 at 15:32 | #1

Privacy Policy   Terms and Conditions   Contact Information