jQuery Grid Plugin – jqGrid

SWEET… Grabbing it now. We are in the middle of enhancing our application and have been running the Alpha 2. It has worked quiet well. Thanks for all the work in this great plugin.

We just put alpha 3 in. I saw your comment about UI Dialog not being supported. We are using it to prompt for username and password currently. What is the alternative to it? UI Dialog was working fine for us running with Alpha 2. When we try to call the Dialog on 3 we get “dialog is not a function”.

@zepernick
In the jqGrid package I do not include the full jQuery UI. In order to use the UI Dialog you should download the version of jQuery UI that includes UI Dialog and replace the jquery-ui-1.7.1.custom.min.js with your custom download. Hope this help.
Regards
Tony

Hey, just wanted to tell you a big thank you for this plugin.
I’ve started using it a few days ago, and it’s really awesome!

Thanks Tony! I’m picking up Alpha3 now and can hardly wait to start using it.
Big Thanks!
Adam

First special thanks for your nice DataGrid!
I have a suggestion,
jqGrid can not support RTL(Farsi, Arabic, …) language perfectly.
When I set HTML direction to RTL, image position show incorrect and change column size not work correct.
I wish you think about this feature and add a new properties to set grid Direction 😉

Wow, guys this is one of the best jquery plugins i have seen.

KILLER JOB!

Dave

Hi Tony
I’ve the same problem from the previous release.
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 406

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

Thank you,
Marco

Thanks Tony. We accidently copied in your copy of jquery over our copy. We had not done this when implementing the previous alpha’s. Everything is working great. Thanks!

@Mojtaba
You are absolutley right. If you help me a little I will do what is needed. Just write me a e-mail to synchronoze to work.

@Marko,
Thank you very much for this. I forgot to fix this bug, but right now when we have GitHub you can download the updated source. Thanks again.

Hey Thanks alot for this plugin, it rocks!

I’ve been using jqgrid in dev for a few weeks now – Is there a way to use percentage widths for the table columns instead of exact pixel width?

Thanks!

Hi Tony,
When trying to use “Searching Data” or “Edit row” etc.. under “Live Data Manipulation” example, I get the below message in Internet Explorer 8.0(have n’t checked with older versions of IE though):
“Not implemented – jqModal.js line 46 character 127”.
Would you be please able to have a look at the same?!

Thanks for the great grid!

-Praveen

Very nice plug in

Great Job!!
Adil

For some strange reason all the data is provided as it should but
I don’t see any rows show up in the grid. I don’t get a error either…

There is a small issue with multiple grids on one page. The hide of the loading message hides all. This small change, hides only the loading message for the grid that has just loaded data:

Function with issue: endReq

The fix:

This:
$(“.loading”).fadeOut(“fast”);
To This: $(“.loading”,”#gbox_”+ts.p.id).fadeOut(“fast”);

I’ve posted a blog on pluging jqGrid into ASP.NET MVC.
Here’s the link:
http://aspnetlive.blogspot.com/2009/05/how-to-use-jquery-grid-plug-in-jqgrid.html

This is w.r.to 3.4.3. If the editytpe is “select” and within the “editoptions”, if we add the “value” and then include “size” attribute, the drop-down box becomes a multi-select box. Is this working intentional?

Please kindly clarify. Thanks for this great plugin. I believe and strongly support that this plugin should become part off the standard jQuery plugin.

not sure if this is the proper place to ask. I am using the released version of jqGrid and I have a problem with the local sort of numeric columns. The sort is working as alpha instead of numeric.
Is there a setting that allows me to force certain a certain column as a numeric column?

thanks much, appreciate the awesome grid.

Hello,
For the modal dialog, it is not possible to support both UI Dialog and your own modal ? Users who uses jQuery UI will active UI Dialog (and can reduce the final weight of jqGrid files), the others will use the modal functions included with jqGrid…
Regards

Hi Tony.
I’ve an issue and I can’t understand where is the problem.
I’m using latest alpha3 and I’m using editGridRow with form in a modal ui-dialog.
I’ve set the edit form z-index to 2000 in order to bring the edit form to top.
It works but I can’t write into any fields at all!
Can U help me, please?

Thanks in advance,
Marco

Very nice plugin! Great Job!

There is a little bug in the delTreeNode-function!
delTreeNode will only delete the first set of childs.
this bug is also in 3.4.3!

I changed the code from
if(dr.length>0){
for (var i=0;i0){
for (var i=0;i<dr.length;i++){
$($t).delTreeNode(dr[i].id);
}
}

this works as expected!

Best regards

sorry, something happend to the last post!

Very nice plugin! Great Job!

There is a little bug in the delTreeNode-function!
delTreeNode will only delete the first set of childs.
this bug is also in 3.4.3!

I changed the code from
if(dr.length>0)
{
for (var i=0;i0)
{
for (var i=0;i<dr.length;i++)
{
$($t).delTreeNode(dr[i].id);
}
}

this works as expected!

Best regards

Hi again.
I want to add some infos to my previous message (#20)
If ui-dialog isn’t modal everything works fine…

@Praveen
Thanks. Will Check this definitley.

@Born2Code,
Check for parameters sorttype in the colModel. Refer to docs

@ALkyD,
Good recommendation, but IMHO the UI Dialog has more disadvantages as the should have. The jqModal plugin is 3K – minified is 2K. Moreover the simulated dialogs in jqGrid have the same look as those from UI Dialog. In the final relese 3.5 maybe I will not use jqModal, but own Dialogs.

@Marco
Did you mean that this is only in IE? or in all browsers? Also maybe you should check the problem with a z-index

@orsox,
Thank. I will check this.

Best Regards
Tony

I’m using Firefox 3 and I tried z-index 9999 too… if ui-dialog isn’t modal it works

@Tony,

When I updated my jqGrid version to version 3.5 alpha, I get a ui widget overlay over my page.

Any idea on why this would be happening?

Found an issue in IE7 while clicking the “Edit”/”Delete” icons from the navigation menu. If I don’t select any record on the grid, the “Warning” message pops-up with no text in it. Checked the same page in Google Chrome, the “Warning” message text is displayed.

-Praveen

Hi tony,

I have a question,
If I am using form edit, could I create a custom edittype ‘like custom formater’?

For example, I have a column that represent a color and I want modify it with a color picker like (http://www.digitalmagicpro.com/jPicker/)

I want put in my colModel something like:

colModel:[ {name:’color’,index:’color’, width:75, editable:true, edittype:’colorpicker’}]

I review the grid.base code and I found the place to edit this for add this feature but I want know if you are planed to do this or if exists another option.

Thanks

#In our jqGrid > modal window, is it possible to allow parameters to put the navigator back, forward , submit, cancle close at the top of the dialog box?

– Because of shape problems and large fields modifications
– All the modal window and rest, allow text captions to change, because of Dutch, French, English, Arabic etc etc language coding.

#Grid on right click or navigator new button add, to hide/show columns on large columns lists to handle (like outlook express inbox emails you can have many columns enable or disable)

Hi everyone,
First, thank you for wonderful plugin.
Second, I want to use JqGrid to display recordset from
database, but I have a problem with the data not displayed in case of
no javascript. I think there are two ways to have data displayed even
with javascript turned off.

1. Detect javascript on/off on the server side, then either embed the
jqgrid on one case and the regular data table on the other case

2. display data table in tag together with jgrid.

Any suggestions?
Thanks,
SP

I am starting with jquery and jqgrid. I have a table with 4 columns where 1 column must be a image and it must be a link. But i don’t knwow how i can do this. Could you help me?

I’m setting the datatype option to a “Function” as described here:
http://www.secondpersonplural.ca/jqgriddocs/_2hj0xhk8b.htm

I have loadui “enabled”.

The “loading” message is not being displayed.

It looks like the problem is here (grid.base.js, line: 936)

if ($.isFunction(ts.p.datatype)) {
ts.p.datatype(gdata);
endReq(); // !!! This line seems to cause the problem !!!
}

I commented out the offending line of code and it fixed the problem.

Hi Tony,
I am trying jqGrid in my application which is written in Perl. I had written the code in perl module say abc.pm(where i am calling the get_form) and the jave script code for jqGrid is written in template file xyz.frm
Can you please tell me in detail step what i have to do to make it working.
Thanks in Advance,
-Sumit

Hi, i’m very eager to try this but i just cannot get it to work. i’ve tried the basic sample and all i get is the following error:

$.jgrid is undefined

Hello Tony,

Nice plugin! I wanted to manage my own UI for loading, and found that using loadui: disable did not do as expected. It left a large overlay mask on the screen that disabled not only the grid, but a large portion of the rest of the screen (including other non-jqgrid related stuff). This applies to jqGrid 3.5 Alfa 3. The fix was to grid.base.js, line 677, making the insertion of the jqgrid-overlay conditional:

if (this.p.loadui != “disable”) {
$(“”).append(ii).insertBefore(gv);
}

@sumitbce, if you look at the PHP demo. in the documentation, it is very clear and personally and can be easily ported to Perl (as I have used both). I felt I had to take some sincere time to understand that part off the code, before coming up with any questions. Also, would suggest to use the forum support after giving your try.

@Sean, ensure that you have all your Javascript files included in your web page. Also ensure that you have modified the “pathtojsfiles” in the “jqGridInclude()” is pointing to the right direction. I would suggest to use the Forum support for this sort of queries, where the audience could be wider…

-Praveen

Ok it was the pathtojsfiles var that i needed to correct. One other issue is that i’m also using jayrock (jsonrpc) and i found that json2.js needed to be excluded as its conflicting with the json.js need for the jayrock implementation.

also is it possible to assign an object as the ‘datasource’?

Thanks it is script i like

Fantastic news about the ARIA support I was just about to suggest this in the forum when I came across this article. Accessibility is a requirement on the project I’m currently working on and I was faced with using a lesser grid control or trying to add support to jqGrid myself.

when you do jqGridImport how do you add buttons to the pager? I am using the following code and nothing appears. There is no error and the data loads fine. But the refresh and search buttons dont appear.

jQuery(“#list”).jqGridImport( {
imptype : “json”,
impurl: “demo.php”,
mtype: “GET” // the type “GET” or “POST”
jsonGrid :{
config : “grid”,
data: “data”
}
});
jQuery(“#list”).navGrid(“#pager”,{refresh: true, edit: false, add: false, del: false, search: true});

Hi Tony,
I’m having a problem while using this version of jgGrid with ASP.NET MVC.
I’m not sure if others have experienced it too:

When the page loads, the grid is rendered as expected. But, even after the page seems to be loaded completely, the browser’s progress bar is still running with the status message –
“Downloading picture http://localhost:……./redmond/ui-bg_inset-hard_100_fcfdfd_1x100.png.”

Every time the page is refreshed, it seems to be stuck downloading a different images.
The path in the status message is correct and also the image that it attempts to download exist in the folder.

Also, this problem exists ONLY WITH Internet Explorer. It is working fine in Firefox and Chrome.

Please let me know if you are aware of this issue or have a fix for it already.

Thanks in advance,
~Mayank.

@Andy: http://www.secondpersonplural.ca/jqgriddocs/_2ev0lsi7v.htm

@Tony:
First things first: thx for the nice plugin!

I’ve been testing out the latest alpha on one of my projects and I’ve found a bug..
NavButtons doesn’t display images anymore .. you can easily check it by going to the alpha demo and click “New in version 3.3” -> “Multiple Toolbar Search”. Normally the search button there should have an image .. (look at the stable demo for that)

I inspected the html and this is what i get for 3.5alpha:

Search

and this in 3.4:
Search

which makes it quite obvious why the image aint displayed 🙂

— Jan

Hmm, plz ignore my previous post, I was trying to paste html in here but the blog software ate it. Let’s try again:

@Andy: http://www.secondpersonplural.ca/jqgriddocs/_2ev0lsi7v.htm

@Tony:
First things first: thx for the nice plugin!

I’ve been testing out the latest alpha on one of my projects and I’ve found a bug..
NavButtons doesn’t display images anymore .. you can easily check it by going to the alpha demo and click "New in version 3.3" -> "Multiple Toolbar Search". Normally the search button there should have an image .. (look at the stable demo for that)

I inspected the html and this is what i get for 3.5alpha:
<tr><td class="ui-pg-button ui-corner-all" title="Toggle Search">
<div class="ui-pg-div"><span class="themes/basic/images/find.gif"/>Search</div>
</td></tr>
and this in 3.4:
<tr><td><img src="themes/basic/images/find.gif"/></td><td>Search </td></tr>

which makes it quite obvious why the image aint displayed 🙂

— Jan

@Mayank Srivastava
@Mayank, would agree with you.
Tony, I am using IE 7.0 and the coding is in ASP .NET and I have the same issue as that of Mayank. Not sure what is causing this issue.
-Praveen

Hi Tony… I can’t find a solution…
My problem is the one I wrote in comments 20 – 23 -25…
Can you help me?

Thanks in advance,
Marco

@Marco
I see you use ui-dialog. Set in your html file in the style section

.ui-dialog : { z-index:1000 }

Note that in beta UI Dialog support is removed from jqGrid
Regards
Tony

@Jan
Thanks for pointing out to the link.
As mentioned in my earlier post, i am importing Grid configuration in JSON

jQuery(”#list”).jqGridImport( {
imptype : “json”,
impurl: “demo.php”,
mtype: “GET” // the type “GET” or “POST”
jsonGrid :{
config : “grid”,
data: “data”
}
});
jQuery(”#list”).navGrid(”#pager”,{refresh: true, edit: false, add: false, del: false, search: true});

Using that refresh button and search should appear. But they dont.
The link that you gave shows how to add Custom Buttons. i fail to see the connection.

@Jan
Thanks will be fixed.

@Andy
If you use 3.5 alfa try this
jQuery(”#list”).jqGridImport( {
imptype : “json”,
impurl: “demo.php”,
mtype: “GET” // the type “GET” or “POST”
jsonGrid :{
config : “grid”,
data: “data”
},
importComplete:function(){
jQuery(”#list”).navGrid(”#pager”,{refresh: true, edit: false, add: false, del: false, search: true});
}
});

@tony
Thanks tony. I suppose importComplete is not part of 3.4.4?
Also, what is the planned release ( stable ) for 3.5?

@Tony

.ui-dialog { z-index:1000 } doesn’t work.
I can see the form, but fields seems to be read-only, nav buttons and Send/Cancel work fine

Everything is ok on a NOT modal ui-dialog.

“Note that in beta UI Dialog support is removed from jqGrid”
What does it mean? I can’t use jqGrid in a ui-dialog?

Thanks,
Marco