jQuery Grid Plugin – jqGrid

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.

Hello,
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.
Regards
Tony

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?
(http://www.trirand.com/blog/?page_id=18/help/multipleselect-remove-a-checkbox/page-1&value=checkbox%251&search=2&ret=all)

Thank a lot for your work!

Regards,
David

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!

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

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.

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

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

Awesome work Tony! Keep it up !

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.

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!

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

Hi Tony,

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

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.

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

Good job

Lotta

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.

Tac

Fantastic…

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…

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.

Cheers.

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

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.

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

http://groups.google.com/group/jquery-ui/browse_thread/thread/1cf4635a7db485bb?hl=en#

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

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!

Dave

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

example

jqGrid here

$(function() {
$(‘#test’).hide();

jqGrid….

$(‘#test’).show();
});

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.

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

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

http://groups.google.com/group/jquery-ui/browse_thread/thread/1cf4635a7db485bb#

Do you plan to use percentage for column width ?

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

Thank you All for the good words.
@Anthony
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.

@Miguel
Thanks. I will correct this.

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

@Tac
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.

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

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

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

@fontzter
Thanks. Definitley I will try this.

@makro
Thanks, I will check this.

@kpitn
Currently no.

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):
http://www.allocatus.com/Home/en/Images/ms_project.png

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!

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.

@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!

Dave

tony :
@snf
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?

@Todd,
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
Tony

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.

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.

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:

Add

is produced from this:

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

Thanks,

Dave

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 !!!

Tony!

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
CEO
Clinical Trial Semantics Incorporated
American Cancer Society
California Clinical Trials Collaboration
500 12th Street suite 320
Oakland, CA 94607

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

Best Regards.

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,
Marco

@marko
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
Tony

absolutely great job you`ve done Tony!

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

Ok thanks for your fast reply!

Marco

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.

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.

David

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:

$(“”).replaceAll(“#my_table”);

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”);

Dude! This is unreal!