jQuery Grid Plugin – jqGrid

Oh, yeah:) I’m first, reallly great job Tonny! Thanks a lot

I was just talking about the gridComplete event yesterday, stating how that would make the grid even easier to test.

Thanks!

Really great plugin, with great documentation, and great examples!
May The Force Be With You!

I can’t get the navButtonAdd working. I have no error using the method, so I assume I have correctly included the new js files.

Here you can see my code (adding the button)

$(“#email_grid”).navGrid(‘#toolbar1’,{edit:false,add:false,del:false}).navButtonAdd(‘#toolbar1’,{caption:”Edit”, onClickButton:function(){ var gsr = jQuery(“#email_grid”).getGridParam(‘selrow’); if(gsr){ jQuery(“#email_grid”).GridToForm(gsr,”#order”); } else { alert(“Please select Row”) } } });

Please, what does not work? What do you expect and what is not working?
Regards
Tony

Hi,

Is it possible to use client validation in online editing?? Or is just possible in form editing.
thanks

Sorry for my post (4º). I didn’t explain anything, not even asking gently 🙁

. I don´t use to do it, but I was desesperaaate hehe. Well, the problem is that I can´t see the custom buttons, neither FF or IE.

The default one, which you put true or false, display ok.

There’s no javascript error at all, so I suppose I added the new files properly. I have tried just with the caption of the button (just in case image path was wrong, but nothing happens).

Tomorrow I will upload a demo with the code printed.

Thanks guys

I’m having a little problem running some test code against 3.2. I’m sending JSON output (via Django) to a simple grid. The “cell” specification seems to not work or is being ignored or something. In the following example data/grid options I get the “key” column populated, and the one “invdate” field I pulled out of the cell area, but no others. If I move data fields out of the cell area they are correctly processed, but anything in the cell area is ignored.

Any ideas? Thanks in advance.

Tom

javascript:

jQuery(document).ready(function(){
jQuery(“#list”).jqGrid({
url:’jqgrid_loadtable’,
datatype: ‘json’,
mtype: ‘GET’,
colNames:[‘key’, ‘Inv No’,’Date’, ‘Amount’,’Tax’,’Total’,’Notes’],
colModel: [
{name:’pk’, index:’pk’, width:40, jsonmap:’pk’},
{name:’invid’, index:’invid’, width:55, jsonmap:’invid’},
{name:’invdate’, index:’invdate’, width:90, jsonmap:’invdate’},
{name:’amount’, index:’amount’, width:80, align:’right’, jsonmap:’amount’},
{name:’tax’, index:’tax’, width:80, align:’right’, jsonmap:’tax’},
{name:’total’, index:’total’, width:80, align:’right’, jsonmap:’total’},
{name:’note’, index:’note’, width:150, sortable:false, jsonmap:’note’} ],
pager: jQuery(‘#pager’),
jsonReader: {
root: “rows”,
id: “pk”,
page: “page”,
total: “total”,
records: “records”,
repeatitems: false,
cell: “fields”,
},
rowNum:10,
rowList:[10,20,30],
sortname: ‘id’,
sortorder: “asc”,
viewrecords: true,
imgpath: ‘/css/jqGrid/themes/basic/images’, // may need to …fix…
caption: ‘My first grid’,
});
});

—————————————-
JSON data I’m sending:
{“total”:1, “page”:1, “records”:3,
“rows”:[{“pk”: “1”, “model”: “polls.invheader”, “invdate”: “2008-07-21 16:07:30”,
“fields”: { “tax”: 33, “note”: “This is a note”, “amount”: 222, “client_id”: 111, “invid”: 100, “total”: 255}},
{“pk”: “2”, “model”: “polls.invheader”,
“fields”: {“invdate”: “2008-07-21 16:07:30”, “tax”: 33, “note”: “This is a note 2”, “amount”: 222, “client_id”: 111, “invid”: 101, “total”: 255}},
{“pk”: “2”, “model”: “polls.invheader”,
“fields”: {“invdate”: “2008-07-21 16:07:30”, “tax”: 33, “note”: “This is a note 2”, “amount”: 222, “client_id”: 111, “invid”: 101, “total”: 255}},
{“pk”: “3”, “model”: “polls.invheader”,
“fields”: {“invdate”: “2008-07-21 16:11:35”, “tax”: 1.23, “note”: “Last Note for Now”, “amount”: 55, “client_id”: 234, “invid”: 103, “total”: 56.23} }] }

ref entry 8: Found the error and the fix – already documented in forum port entitled: “Errors discovered integrating it with Django” Note that the error is not Django specific, it is a parameter application error.

Nice job. I think continued development on this is quite reassuring. I’ve been fairly happy with the plugin so far and you are clearly targeting this to the server developer crowd like myself. Thanks.

BTW, I was a bit peeved by some methods becoming obsolete rather than deprecated, but it wasn’t too painful to find and replace the various places where it was being used. Maybe next time, give it at least a release cycle where you use some type of warning mechanisms to give people time to switch to the new while the old is still there.

Hello,.
First of all I’m sorry for repeating the comment. please if you don’t mind remove the other comments on 1.0 & 3.0

This is A vvv-nice plugin!
its just the best grid I’ve ever seen..
I just wanna thank you..

and I wanted to ask you about something, i believe it is a bug..
the bug is:
jqGrid doesn’t work at all if the column’s count is greater than 16.
By the way, it was tested on “JSON”.

Can you help out with this please.. i have about 38 important columns.

Thanks a lot.
and sorry again.

Hi,

Thanks alot for the plugin.

I am facing a problem while implementing a basic row editing sample.
The code is taken from Row Editing > Basic sample from http://www.trirand.com/jqgrid/jqgrid.html

The following is the error shown by firebug.

jQuery(modwin).jqDrag is not a function
DnRModal(“#alertmod”, “#alerthd”)grid.for…it-min.js (line 62)
navGrid()()grid.for…it-min.js (line 46)
e()jquery.js (line 11)
e()jquery.js (line 11)
navGrid()()grid.for…it-min.js (line 45)
(?)()()jqGrid2.html (line 39)
e()jquery.js (line 11)
e()jquery.js (line 11)
e()jquery.js (line 11)
e()jquery.js (line 11)
[Break on this error] jQuery(mw).css({top:p.top+”px”,left:p.le…offsetTop;}while(obj=obj.offsetParent);}

I am using jqGrid version 3.2
Used default setting for including script files and style sheets as shown below

This problem is occurring when i am using the following function related to paging.

.navGrid(“#prowed1”,{edit:false,add:false,del:false})

please help.

A good start first is to read the documentation
Regards
Tony

Srinivas:

You must include jqDnR.js and jqModal.js

same problem as Srinivas
I included jqDnR.js and jqModal.js but still the same “jQuery(modwin).jqDrag is not a function” error. I checked the (great) documentation but really can’t figure it out.
any idea ?
Thanks again for this great piece of software.

problem solved, it was indeed an include issue. checking the forums helps too !

Can you describe how you solve the problem, please.

Ok, I’ve found it it was js/query.jqModal.js, but there is js/jqModal.js
hm…..

Version 3.2 row striping is broken. Works fine in 3.1……

Hello

By jqGrid Congratulations! It is simply fantastic.

I am starting to use the jqGrid however, to be beginner, do not work properly.

When the page is loaded, the data of the grid are not shown. Only after clicking the Refresh button is that the data of the grid are displayed.
Someone I could explain what might be wrong? How can I fix this? I would like to data from grid to appear to load the page, as well as work for examples. PS. I am using json. Thank you very much!

Hello. Can anybody explain me how to run it?
I’m getting jQuery(“#list4”).jqGrid is not a function.
Here is my code:

gridimgpath = ‘script/grid/themes/basic/images’;
jQuery(document).ready(function(){
== code from Array Data example ==
});

Sorry. Tags were skipped.
script src=”script/grid/jquery.js” type=”text/javascript”
script src=”script/grid/jquery.jqGrid.js” type=”text/javascript”
script src=”script/grid/js/jqModal.js” type=”text/javascript”
script src=”script/grid/js/jqDnR.js” type=”text/javascript”

Hello Tony,
frankly speaking … JqGrid is most powerful web tool that i have seen since years.
Thanks a lot for your clear examples. Very good documention (such a shame for little mistakes like <?php echo”<?xml … “<?x” is problematic for php… )
but it is nothing …
thanks a lot for this great tools…

just little question : have you implement a timer to refresh the grid data and showing new entries ?
not seen … but it could help to have this tool…

stephane bourquin -from france-

If you look into the forum, the simple way is

var refreshgrid = setInterval(function() {
$(‘#mygrid’).trigger(”reloadGrid”);
}, 5000);

This will refresh grid every 5 second

Regards
Tony

In FireFox 2 (on xp) the Modaldialog windows shows up for edit, find, etc, but as soon as I click inside the popup window the window disappears. In IE7 I do not have this issue. Also as soon as I try and scroll through the rows inside the EDIT RECORD modal dialog the window closes. The same issue is found in Google Chrome and Safari.

By the way, just to add to my issue above, I do not have this issue with your demo model in Firefox, etc.

Very nice plugin and very useful. I seem to be having the same problem as Alessandro (#20). In Internet Explorer 7 after dumping all cookies/cache/form data and loading a fresh page using jqgrid I get nothing and a JS error…”object doesn’t support this property or method”.

After clicking refresh everything works fine. I know this has to be an MS thing but I’m wondering if there is any possible work around. There is literally no reason for error and nothing in debug tools in firefox and other browsers. IE7 shows an error under the conditions specified and then no error.

Issue got resolved. I was pointing to the wrong jqModal.css file in the wrong folder. I made sure I had the downloaded version in the “basic” sub-folder and it worked just fine.

Adam, I had the same issue when I tried to dynamically load the data for the editoptions via a function call (editoptions:{value:countries}), turns out I had to add “async: false” to my ajax call to make sure it finishes getting my data from the server before rendering the jqGrid. Maybe you have the same issue.

I have problem with grid.

If width of table (data load json) larger than width of table ( default – user for th), it will make bug.

Please help me.

To solve the error: jQuery(modwin).jqDrag is not a function

Do as instructed in the manual:
If you plan to use the form editing module you should include jqModal.js, jqDnR.js and jqModal.css files in your html page.

hi,
really great job.

but i have one doubt how to get row index of selected row

Impresive control, how could i implement a warning triangle or colour the row if an editted cell broke a business rule?
e.g. picked units cell > ordered units cell

Can the grid handle a straight xml file with no configuration info? would it render with the element names etc?

thanks for your help

@renso
did you ever get resolution on the dialog window closing with firefox?

please explain me how to search one grid to another form in jQgrid

Hi,

I’m using jqGrid, but I have one issue. I setup the DataSource with a XML file, But I’m unable to see the data on IE7 because the data it doesn’t show. (on FireFox and Opera work fine). I don’t what’s happening, because the IE doesn’t throw me an error. Perhaps is the format of my XML file, maybe someone can help me.

jqGrid excellent approach 🙂

Josue.

BTW this is my file (Tracking of the post #37 )

1
1
1

13
2007-10-06

1234.00
0.00
1000.00

@Josue
You will never make this work in IE – also search how IE interpret local ajax request. More on this you can find on jQuery google group
Regards
Tony

Hi,

I spent lot of time to built a working jqgrid, but all of my attempt
were unsuccessful. 🙁

I followed the documentation to install jqGrid. I made a directory (jqry)in my web server. (C:\AppServ\www\jqry). I copied all of the required files – mentioned in documentation – into this directory. (jquery.js, jquery.jqGrid.js, js dir and themes dir)

My HTML code:

jqGrid Test

jQuery(document).ready(function(){

jQuery(“#list4”).jqGrid({
datatype: “local”,
height: 250,
colNames:[‘Inv No’,’Date’, ‘Client’, ‘Amount’,’Tax’,’Total’,’Notes’],
colModel:[
{name:’id’,index:’id’, width:60, sorttype:”int”},
{name:’invdate’,index:’invdate’, width:90, sorttype:”date”},
{name:’name’,index:’name’, width:100},
{name:’amount’,index:’amount’, width:80, align:”right”,sorttype:”float”},
{name:’tax’,index:’tax’, width:80, align:”right”,sorttype:”float”},
{name:’total’,index:’total’, width:80,align:”right”,sorttype:”float”},
{name:’note’,index:’note’, width:150, sortable:false}
],
imgpath: “jqry/themes/basic/images”,
multiselect: true,
caption: “Manipulating Array Data”
});
var mydata = [
{id:”1″,invdate:”2007-10-01″,name:”test”,note:”note”,amount:”200.00″,tax:”10.00″,total:”210.00″},
{id:”2″,invdate:”2007-10-02″,name:”test2″,note:”note2″,amount:”300.00″,tax:”20.00″,total:”320.00″},
{id:”3″,invdate:”2007-09-01″,name:”test3″,note:”note3″,amount:”400.00″,tax:”30.00″,total:”430.00″},
{id:”4″,invdate:”2007-10-04″,name:”test”,note:”note”,amount:”200.00″,tax:”10.00″,total:”210.00″},
{id:”5″,invdate:”2007-10-05″,name:”test2″,note:”note2″,amount:”300.00″,tax:”20.00″,total:”320.00″},
{id:”6″,invdate:”2007-09-06″,name:”test3″,note:”note3″,amount:”400.00″,tax:”30.00″,total:”430.00″},
{id:”7″,invdate:”2007-10-04″,name:”test”,note:”note”,amount:”200.00″,tax:”10.00″,total:”210.00″},
{id:”8″,invdate:”2007-10-03″,name:”test2″,note:”note2″,amount:”300.00″,tax:”20.00″,total:”320.00″},
{id:”9″,invdate:”2007-09-01″,name:”test3″,note:”note3″,amount:”400.00″,tax:”30.00″,total:”430.00″}
];

for(var i=0;i<=mydata.length;i++)
jQuery(“#list4”).addRowData(i+1,mydata[i]);

});

But nothing happend. Blank page and a message in staus bar (with an exclamation mark): Problem on the page or Ready.

That would be wrong? Could anybody help me?

Regards,

Koli

Simply superb I have absolutely beginners knowledge in Javascript and being a back end programmer got grid working in first shot. Thanks a lot and you guys are best in what you do, started customizing the grid
Regards
Chandra

HI Masters

it is really a fabulous i have work on it , it really a good tool as compare to vs gridview ,
i have a one issue can any one tell that while searching record if no record is found so how can address this to enduser with appropriate user message

thanks in advance

best regards,
Dinesh

I fixed the issue of function not found by changing this line below to my correct path of my app in function jgGridInclude() of jquery.jqGrid.js.

//var pathtojsfiles = “js/”; // need to be ajusted

I am new to JqGrid. I have implemented the same in Spring + JSP. I am not able to see the content in my table. The table heading, captions are displaying correctly. No clients side error.

Will u pls some one help me to resolve this issue…

My Spring + JSP code here…

From controller i will be passing the “routers” and “pageinfo” model to my jsp.

My building xml (dp_latestevents.jsp) page is :

<% java.util.List rows = (java.util.List) request.getAttribute(“routers”);
for (Router row : rows) {
%>
<row id="”>

summary_disc_router.jsp:

jqGrid Demo

jQuery(document).ready (function() {
jQuery(“#list”).jqGrid( {
url:’../common/dp_latestevents.htm’,
datatype: ‘xml’,
mtype: ‘GET’,
colNames:[‘Device Id’,’Device Name’, ‘Ip Address’,’Ro Community’],
colModel :[
{name:’deviceId’, index:’deviceId’, width:100},
{name:’deviceName’, index:’deviceName’, width:150},
{name:’ipAddress’, index:’ipAddress’, width:100, align:’right’},
{name:’roCommunity’, index:’roCommunity’, width:120, align:’right’}
],
pager: jQuery(‘#pager’),
rowNum:10,
rowList:[10,20,30],
sortname: ‘deviceId’,
sortorder: “desc”,
viewrecords: true,
imgpath: ‘../gui/jquery/themes/basic/images’,
caption: ‘My first grid’
});
});

when i access the xml content from URL (../common/dp_latestevents.htm):

–
1
2
11
–
5
cmm-2600-02
126.1.26.23
public

–
6
cmm-2611-01
126.1.25.22
public

–
2
cmm-6503-c2.cisco.com
126.1.5.14
public

–
4
cmm-6504-c4
126.1.8.16
public

–
10
cmm-6506-c1.dns-sj.cisco.com
172.20.111.200
public

–
8
cmm-6506-c3.dns-sj.cisco.com
126.1.7.15
public

–
11
cmm-7206-sd1
126.1.2.11
public

–
7
cmm-7604-d1.dns-sj.cisco.com
126.1.12.17
public

–
9
cmm-7604-d2.dns-sj.cisco.com
126.1.16.18
public

–
3
cmm-7604-sd2.dns-sj.cisco.com
126.1.4.12
public

–
1
cmm-gsr
126.1.17.19
public

I am able to get the XML content. But not able to see the content in my grid…

Will you pls help me some one….

Did you ever find a question to your problem? I have the same problem.

Adam :Very nice plugin and very useful. I seem to be having the same problem as Alessandro (#20). In Internet Explorer 7 after dumping all cookies/cache/form data and loading a fresh page using jqgrid I get nothing and a JS error…”object doesn’t support this property or method”.
After clicking refresh everything works fine. I know this has to be an MS thing but I’m wondering if there is any possible work around. There is literally no reason for error and nothing in debug tools in firefox and other browsers. IE7 shows an error under the conditions specified and then no error.

Not sure if you guys are still reviewing this code, if not what a waste, excellent code you have here. anyways Ive been implementing the grid using PHP POS which uses jquery 1.2.6 kind of old but the rest of the ajax in there needs it so anyways. my question is, I can show the grid I get the info I need but each time a mouse over I get an error stating “b(d.target).closest is not a function” not sure if it has to do with the jquery or if something screwy is up in my jquery.jqGrid.min.js. thax for the help!

hai all,
Can i get some simple jquery multiselect grid.

I am using jquery grid and getting error “aw snap something went wrong while displaying this webpage” in google chrome. Its working fine in other browsers. Please help me to solve this problem.

Can some please tell me how use jqgrid with jsp. I want to send an xml file to my jsp and within the jsp use jqgrid to render the table with data from my xml