jQuery Grid Plugin – jqGrid

I’m currently developing a an jQuery and qGrid powered website.
I’ve downloaded your release earlier today (before your post on the main site), but same as with alpha1 I’ve noticed some bugs:
1. I’m using jqGridImport to load the grid structure and grid headings. The thing is that when parsing the data for the second column, if I don’t negate (override) settings that were set for first, those settings (from first column) are applied to second. You probably hava a reference to an temp obj that is not destroyed/nulled.
2. Some textbox (edittypes) do not appear at all. This may be related to 1.
3. Still having trouble using jgGridImport and navGrid. In alpha1 it did not show until I’ve put it into a setTimeout function. The row for navGrid was blank. In alpha2 this blank row is not shown at all, and the navGrid does not load :/
4. When editing (this in alpha1 i think) I could not save the row I was editing. Also sometimes while adding jqGrid was sending edit operation instead of add
5. When you have in your colNames jqGrid displays Object blablabla in column header.

Thats all I can think of for now. Besides great work! Keep it up!

in 5. it was “When you have ” cdata brackets (xml wise), while jqGridImport running.

This is a seriously impressive piece of work! Can’t wait for a project to come along that warrants so much bad-assery.

@snf
One other thing: Window dialog for edit/add actions does not automatically stretch to display the content inside. Not really a bug but enhancement maybe.

Hi Tony, I’ve just upgraded alfa to alfa2. Things are working fine for now. I suppose you know the pager bug (no page and navigation buttons when the grid starts in a hidden div) is still present.
Another question. I’m trying to use celledit with remote submit, after edited a cell, if I press tab jqGrid sends 2 posts of the same cell.
Is there any docs about the structure of the object if I use clientArraY?

Thanks in advance,
Marco

ehm… please don’t look at “Is there any docs about the structure of the object if I use clientArray?” question… 🙂

@snf
Thanks for these investigations. Actually the import and export modules are not changed. If you send me the configuration that you have I will test it. Instead I will work on this. Another question related to 1. Do you have make first export and then import? – there is a bug when you export first a grid with multiselect: true and/or treeGrid true and then import that configuration.
3. How do you call navgrid?
4. In wich module – cell edit, inline edit or form edit?
5. Sorry, do not understand.
6. Auto width does not work for me at all in IE – in all other browsers is OK

@marko
Thanks. I do not have time to test (sorry) this situation.
I will definitley check the double posts of cell edit.

Thanks all
Best Regards
Tony

This is real nice, thanks a lot for producing such a great grid!
I just downloaded alpha-2 and when I try to pull up jqgrid.html, I’m getting an alert saying “Dialog module is not loaded!” – can you tell me how to fix this?

Thanks,
Shailesh

About the “pager bug”: in alfa1 only the “previous button” was partially visible, in alfa2 nothing except “record x of y”. It also happens when a page with a grid inside is loaded by ajax request, but I’m quite sure it is the same bug related to “hide and show”

Hi Tony a little help: “pager bug” is in grid.base.js
I changed row 1117 from
$(“td#”+pgid+”_”+ts.p.pagerpos,”#”+pgcnt).width(tdw)
to
$(“td#”+pgid+”_”+ts.p.pagerpos,”#”+pgcnt).width(‘auto’);

since the width() method from an hidden element always returns 0, now it seems fine.

Hope it helps you,
Marco

@Shailesh
Please load jqModal.js. The UI – dialog is incredable slow in IE. If you want download the full version of jQueryUI and replace the jquery.ui.all.js file.

@Marco
Thanks for this investigation, but did you make some tests in IE 6/7 – I think you will have a unexpected results. It is always connected with jQuery 1.3x where it returns 0 width of the hidden elements.

Regards
Tony

Hi Tony I’m here again.
Another fix for the same problem for the add/edit/del buttons.
in grid.formedit.js
inserted line 931: if (tbw == 0) tbwp = ‘auto’; else tbwp = tbw+8;
modified line 932: $(“#”+pgid+”_”+o.position,”#”+pgid).width(tbwp);

Tests in Firefox 3.0.8 and explorer 6 and 7 seem to be OK!

Regards,
Marco

Hi again.
I’m using cellEdit with clientArray. The problem is that the first row isn’t notified as edited in clientArray. To have that I had to modify grid.celledit.js row 421

from $($t.rows).slice(1).each(function(j){
to $($t.rows).slice(0).each(function(j){

don’t know if it is a bug, anyway now it works fine.

Have a nice weekend,
Marco

Great work Tony!!!

I have a question?
What’s are the new features? Is there in the example page?

@tony

ad.1 Nope, I do not do an export before. I just import the data through xml. For ex. if I set false (set resizable=false in xml for a column) than if I do not call resizable = true for next in order, than it (next column) will have the same (false) setting set. As I said, you probably have a reference somewhere wile reading/setting those values and it is not properly unset.

ad. 3 Tried lots of methods. The setTimeout worked in alpha1. Now I just do $(“#ID”}.navGrid(); after iporting

ad. 4 it was form edit module

ad. 5 what I Simply meant, is when you have to put text between cdata (“XML comment”, parser ignores everything between those tags), table headings then do not display this text but word XML Object… (as if you did a var_dump in PHP)

ad. 6 ignore the bug about stretching, my fault

7. How should the response look to edit/add action for form edit?

I think that marko’s problem is related to my point 3. I have this problem when not using jqGridImport. Edit buttons do not appear

Hi there!

The new “Autoloading data when scroll” feature looks very nice!
Is there a way using this feature and the pager functions?

I would like to create a grid with about 500 rows to be displayed at the same time, from about 5000 records. 500 record would be very slow to download, so I would use the feature mentioned above, but than how should I get the remaining 4500 rows?

There are now three lines in grid.common.js that read

vl = $.htmlDecode(vl);

Better to use

vl = jQuery.htmlDecode(vl);

since the $ shortcut is not used elsewhere in the code, which makes things easier for people who might have prototype.js conflicts with $.

Hello,

Great jobs for this tool.

I have updated my development environment to jquery alpha-2.

Actually, when I load my Js unit test script page, I get warning dialog box with message “Dialog module is not loaded”

Problem already reported by Shailesh, the 3 april 2009

The problem appears when I use this two code line only.
The problem appears too if I use official jquery 1.3.2 official developement release.

Two situation :

If I call the grid, the warning are displayed

In firefox/3.0.8, this warning stop the page loading.
In internet explorer/7.0.5730.13, navigator continue to load the page after the warning. Grid Behavior seems normal.

If I load only the two javascript file, the warning are displayed.
The page content on the two navigator are empty.

When I reuse the jqgrid 4.5 alpha, the behavior is totally normal.

Perhaps important : the language for my web browsers is the french.

I am going to continue my investigation.

Regards,
Fabien

Precision for my previous post :

The problem appears even If I load only the two line.

[script src=”js/jquery.js” type=”text/javascript”] [/script]
[script src=”js/jquery.jqGrid.js” type=”text/javascript”] [/script]

I change the markup < to [ if not the code is tidy.

@Fabien
have a look inside jquery.jqGrid.js and set the right paths.

Hope it helps

It seems like dragging the edit dialog is much slower in 3.5 alfa 2 than in 3.4.3, even though I have jqModal loaded. Is it something to do with the change to using jQuery UI?

Actually I see that if I don’t load jQuery UI then it’s not so bad. What is UI being used for when jqModal is present?

Ah, I see now. jqGrid prefers jqModal over jqUI for creating the dialog, but then it prefers jqUI over jqDnR for making the dialog draggable and resizable. Maybe it should prefer jqDnR when it’s loaded, since it’s so much faster?

There’s a bug in grid.setcolumns.js that keeps the checkboxes for non-hidden columns from being checked correctly. The ‘hidden’ property from colModel should be tested as a boolean, not compared to undefined (since if it’s set to false, as it is now, it’s not undefined). In part of line 43, change

((this.p.colModel[i].hidden==undefined)?”checked”:””)

to

(this.p.colModel[i].hidden ? “” : “checked”)

Line 258 in grid.common.js now makes all selects in the edit form 98% wide:

jQuery(elem).css(“width”,”98%”);

It would be better to do that in the stylesheet, or not at all, so that those of us who don’t like the superwide selects can avoid them. For other input types, the 98% (or in come cases 99% — make consistent?) width can be avoided by setting the ‘size’ or ‘cols’ in the options, so those aren’t so much of a problem.

@makro
Thanks a lot, I read after your advise the installation documentation :
http://www.secondpersonplural.ca/jqgriddocs/index.htm

My library wasn’t configure correctly

I will add a little comment to help people who have the same issue than me.
If you have the warning message : Dialog module is not loaded!

Load the libraries with this order :
[script src=”js/jqModal.js” type=”text/javascript”] [/script]
[script src=”js/jquery.jqGrid.js” type=”text/javascript”] [/script]

You need to load jqModal library before jqGrid library.

title : UI.DATEPICKER FOCUS ISSUE
Hello,

I believe there is a focus issue when using the ui.datepicker. When the first column is a editable date column with a ui.datepicker attached to it, the calendar won’t show up until the focus is reattached (click outside then re-click on the cell). BUT, if a editable column is on the left of that date column, then there is no problem because the first column will get the focus, and you won’t notice the issue.

Keep up the outstanding job,

X.

title : UI.DATEPICKER FOCUS ISSUE (2)

Oops forgot also to say that when the date is selected on the calendar, the cell loses the focus. Thus, in order to valid the change, the user has to click again on the cell to be able to type [Enter].

Hi,
great job – Congratulations!
I using version 3.4.2 with python on appengine. and I’m facing a problem concerning the ‘selected’ class that is added when I selected a editable row but it is never removed.
I have only two columns and only the second one is editable.
In the setSelection (base.js) the following line was not removiment the previous selected row:
if(!$t.p.multiselect) {
if($(pt).attr(“class”) !== “subgrid”) {
error ===>> if( $t.p.selrow ) {$(“tr#”+$t.p.selrow.replace(“.”, “\\.”),$t.grid.bDiv).removeClass(“selected”);}

To solve the problem I was forced to remark the line
//$(pt).addClass(“selected”); and the previous one.

Thank you very much
marco

Thanks for your amazing work!
I created a plugin for Ruby on Rails : http://www.2dconcept.com/jquery-grid-rails-plugin

For the tabletogrid method: to avoid trying to set/override things afterwards (which isn’t supported for all options), constructor additions/overrides would be useful. Could an extra parameter be added turning:

$(this).jqGrid({
datatype: “local”,
width: w,
colNames: colNames,
colModel: colModel,
multiselect: selectMultiple
});

to:

var options = {
datatype: “local”,
width: w,
colNames: colNames,
colModel: colModel,
multiselect: selectMultiple
}
if(optionOverrides) {
options = $.extend(options, optionOverrides);
}
$(this).jqGrid(options);

where optionOverrides is the extra param.

Hi, l downloaded “jqGrid 3.5 ALFA 2 (with demos)” and when l installed it in localhost and try to access to the jqgrid.html file an alert appear that say “Dialog module is not loaded!”

How l can solve this problem?

Thank you

Martin

Martin, you need to load jqModal before jqGrid.

@Martin
@Shailesh
Hi, please load “jqModal.js” before “jquery.jqGrid.js” in
file “jqgrid.html”, line 42

Hi,I want to ask that the jqGrid can be use the width with percent just like width:’90%’

Thank You for great plugin and very good documentation

Greetings,
I have a question jqgrid can be implemented in a web application in Java Server Faces?

A wonderful transition to 3.5, however to me it came frustrating:

The themed jqGrid slows everything way more
I have customized my 3.4.3 grid’s style (I use complex dual-subgrid grid with every subsequent grid relatively smaller)

How can I have a grid with bugs fixed in 3.5 (especially the one “clicking on a label of a subgrid-as-jqGrid of a subgrid-as-jqGrid of a jqGrid makes all last subgrid turn into div with its pure innerHtml code in it) but having the theme disabled/lightened/fast/customizable?

Thanks huge for this. I hope I am not in a dead end

—
sledge

@snf
a lot of thanks to trirand.com
i have a problem for tree grid implementation for three categories, grand-parent,parent & sun(root node–> subroot node—> leaf node),here compulsary to level.lft,rlt this fields in database compulsary? and i also display the data from 3-tables from the databse.
can i do?

a lot of thanks to trirand.com
i have a problem for tree grid implementation for three categories, grand-parent,parent & sun(root node–> subroot node—> leaf node),here compulsary to level,lft,rlt this fields in database compulsary? and i also display the data from 3-tables from the databse.
what can i do? please help me…

One minor thought, the refresh button should probably force a load from the server even if loadonce is set to true. It might also be nice if there was a function in the API for a forced load in that situation as well. For now I’ve worked around forcing reloads by temporarily doing a grid.setGridParam({datatype:’json’}) prior to calling grid.trigger(‘reloadGrid’).

hello Help me..!
if the data/records are not come from the server(0 ros found) then the “records not found” messege will display on grid or hide a grid.
thank you very much..!

yjm1102 :
Hi,I want to ask that the jqGrid can be use the width with percent just like width:’90%’

Rameshwar Patil :
hello Help me..!
if the data/records are not come from the server(0 rows found) then the “records not found” messege will display on grid or hide a grid.
thank you very much..!

Hi,I want to ask that the jqGrid can be use the width with percent just like width:’90%’

Rameshwar Patil :
hello Help me..!
if the data/records are not come from the server(0 rows found) then the “records not found” messege will display on grid or hide a grid.
thank you very much..!

@Rameshwar Patil
Check your mapping. In writing my grid generator I had exactly that happen,
it didnt seem to happy also not having the total records, the paging was not working.

Hi Tony,
Great work! We are using the jqGrid 3.5 alfa 2 in my project.

I want to use jQuery UI’s dialog when a row is selected so I did the following:

jQuery(‘selector’).jqGrid({…
onSelectRow: RowSelected, … });

And I wrote the function
function RowSelected(rowid){… $(‘#detailsDialog’).dialog(); … }

now, after the jqGrid is rendered, the dialog shows when the row is selected for the first time.
If I close the dialog box and select another row the dialog box doesn’t show up. It show on the first click (row selection) ONLY.

Is there something I’m missing? Has anyone else encountered this problem?

I found the solution to the problem of dialog box opening only one.
It’s a jQuery UI dialog box problem and not related to JQGrid.

For others, who might hit this issue, here’s the fix –

Set doalog’s “autopen” to “false”,
And call the .dialog(‘open’) after it is initialized separately (in the same or different function):

Code snippet from my previous comment:

function RowSelected(rowid){
…
$(’#detailsDialog’).dialog(
autoOpen: false,
width: 500,
height: 300,
modal: true
);
…
$(‘#detailsDialog’).dialog(‘open’);
}

When will you launch release jqgrid 3.5

@zoqui
Hi!
I had similar problem – make sure that row id in xml source has no spaces.