jQuery Grid Plugin – jqGrid

Hi ! Thanks you all for the release, the export indeed works fine but it seems my second issue is still there…Did some of you had time to have a look ?

Thank you, eagerly expecting the PHP framework!

I was searching for a way to expand/collapse a row, when subgrid set to true, but not by clicking on the plus icon but using javascript.
On previous version following solution was suggested,

One possible solution (use the last version of jqGrid) to collapse all opened subgrids is:
var minuses = table.find(”img[src$=minus.gif]“,”#mygridid”).each(function() {
$(this).parents(”td”).eq(0).click();
});

I am not able to get it working for 3.6 version of grid.. any suggestion will be of great help..?

Hi

Are there still plans for a Java version down the road?

Looking forward to the new integration with ASP.NET MVC

I am using Grid as a Subgrid and I want to fire the expandSubgridRow event, I can get the IDs of each row using
ids = $(“#mygrid”).getDataIDs();

Now , I need to do $(“#mygrid”).expandSubgridRow(ids[0]) for each ID ;
Looks like there is some problem?

I have included jquery.jqGrid.js and grid.subgrid.js javascript files ,
Please Let me know if I am doing something wrong..

Hi Tony,
maybe i found a bug: the type of response in ” afterSubmit : function(response, postdata} ” can not be aotomatically decided (as xml/html/json..) when delRow and return JSON from server.

PHP:
…
$out = array(state=>1, msg=>’some msg’);
echo json_encode( $out );
—————————

JS:
…
.navGrid(‘#ptreeGrid’,
　{view: true, edit: false, add: true, del: true, search: false, refresh: true},
　{reloadAfterSubmit: false, jqModal: false, closeOnEscape: true,
　　　afterSubmit : function(r, postdata) {
　　　　　alert(r.responseText.toSource()); // alert string
　　　　　var data = eval(‘(‘ + r.responseText + ‘)’ ); // make json object
　　　　　alert(data.msg);
　　　　　return [data.state, data.msg, 0];
　　　}
　　}, // del options

———————————
Can i defined a jquery ajax dataType such as :
　{reloadAfterSubmit: false, …., dataType : ‘JSON’, ….}
so i can directly use the response as:
　afterSubmit : function(r, postdata) {
　　　　　return [r.state, r.msg, 0];
　　　}

thanks~

@Alex – currently we are working on

– the Javascript client-side runtime (available, 3.6.1)
– PHP framework/plug-in for codeless integration of jqGrid (Beta expected December)
– ASP.NET WebForms component (available, 3.6.1 – http://www.trirand.net/demo.aspx
– ASP.NET MVC component (Beta expected December)

While we have discussed Java options (GWT mainly), we still have not done anything specific in this direction. Frankly speaking, our Java skills (at least the skills of guys on the team) are not stellar, so we might need help from other people joining the team if we want to make this happen.

It would be nice if certain rows & columns could be “freezed” 🙂

Yes, in terms of functionality, here is what seems to be most desired:

1) Grouping
2) Freezed columns (sometimes referred to as “pinned”)
3) Cell/Row merging (essentially, a cell that could span several rows/columns)
4) Exporting to Excel, PDF, RTF, HTML, etc

We will be scheduling some of these for our next releases. Since all of them are very major features, they will probably appear one by one. You can vote which feature you want most here (and of course, suggest other features if you wish)

Rumen Stankov,

That was fast! Yes, all of them are major features. Here’s my priority:

1) Freezed Columns (and if possible, Freezed Rows as well!)
2) Grouping
3) Export to PDF, Excel, etc.
4) Cell/Row Merging

Thanks again!

Wonderful surprise, we are waiting the PHP framework!!!

This is great news. PHP and JQGrid would be great. One thing though, multi-grid with PHP right now does not support multi-row deletion

Hi,
I think that something about this grid is missing:

1- Clear Demos and Example in PHP Separate by Version and Download-able
2- Clear and Download-able Documents Api as PDF For latest version
3- Download-able version : Developer source and Compressed and packed version of file that can download
4- A Page Contain all these above sections and links that do not confuse peoples

Thanks

Very nice!!!!
Can I submit with POST method all data in the grid with some indication which data are new, changed and deleted? In one word, can whole grid be a form?

@Tony, @Rumen,

Our enhancement priorities would be:

1) Some kind of grid state mechanism which would allow a user to return to a page and have previous columns, column order, etc. saved so they didn’t have to go through setting it up again.

2) A Tooltip mechanism on the Header which would allow a user to hover over column name and have a pop-up with documentation/help/links/images, etc.

3) Fix UI Tabs bug where empty “Loading…” box remains after a grid load on Tabs 2, 3, 4, etc.

Dick

@Dick, #3
For the loading message to work the tab DIV must not be hidden. Comment out the “.ui-tabs .ui-tabs-hide” line in the jQuery UI CSS file. Instead move the DIV off the screen:

/*.ui-tabs .ui-tabs-hide { display: none !important; }*/
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}

@Tony, @Rumen,

Another priority enhancement would be a synchronization/priority mechanism when using multiple grids. For example, when using loadComplete with setSelection & onSelectRow, the secondary or tertiary grid might still be doing the initial load when the setSelection fires, so the onSelectRow fails.

@boxenford,

Thanks for the tip!

Hint: for an update in next version

file: grid.locale-pt-br.js

odata : [‘igual’, ‘não é igual’, ‘menor’, ‘menor ou igual’,’maior’,’maior ou igual’, ‘começar com’,’não começar com’,’estar em’,’não estar em’,’terminar com’,’não terminar com’,’contenha’,’não contenha’],

Hi,

I suggest you add an edittype “file” for the next version I think it’s useful to upload files.

Thanks

Hello,
I am using jQgrid with ASP.NET MVC. I am having a couple of problems.
I would like to draw the grid when the DOM is created, but I would like to load the data after, when I select a TAB in a tab page, for example.
I can’t find any example for that.
So, I am building and loading the grid when I select that tab.
I am using an custom navigation bar:

(“#AttachmentsGrid”).navGrid(‘#AttachmentsPager’, { edit: false, add: true, del: true, search: false });

After a couple of selections on the TAB I can see the buttons of the nav bar are doubled.

Another problem, only in one situation, is the first row selection.
I can’t select any other row except the first. I have other grids which work great. This one doesn’t allow me a proper selection.

Best regards

Alberto

@Rumen Stankov
A little late here (I have been busy coding). I code primarily in Java. If you are looking for help on a Java version as Alex mentioned, let me know and I’ll try to contribute. Contact me offline.

Pete

Hi,
New RTL feature have problem with Firefox browser.(show table with not normal schema)
Please check it.
Thanks.

Hi Tony,
Sorry for bad english!
check below image please:

@mojtaba
I check Firefox settings and solve my problem.
Thanks Tony

Hello,

I download demo files(3.6.1) from download page but it doesn’t work in my system. I create db and inserted records.

But my main problem is that I try to use 3.6.1. After create the files and config it, it’s show the result, truly. So I tried to adding the additional possible facilities, everything is good but I can’t active navigator! It hasn’t any problem in IE and also firebug but it doesn’t show anything.

this is my code:

jQuery(document).ready(function(){
jQuery(“#list”).jqGrid({
direction: “rtl”,
recordpos : “left”,
url:’example.php’,
datatype: ‘xml’,
mtype: ‘GET’,
colNames:[‘ROW’,’DATE’, ‘AMOUNT’,’TAX’,’TOTAL’,’COMM’],
colModel :[
{name:’invid’, index:’invid’, width:55, editable:true},
{name:’invdate’, index:’invdate’, width:90, editable:true},
{name:’amount’, index:’amount’, width:80, align:’right’, editable:true},
{name:’tax’, index:’tax’, width:80, align:’right’, editable:true},
{name:’total’, index:’total’, width:80, align:’right’, editable:true},
{name:’note’, index:’note’, width:150, sortable:false, editable:true}
],
pager: ‘#pager’,
rowNum:10,
rowList:[10,20,30],
sortname: ‘invid’,
sortorder: ‘asc’,
viewrecords: true,
multiselect: true,
height: “100%”,
width: 800,
editurl:”someurl.php”,
caption: ‘myTest’
});
});

jQuery(“#list”).jqGrid(‘navGrid’,’#pager’,{edit:false,add:true,del:false});

jQuery(“#list”).filterToolbar(); // This one doesn’t work, too!

Also I used another way to call navGrid:

}).navGrid(“#pager”,{edit:false,add:true,del:false});

Please help me to solve it. I’m confused!

Regards,

I would like to help debug the MVC version !!!! 🙂

@Hamed
I have met the same problem too.
I am using version 3.6.2.
Any further informations?

I’am a developer from China ,when I use the jqgrid ,I found out that there is a little problem at the sorting of Chinese characters,importing the “grid.locale-cn.js”doesn’t help.
Then I read the code in “grid.base.js”,at line 892:
rows.sort(function(a, b) {
if (a.sortKey b.sortKey) {return newDir;}
return 0;
});
I think that may cause the problem.
so i change the code to:
if(typeof a.sortKey === ‘string’){
if (a.sortKey.localeCompare(b.sortKey)0) {return newDir;}
return 0;
}
if (a.sortKey b.sortKey) {return newDir;}
return 0;
It seem to fix the sorting of Chinese characters,but I can not sure will that couse another problem o not, I hope for some answer form you .

PS:sorry about the my poor English,I wish I had paied more attention at hight school,but I hope you could get the point.

Sorry about the code up there,the blog system doesn’t convert the key word like “&lt” ,the code should be like this:
rows.sort(function(a, b) {
if(typeof a.sortKey === ‘string’){
if (a.sortKey.localeCompare(b.sortKey)&lt 0) {return -newDir;}
if (a.sortKey.localeCompare(b.sortKey)&gt 0) {return newDir;}
return 0;
}
if (a.sortKey &lt b.sortKey) {return -newDir;}
if (a.sortKey &gt b.sortKey) {return newDir;}
return 0;
});

Hi I have a question, is there a direct way to import CSV file into jqGrid? or do I have to throw this back as a JSON object or JS Array?

Hi,

First of all – wow and thank you for a great library! It’s looking fantastic, and I am currently migrating an old grid we used to use your library.

For some reason though, I’m not getting it to work, and I hope you might take a look at the followin.

My javascript code is as follows:
——————
jQuery(“#grdListAllLedgerAccount0_jqdg”).jqGrid(
{
url:’jsonserver.php?JQDG=1&_rw=3&_l=en&_c=LedgerAccount&_a=adminManage&_s=0&&AJAXGRID=grdListAllLedgerAccount0′,
datatype: “json”,
autowidth: true,
height: “auto”,
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} ],
multiselect: true,
caption: ” Ledger Accounts”,
rowNum:10
}
);
—————————-

The PHP script – I believe correctly – returns the following JSON:

—————————-
{“page”:1,”total”:2,”records”:13,”rows”:[{“id”:1,”invdate”:”2007-10-1″,”name”:”Test name 1″,”note”:”Test note 1″,”amount”:1,”tax”:0.21,”total”:1.21},{“id”:2,”invdate”:”2007-10-2″,”name”:”Test name 2″,”note”:”Test note 2″,”amount”:4,”tax”:0.84,”total”:4.84},{“id”:3,”invdate”:”2007-10-3″,”name”:”Test name 3″,”note”:”Test note 3″,”amount”:9,”tax”:1.89,”total”:10.89},{“id”:4,”invdate”:”2007-10-4″,”name”:”Test name 4″,”note”:”Test note 4″,”amount”:16,”tax”:3.36,”total”:19.36},{“id”:5,”invdate”:”2007-10-5″,”name”:”Test name 5″,”note”:”Test note 5″,”amount”:25,”tax”:5.25,”total”:30.25},{“id”:6,”invdate”:”2007-10-6″,”name”:”Test name 6″,”note”:”Test note 6″,”amount”:36,”tax”:7.56,”total”:43.56},{“id”:7,”invdate”:”2007-10-7″,”name”:”Test name 7″,”note”:”Test note 7″,”amount”:49,”tax”:10.29,”total”:59.29},{“id”:8,”invdate”:”2007-10-8″,”name”:”Test name 8″,”note”:”Test note 8″,”amount”:64,”tax”:13.44,”total”:77.44},{“id”:9,”invdate”:”2007-10-9″,”name”:”Test name 9″,”note”:”Test note 9″,”amount”:81,”tax”:17.01,”total”:98.01},{“id”:10,”invdate”:”2007-10-10″,”name”:”Test name 10″,”note”:”Test note 10″,”amount”:100,”tax”:21,”total”:121},{“id”:11,”invdate”:”2007-10-11″,”name”:”Test name 11″,”note”:”Test note 11″,”amount”:121,”tax”:25.41,”total”:146.41},{“id”:12,”invdate”:”2007-10-12″,”name”:”Test name 12″,”note”:”Test note 12″,”amount”:144,”tax”:30.24,”total”:174.24},{“id”:13,”invdate”:”2007-10-13″,”name”:”Test name 13″,”note”:”Test note 13″,”amount”:169,”tax”:35.49,”total”:204.49}]}

———————–

When the above code is ran, however, javascript is returning the following error in my firebug:

cur is undefined

anonymous(Object page=1 total=2 records=13 rows=[13], div.ui-jqgrid-bdiv, Object name=rcnt value=0, Object name=more value=false, Object name=adjust value=0)jquery.j…id.min.js (regel 10)
anonymous(XMLHttpRequest readyState=4 status=200 statusText=OK, “success”)jquery.j…id.min.js (regel 10)
L()jquery.min.js (regel 19)
anonymous(8)jquery.min.js (regel 19)
[Break on this error] (function($){$.jgrid=$.jgrid||{};$.exten…$t.p.id).resizable(opts)})}})})(jQuery);

Am I overlooking something here?

Thanks for a quick look at this!!! And once again – WOW and THANKS! 🙂

hi to all,

im new to jqgrid gridview. but really interested in it. i have spent 3 days working on this. im using jqgrid with codeigniter MVC, i’ve been able to show all the data in my table but i cant get it work the add, edit, save & even delete the rows. grr.

very frustrated at this, i really want to used this grid in my future projects. btw- im using the datatype: json

here is my code for cell editing but wont work. Used firebug for debugging errors but this time no errors showed in the firebug but can edit the cell :((.

please help

my script.js
var lastsel;
$(“#listFlex”).jqGrid({
url: root + mod + ‘/listview2?q=2′,
datatype: “json”,
colNames:[”,’role_code’,’role_description’],
colModel:[
{name:’role_id’,index:’role_id’, width:50, align:”center”,hidden:true},
{name:’role_code’,index:’role_code’, width:80},
{name:’role_desc’,index:’role_desc’, width:100,align:”left”}
],
rowNum:10,
rowList:[10,20,30],
pager: ‘#pager2’,
sortname: ‘role_id’,
viewrecords: true,
sortorder: “desc”,
onSelectRow: function(id){
if(id && id!==lastsel){
jQuery(‘#listFlex’).jqGrid(‘restoreRow’,lastsel);
jQuery(‘#listFlex’).jqGrid(‘editRow’,id,true);
lastsel=id;
}
},
autowidth: true,
height: “200”,
viewrecords: true,
sortorder: “desc”,
caption:”JSON Example”,
editurl:”sec_role”
}); //jQuery(“#listFlex”).jqGrid(‘navGrid’,’#pager2′,{edit:true,add:true,del:true});

jQuery(“#listFlex”).jqGrid(‘navGrid’,”#pager2″,{edit:false,add:false,del:false});

my view.php

Hi Tony.
Litle code for extend jqGrid afterInsertRow.
If more than one jqgrid on page, rows are have duplicated id’s.

On line 178 add line:
row_pref:”,

On line 613 (addJSONData function) change
rowData[ari++] = “<tr id=\""+idr +"\" role=\"row\"
to
rowData[ari++] = "<tr id=\""+ ts.p.row_pref+idr +"\" role=\"row\"

On line 653 change
if(afterInsRow) {ts.p.afterInsertRow(idr,rd,cur);}
to
if(afterInsRow) {ts.p.afterInsertRow(ts.p.row_pref+idr,rd,cur);}

I would like the top and bottom toolbars to be symmetric. Anything that goes on the bottom should be as easily put on the top. Many times (on long grids) users don’t want to scroll all the way to the bottom the get to the controls

Hi,today I found another problem
my datatype is clientside json,and I didn’t use the pager of jqGrid,
and I set the rownumbers true .
when I sort with the other column,and the order of rownumber also changed.
then I found out that the code whitch reorder the ‘rn’ column was written in the founction ‘updatepager’,and if that function not be called ,then the rownumber will be reorder just like another column.
So I put the code
‘$(“td.jqgrid-rownum”,ts.rows).each(function(i){$(this).html(i);});’
right next to the palace where the function ‘sortArrayData’ be called.
It seems to work fine.

Hi Tony,
jqGrid v3.62
when use treegrid,it seemd “rowNum ” be set to default 20. so when more than 20 rows date came from server, only 20 rows will be shown.
conf:

$(‘#treeGrid’).jqGrid({
　　treeGrid: true,
　　url: ‘manage_column_aj.php?aj=10’,
　　datatype: ‘json’,
　　treeModel : ‘nested’,
　　mtype: ‘POST’,
　　colNames:[…],
　　colModel:[…],
　　ExpandColumn : ‘name’,
　　ExpandColClick: true,
　　autowidth: true,
　　viewrecords: true,
　　height: ‘auto’,
　　pager : $(‘#ptreeGrid’),
　　imgpath: gridimgpath,
….
}

if use “rowNum: 100” or “rowNum: -1” then ok.

Hi,

I realize that starting from v3.5 the loader is no longer used and in its place there is a download manager that packages up all the needed modules. However, the wiki documentation still makes reference to the loader and suggests it for development installs. However, users should be made aware of potential issues when using the loader on some browsers (IE for one). The loader loads the script modules asynchronously by using the Script DOM Element approach. On some browsers like IE this may result in scripts potentially loading out of order and result in errors when dependencies are broken. Furthermore, there is no guarantee that the modules will have finished loading before onload event fires. If your development is done using Firefox then you should be ok; otherwise, you could look at using the document.write approach instead to dynamically add the needed jqGrid modules.

Hi, are you considering adding pager functionality to treeGrid?
Thanks.

Hi,

I have a problem with grid resizing using v3.6.2 (as well as in 3.5). I populate a grid with data (30 rows), and then I trigger a reloadGrid using a javasript function which are setting some parameters on the url. The server returns no rows, but the grid is NOT getting resized as I would expect. It still is taking up 30 rows of space, but no data is displayed. This happens only when no rows are returned from the server.

The strange thing is that in another page of my app, the grid is behving correctly when returning no rows.

My code:

$(‘#list’).jqGrid({
url: ‘/mycontroller/GridData’,
datatype: ‘local’,
mtype: ‘POST’,
caption: ‘Monthly summary’,
colNames: [‘Id’, ‘Date’, ‘Summary’],
colModel: [
{ name: ‘id’, index: ‘Id’, width: 1, hidden: true, key: true },
{ name: ‘day’, index: ‘Day’, width: 95, align: ‘right’ },
{ name: ‘summary’, index: ‘Summary’, width: 120, align: ‘right’ } ],
sortname: ‘day’,
sortorder: ‘asc’,
cellLayout: 6,
height: ‘auto’,
rowNum: 32,
beforeRequest: function() { resetAjaxError(); },
loadError: function(xhr, st, err) {showAjaxError(‘Error loading data.’);},
pager: $(‘#pager’)
});

function reloadGrid(cid, period) {
$(‘#list’).setGridParam({
datatype: ‘json’,
url: ‘/mycontroller/GridData?cid=’ + cid + ‘&period=’ + period,
page: 1
}).trigger(‘reloadGrid’);
}

Hi,

I have a question on request/grid locking while a request is in progress. Lets say I have grid with a ton of rows. I click sort on one of the columns and at the same time I click to change the page. How does the grid handle request locking? Is there a way I can disable the page links until the sort request is complete?

jQuery(“#list”).jqGrid({
url: ”,
datatype: ‘json’,
mtype: ‘GET’,
loadui: ‘block’,
multiselect: false,
colNames: [‘Id’, ‘Creada’, ‘Titulo’, ‘Opciones’],
colModel: [
{ index: ‘Id’, hidden: true, search: false },
{ index: ‘Creada’, width: 50, align: ‘left’, searchoptions: { dataInit: datePick, sopt: [‘le’, ‘ge’, ‘eq’]} },
{ index: ‘Titulo’, width: 150, align: ‘left’, searchoptions: { sopt: [‘cn’]} },
{ index: ‘Opciones’, width: 50, formatter: formatOpciones, align: ‘center’, sortable: false, search: false }
],

pager: jQuery(‘#pager’),
rowNum: 8,
rowList: [8, 15, 20],
sortname: ‘Creada’,
sortorder: ‘desc’,
viewrecords: true,
imgpath: ‘/content/cupertino/images’,
height: 240,
width: 867,
hidegrid: false
//});
}).navGrid(jQuery(‘#pager’), { search: true, edit: false, add: false, del: false, searchtext: “Buscar” },
{}, // default settings for edit
{}, // default settings for add
{}, // delete instead that del:false we need this
{closeAfterSearch: false, drag: false, closeOnEscape: true }, // search options
{} /* view parameters*/

);

});

@Alberto B
Had the same problem and managed to resolve it. Be sure to set the id attribute of the rows you are returning.