jQuery Grid Plugin – jqGrid

Great Job,
Really impressed by this grid. Sorting 12000 records takes about a second which is fair enough. I hope the following features are supported in the next release:

Support for Images
Support for Context Menus

Thank you!

Tony,

Thanks for getting us to jqGrid 3.5. Everything is working great so far. The new wiki is great also.

Did you intend to leave out json2.js?
Jerry

Thanks for the update!

I just wanted to post some trouble I’ve been having here. These seem to be bugs, so I wanted to bring them to your attention.

** Sorting an Adjacency TreeGrid with JSON data causes “Loading…” text to appear and grid AJAX operations to cease.

** The filterToolbar() retains search values, even when cleared. For example, when column A has a search term from a previous search, and I clear it, then click on column B to type a search term and press enter, the request is still sent with the search term for column A.

@Kien
Thanks for these.
Both bugs are fixed. The one is published in GitHub (treeGrid) – the other need some other testings. Next week I will publish a bug fix release.
Regards
Tony

Good demos on your site, but i can’t get the new version 3.5 running in an asp .net mvc application (runtime error). Is it possible that there’s an error in the download-builder? (the vast majority of the jquery.jqGrid.min.js is commented out).

All dependencies & paths should be configured correctly.

Btw: Older versions are doing fine on my machine.

Dear Tony,
Thanks for the new release.
I used to show / hide the grid’s navigation bar by setting its CSS visibility. That worked fine in 3.5 beta. However after I upgraded to 3.5, the hidden navigation bar does not show up until I collapse and open the grid. After I collapse and open the grid once, the CSS visibility works like before. Any clue why that happened? Is there any other way to hide/show the navigation bar?
Best regards,
Rayson

Hi Tonny,
First of all, thank you so much for this amazing plugin!

I was wondering how can I add javascript events to edit form fields.
For example
{name: ‘name’, index: ‘name’, width: 200, editable: true, sortable: false, search: true, editoptions: { readonly: false, size: 32, ‘onKeyPress’: ‘if($(“#cbLanguage”).attr(“checked”))togeo();’ }}

this piece of code forks like a charm in IE8, but fails in FF, and IE7.
So what’s the right way of adding events like onKeyPress to fields of edit form?
Thanks.

@tony
I just tested the filterToolbar again, just to be sure it works. The clear button wipes data in normal text fields, but not in select dropdowns and brings back all rows.
if you do another filter action following the “clear” all the previously wiped fields are sent to the server. I am sure about this because I log all requests arriving at the server (key value pairs).

Please have a close look at this

@Rayson
Check your code again. Nothing is chnged in this direction

@Dima
Good start is to read the updated Wiki docs

@hope
Please read carefully what I write – both bugs are fixed, but only (the tree Grid) fix is published

Regards
Tony

Hi Tony,

I’ve read now in the Wiki, that it is now the regular behavior with deselect all selections if multiboxonly is set true and clicking on the row. So I have to live with it 🙂

But I still think this innovation is very unlogical, uncomfortable and not user friendly. I have already described the situation, imagine, one has selected over 10…20…50 or more rows and than clicks accidental not on the checkbox, but near it or somewhere in the row. The selection is gone and he or she must do everything again.
The multikey option is not a solution too. If I have defined a multikey and want to use inline editing, so there’re no possibility to choose a position of cursor in the input fields.
I understand, that the jqgrid can’t meet everyone’s expections, but there are now no possibility to ignore the clicks on a row and some flexibility has gone.

Best regards,

Pavel

Great work Tony, It’s looking great!!!!

One question, is it possible to do JSON binding in GridView mode NOT from an external URL but instead from Array or JSON data already loaded in the browser? I couldn’t find anything like that in the samples. Also I couldn’t find a good sample of right data template for JSON data that the grid accepts. I know simple JSON data doesn’t work, it needs special properties for the grid.

On initial page load all the JSON data is already loaded in my page.

Thank you.
Thank you.

The treegrid example is trying to access data in a table called, ‘accounts’. That table is not included in the database.sql. Is there another sql file someplace?

Thanks, Tony!

Somewhere along the line the API for the formatter functions changed. Earlier the arguments included the table cell as well as the row data as an object, keyed by column names (as one of the values inside another object). Now both of those are gone, and the formatter is apparently supposed to return the cell contexts as text. This means the formatter can’t, for example, add a class to the cell to change its color. The lack of row data also makes it harder to add in anything from another column. Is there any way of bringing that functionality back without disrupting your current design?

I’ve only been using the grid for a couple of weeks but so far I’m impressed. Nice work!

I’ve followed Pavel’s past comments and I have to agree with him that it is not intuitive to only allow multi-select with the checkboxes but not when selecting a row. It is too easy for a user to accidentally click on a row and remove all of their previous selections. It would be nice if there was at least an option to support multi-select row clicks.

Hi tony.
Thanks for the new release.

When you have some time I wish to assist you with enabeling right-to-left (rtl)direction on the grid.

Thank you
shuki

@tony
Dear Tony,
I used Firebug to track down the cause of problem. It was caused by the navigation bar class assignment to “scroll”. I checked the on-line documentation of 3.5 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid&s%5B%5D=class&s%5B%5D=scroll and found the following sentence has been crossed out – Giving the class “scroll” of the navigator specifies that we want to use the CSS provided with jqGrid. So I just removed the class assignment and problem fixed.

This script is just awesome!!! I love it!
Would it be possible to include localization? So that the grid labels are also german or whatever?
regards

Tony,

i’ve updated to the new version and it’s working quite well, but i have a problem 🙂
In my grid i want to display all the records returned by the server .. previously when not setting rowNum i could achieve this behavior, now however the default rowNum setting/behavior has changed such that the default rowNum. Is it still possible to do this in some way by e.g. setting rowNum to 0 or -1 (without resorting to ugly hacks such as setting rowNum to Number.MAX_VALUE)?

thanks,

Jan

Tony, clearGridData() does not clear the footer row.

Tony,

Really helpful plug in. Great work.

Cheers
Lasantha

@Dima

Check thedocs there is a dataEvents option

@Pavel
Instead will see what I can do.

@shuki
Next week I will be ready to do this. Will contact you

@Jan
I have do this. Will be in 3.5.1 release

@Rayson
See this
http://www.trirand.com/blog/?page_id=393/bugs/action-of-cleargriddata

Im sorry that i didnt see the localization already.
But 1 other questions:
Is it possible to send the edited data as json object, so that an asp.net webservice can handle it?
regards

Hi Tony,

I have downloaded the latest version 3.5 and using the toolbar search feature.
The clear function does really clear the search. It turn search querystring on and off but does not remove the other values in the querystring. I have modeled this from the demo files and documentation. Either I am doing something wrong or is this still a bug

Please let me know

Thanks,

Kris

Sorry Tony,

I just had to set to mtype:”POST”. Everything works fine now.

Just FYI, the underscore in the _search param passed causes problems in Oracle. I’m using mod_plsql to call Oracle stored procedures from jqGrid for the data in the grid. Oracle stored procs can’t have variables beginning with an underscore so I had to modify the name (changed _search to searchval) in order to get Oracle to accept it.

Hi Tony,

I am new to jqGrid and trying to implement grid column settings per user e.g which columns the user wants shown and the user defined size of each column. Is there a way to adjust column widths after the grid has initialized? Or is there a grid pre-initialization event/handler that would allow for changes to the colModel before the jqGrid has initialized?

Thanks!

Hi,

I have added some grids to a jQuery UI Accordion object. All the grids on the accordion child that is expanded by default, displays perfectly. But the grids on the accordion children that are NOT expanded by default, permanently shows the jqGrid “Loading” div on these grids. Any ideas?

Thanks!

I’m getting an error using IE8, on line 579 of grid.base.js

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MSN Optimized;US)
Timestamp: Thu, 6 Aug 2009 16:22:04 UTC

Message: ‘gdata’ is undefined
Line: 579
Char: 40
Code: 0
URI: common/js/grid/grid.base.js

—

Keith proposed this fix:

–

Change:
if ($.isFunction(ts.p.datatype)) { ts.p.datatype(gdata,”load_”+ts.p.id); return;}

to:

if ($.isFunction(ts.p.datatype)) { ts.p.datatype(ts.p.postData,”load_”+ts.p.id); return;}

casperd :Hi,
I have added some grids to a jQuery UI Accordion object. All the grids on the accordion child that is expanded by default, displays perfectly. But the grids on the accordion children that are NOT expanded by default, permanently shows the jqGrid “Loading” div on these grids. Any ideas?
Thanks!

@Casperd,
@Tony,

I have the same issue with UI Tabs – looks great on the initial tab, but “Loading…” on the others. I had hoped this was fixed with the 3.5 release.

Hi Tony,

Great work on the grid! I have found one small bug in grid.import.js on line 32.

if(xmlJsonClass.xml2json && $.parse) {

It looks like you have changed the $.parse to $.jgrid.parse everywhere else in the file. I changed it and it works fine. Just wanted to let you know.

Jonathan

Hi Tony – congrats on a wonderful plugin! I have most of my application finished save for a few things that I’m struggling with (I just upgraded to 3.5)

I can’t seem to get my custom unformat function to work – it is called but it doesn’t appear to be receiving the parameters…

…i love the new Wiki but there might be some mis-information on it re: custom unformat

thanks for all of your hard work!

Hi Tony,

I really like what you’ve built. I have a nice simple grid working, but for some reason I can’t get the example for advanced-search to work. I downloaded the complete set of plugins, but the search4.js script doesn’t show anything. I wonder if the navGrid on line 26 is right to??

Is all I’m using.

Thanks
Martin

Hi, The system tool out thje html from my page, so I’m including:

jquery-1.3.2.min.js
grid.locale-en.js
jquery.jqGrid.min.js
jquery-ui-1.7.2.custom.css
ui.jqgrid.css

then….

table id=”s4list”
div id=”s4pager”
script src=”/jqgriddemo/search4.js”

with the appropriate html around them.

Any ideas? Firefor 3.5, Win 7

Off-topic: what happened to the Firefox 3.5 download counter?
http://downloadstats.mozilla.com/

It still has not been updated to 3.5.2 yet and does not show the correct numbers anymore…

Ok, I figured it out, thanks. Javascript console is your friend…

Hi Tony,

Thanks for the response, I got advanced-search working great. This is an amazing tool, it has saved me weeks of work. Now I’m moving to edit, and I have a select field dataURL set to a URL that returns a nice select statement, but when I try and access it from query I get the error “404 Page Not Found –> _nsd”

The JS is:
{name:’region’,index:’region’, width:80,align:”right”, sortable:true,editable:true,
edittype:”select”,
editoptions:{rows:”1″,cols:”40″,dataUrl:’/index.php/EventController/regionlist’},
formoptions:{rowpos:6,elmprefix:”    ” }},

If you have any idea what I’m doing wrong I’d appreciate it.

Dear Tony,
The delete prompt is currently positioned on the top of grid. When a record at the bottom of grid (scroll:true) is deleted, I have to scroll all the way back to the top of grid to see the prompt. Is there any way to position it to top/center of window instead?
Best regards,
Rayson

@Rayson
Dear Tony,
The problem seemed to be setting height:’60%’ instead of number of pixels. I used percentage because I want the grid to grow according to actual window size. However I found the grid behaves like height:’auto’. The top of grid is out of sight when I scrolled to bottom of grid to press delete.
Best regards,
Rayson

@tony
Hi Tony,

I have just installed 3.5.1, and the accordion problem is still there.

Hi Tony,

in grid.base.js
var gv = $(“<div class='ui-jqgrid-view'”), ii,
should it be
var gv = $(“”), ii,

Cyrus

Dear Tony,
I have the grid in place and it shows page 1 of 10 but the page controls are not working. They do not appear as active.
I have the links

and mostly default settings.
If any of you have any idea what I’m doing wrong I’d appreciate it.
Thanks
Sue

Actually the full page is non navigable.

Hi Tony,

I might be seeing a bug with the editor popup with checkboxes. This is the situation:

Fill first grid, select a row in first grid. This fills second grid.
Second grid has rows which have a few checkboxes.
Select row on second grid, and click edit. The edit dialog appears and has the non-checkbox data filled correctly, but the checkboxes are not filled correctly.
Close edit dialog, and reopen it, checkboxes now filled correctly.

In other words, only the first time the checkbox is part of the edit dialog does it not work, all other times it works fine.

Thanks
Martin

Hi Tony,

I think I found a bug in the advanced searching. In file grid.formedit.js at the function searchFilters, the array sdata is empty when it’s added in the array p.postData.

I made some tests and the code “sdata=[];” must be replaced by “sdata = new Object();”

Florent

@Florent
Thanks. Fixed in the GitHub.

@Martin,
Will check definitely this. Seems to be a relly bug.

@Sue,
In some cases the pager elements are disabled. Mostly if datatype is local.

@casperd,
Please send me link to the problem.

There is mising class=’ui-state-error’ in TD – so errors displeyed as normal text….

Hi Tony,
Since I switched from 3.4 to 3.5 the page input and “total pages” are not appearing in the nav bar. All of the other controls are there and work perfectly.
In Firebug the cell where the “Current Page” input shoud be has the markup:

This is mark up is where the “Total Number of Pages” should be:

Should these elements be “ui-pg-button” class?

I am using a custom theme that I did on the “Themeroller” – could this be a CSS problem? Even when I use one of the standard themes these elements aren’t displayed.

…or could this be the problem: If JQGrid receives data (JSON) in which “Page” and “Total Pages” have values that are floats, would that cause these missing elements to not to appear. (I haven’t been able to figure out how to convince my ColdFusion CFC to give me 1 instead of 1.0 yet… )

thanks!