jQuery Grid Plugin – jqGrid

Looks great,

Really like the column reordering and dragging rows from one grid to another.

Thanks for all the hard work.

The improvements made to the grid in this release are impressive!!
Keep up the good work!

Looking good but the ‘Loading data while scrolling’ could do with the numbers updating while scrolling rather than waiting for the new data to load and using a scroll wheel causes the starting number not to change.

Really good, the drag and drop my favorite, i hope the release of 3.6.
Tnanks from Mexico.

Awesome. I thought those features were already in current release, glad they are coming anyway though. Great work guys!

Hey guys, great work as always. Will the drag and drop to reorder columns return the new position and/or have associated events?

If there’re few rows and the grid height is large, then there will be a large space between the rows(data) and the footer bar. Can we have the feature to auto resize the grid to fit the rows when the rows is few?

Live scrolling is awesome!

Thanks for RTL support.

Hi Tony,

First of all, congratulations on the new release.

I have been using jqgrid 3.4.1 in my project. The way I designed the project is as follows:
1. Get all data as an XML string at once
2. Load into multiple grid on the same UI

So, I used the local datatype:
datatype: ‘xmlstring’

Since, the data became huge with time, the performance deteriorated. And since, there was no pagination support for local datatype, I decided to add one. I hope you find this useful and it can be easily added into jqGrid 3.6 with some simple changes. Since I did not have a chance to look at jqGrid versions post 3.4.1, I am providing the changes I made in 3.4.1 to support simple pagination that worked for me.

Here are the changes I made:
1. Added, following grid parameters to each grid where pagination was to be supported:

pagination: {startIndex: 0, maxRecordsPerPage: 10}

2. Updated function addXmlData in grid.base.js

var addXmlData = function addXmlData (xml,t, rcnt) {
if(xml) { var fpos = ts.p.treeANode || 0; rcnt=rcnt ||0; if(fpos===0 && rcnt===0) {$(“tbody tr:gt(0)”, t).remove();} } else { return; }
var v,row,gi=0,si=0,cbid,idn, getId,f=[],rd =[],cn=(ts.p.altRows === true) ? ‘alt’:”;
if(!ts.p.xmlReader.repeatitems) {f = reader(“xml”);}
if( ts.p.keyIndex===false) {
idn = ts.p.xmlReader.id;
if( idn.indexOf(“[“) === -1 ) {
getId = function( trow, k) {return $(idn,trow).text() || k;};
}
else {
getId = function( trow, k) {return trow.getAttribute(idn.replace(/[\[\]]/g,””)) || k;};
}
} else {
getId = function(trow) { return (f.length – 1 >= ts.p.keyIndex) ? $(f[ts.p.keyIndex],trow).text() : $(ts.p.xmlReader.cell+”:eq(“+ts.p.keyIndex+”)”,trow).text(); };
}
$(ts.p.xmlReader.page,xml).each(function() {ts.p.page = this.textContent || this.text ; });
$(ts.p.xmlReader.total,xml).each(function() {ts.p.lastpage = this.textContent || this.text ; } );
$(ts.p.xmlReader.records,xml).each(function() {ts.p.records = this.textContent || this.text ; } );
$(ts.p.xmlReader.userdata,xml).each(function() {ts.p.userData[this.getAttribute(“name”)]=this.textContent || this.text;});
$(ts.p.xmlReader.root+” “+ts.p.xmlReader.row,xml).each( function( j ) {
if(typeof ts.p.pagination != “undefined”) {
if(j=(ts.p.pagination.startIndex + ts.p.pagination.maxRecordsPerPage)) return false;
}
row = document.createElement(“tr”);
row.id = getId(this,j+1);

if(ts.p.multiselect) {
addMulti(t,row);
gi = 1;
}
if (ts.p.subGrid) {
try {$(ts).addSubGrid(t,row,gi,this);} catch (e){}
si= 1;
}
if(ts.p.xmlReader.repeatitems===true){
$(ts.p.xmlReader.cell,this).each( function (i) {
v = this.textContent || this.text;
addCell(t,row,v,i+gi+si, ‘false’);
rd[ts.p.colModel[i+gi+si].name] = v;
});
} else {
for(var i = 0; i = $t.p.pagination.maxRecordsPerPage) {
$t.p.pagination.startIndex = $t.p.pagination.startIndex – $t.p.pagination.maxRecordsPerPage;
}
else {
$t.p.pagination.startIndex = 0;
}
$($t).trigger(‘reloadGrid’);
},
showNextPage: function() {
$t = this[0];
if ( !$t.grid ) { return; }
$t.p.pagination.startIndex = $t.p.pagination.startIndex + $t.p.pagination.maxRecordsPerPage;
$($t).trigger(‘reloadGrid’);
}

4. Added the following to show pagination controls for each grid.

$(“#t_SampleGrid”).append(“”);

$(“#t_SampleGrid”).append(“”);

Regards
Sumit

All the new features are cool and great! Thank you 🙂

rtl only work with IE not chrome or firefox thanks

@resa
As described short in the RTL example RTL is supported fully in FF and IE.
The default settings in FireFox does not allow to fully use the RTL. In order to see the result
1. In the url bar in FireFox type about:config
2. In the Find bar type layout.scrollbar.side
3. Double click on it and change the value from 0 to 1
Enjoy
Tony

Hi Tony – I love the new features in 3.6 & the overall flexibility of your entire project. Excellent Work! Before I found this: I was piecing together widgets, modules, & plug-ins for validators, shadowboxes, drag&drop, calendars, etc – I even started building my own tools to integrate them all because their API’s sucked! – you have EVERYTHING! AND considering the complexity, the API is remarkably clean and intuitively designed. jqGrid is truly a work of art!
Again: Awesome work!

I am however having a few issues with the 3.6b. I downloaded the most up-to-date (10/28) js from your site. I think you may be the only person on the planet who can help me…

#1: When I submit a form (in 3.6) it dies before it ever gets to the server — firebug shows an error in the try/catch on line 424 of grid.common.js in function checkValues() for every element in the form array… I can’t figure out what I’m doing wrong.

#2: Column sorts don’t seem to work, for me – maybe #1 & #2 are related??? I think my colModel is OK. I’m using a left outer join in my SELECT stmt that feeds the grid – does that mean my index values should be like “a.col1, b.col1, a.col2,… etc?” I can change the order for the initial sortCol by clicking on the header – but only once… then it dies w/o errors.

#3: My datePicker shows up as a GIANT div behind the editForm. How can I get it inside the formEditor? I’m assuming its binding to the grid element & not the form element, but I can’t really tell…

#4: What’s the easiest way to get a response from the server back to the app: xhr? loadError? afterComplete? fnCustom()? I’ve tried several ways & couldn’t find it anywhere in the documentation – if the app is looking for something specific back from the server or what..

#5 altRows wasn’t working for me, either & I hot-fixed with the css hack you posted, but it messes up the selectedRow highlight – especially in IE. I tried to play with transparency and then just gave up figuring you’d work out the css for the final release…

There are a couple other minor annoyances you can probably see in my comments near text saying “!HELP!” But the biggest ones are #1 & #2 listed above. My test page is http://distribution.mixtapemonster.com/affiliates/wizards/admin/testgrid.html

It all seems pretty straight forward. But I could use a little nudge in the right direction… Overall I think I have done a very thorough test of your beta. I’m working on some builder tools to enhance the frameworks for cms_builder & Social Engine but once I get past these issues, I’ll probably work on porting it to Drupal, as well..

Thanks in advance.

Joe Negron (LOGIC Wizards – NYC)

@Joe Negron (LOGIC Wizards – NYC)
I think part of my problem is the UPDATE via a LEFT OUTER JOIN – not quite sure how that works if one or the other tables has no corresponding record. A SELECT (I think) would just leave those fields null but an UPDATE? I think it would just bomb So, #1 may not be a jqGrid problem or even jQuery but SQL… and only when updating orphaned records… but since I’m not getting any errors back from AJAX – I’m kinda blind to that fact. Does That make sense?

It maybe be cleaner with some type of (exists? UPDATE:INSERT) logic on the back end for BOTH tables. That would be a lot more coding but I think it needs to be done… As luck would have it, I can’t even test that theory (right now) b/c they’re doing some upgrade to the db servers. Luckily they said “it’ll only be down for 30 minutes” – but that was over an hour ago. 😉

Hi, Love the improvements. I’ll check later today about the “full control” of the ajax requests ;-). I had a post in 3.5 asking to be able to send the data in a serialize way.

Today, i would like to briefly talk about the custom event that we can bind our custom functions to. Let’s take for example the onClickButton of a custom button that we added to the navGrid using the navButtonAdd function.

The issue is the following: when ever my event is triggered, there is no way for me to know on which grid i’m working on.

After looking at the code, in formedit around line 1572 build of Oct 29th. I’ve notice that the click event is binded to the button using .click(fn) method. Which is not bad at all !!! The only thing is that you can’t pass argument that way in JQuery.

Proposed Solution:
Simply use the .bind(type,[data],fn) and pass the grid (this) in this case as the data. Then in the p.onClickButton() pass the e arguments like this p.onClickButton(e). In our custom function definition we can then pass e or e.data and be able to “retrieve” the grid information that we might want.

I believe that this simple approach should be used to handle, when possible, any similar type of custom event. And allow us to know on which grid we need to work on.

Thanks for your attention

Sébastien dubé

When do you guys think 3.6 will come out of beta?

@Sébastien,
Thanks. Upadate is available in GitHub, not in a way that you provide, but the result is the same.
Thanks
Tony

hi! great work… a fan of yours…!!
in the documentation, you have mentioned that there are 3-4 themes, but after downloading the .zip file, i saw there is only one theme. presently, i am using jQuery custom themes in my web site. so, how can i change jqGrids’ theme?? so that my site looks even? ya i know by changing the css and other related files manually.. but is there any other easy way to do it??
thank you in advance.

my datePicker shown under the editForm, рow can I get it inside the formEditor?
example http://mkvl.reha.lviv.ua/jqgrid/
Thanks

Hi Tony, thanks a lot 4 for ur ultimate work!! Hats Off…

well, I switched from 3.5 to 3.6(beta),

I am not able to use “grid[0].toggleToolbar()” function from in 3.6 but it was working well in 3.5.

.jqGrid(‘navButtonAdd’,’#gridpgr’,{
caption:””,
title:”Toggle Search Toolbar”,
buttonicon :’ui-icon-search’,
onClickButton:function(){
$(“#tblgrid”).jqGrid(‘toggleToolbar’); // <—— Is it right or something else?? Its not working 🙁
//grid[0].toggleToolbar(); <—- PERVIOUS WAY
}

});
Below is my script,

$(document).ready(function(){
var grid;

$.extend(jQuery.jgrid.defaults,{
loadError : function(xhr,st,err) {
$(‘#errorBox’).show();
$(“#rsperror”).html(“Type: “+st+”; Response: “+ xhr.status + ” “+xhr.statusText);

},
loadComplete: function(){
$(‘#errorBox’).hide();
}
});

$(“#tblgrid”).jqGridImport({
impurl: “—-someURL—-“,

imptype: “json”,
mtype: “GET”,
impData : {
pager: ‘gridpgr’,
url:””—-someURL—-“”
},
jsonGrid: {
config: “config”
},
importComplete : function(){
var grid = $(“#tblgrid”).jqGrid(‘navGrid’,’#gridpgr’,{add:true, edit:true, view:false, search:false, refresh:false},
{savekey: [true,13], navkeys: [true,38,40], jqModal:false, closeOnEscape:true, bottominfo:”Fields marked with (*) are required”}, // edit options
{savekey: [true,13], navkeys: [true,38,40],jqModal:false, closeOnEscape:true,bottominfo:”Fields marked with (*) are required”}, // add options
{reloadAfterSubmit:false,jqModal:false, closeOnEscape:true}, // del options
{closeOnEscape:true}, // search options
{navkeys: [true,38,40], height:250,jqModal:false,closeOnEscape:true} // view options
).jqGrid(‘navButtonAdd’,’#gridpgr’,{
caption:””,
title:”Toggle Search Toolbar”,
buttonicon :’ui-icon-search’,
onClickButton:function(){
$(“#tblgrid”).jqGrid(‘toggleToolbar’); // <—— NOT WORKING!!
//grid[0].toggleToolbar(); <—- PERVIOUS WAY
}
});
}
});

});

Let me explain above code in brief:

-> To check server errors i hv defined #errorBox div and loadComplete,loadError in jQuery.jgrid.defaults.

-> I am using Zend Framework so in order to avoid code repetition, I am importing common settings from a url.

->I am using “Integrated Search Toolbar” so I used “grid[0].toggleToolbar()” but now in 3.6(beta) its not working!!

Finally,
-> I am requesting for troubleshoot
-> Is it a right approach or code can be optimized more??

@Tony,

I was testing multipleSearch today in 3.5.3 and noticed that the last data value always comes through as “undefined”:

“{\”groupOp\”:\”AND\”,\”rules\”:[{\”field\”:\”STOCK_NUMBER\”,\”op\”:\”eq\”,\”data\”:\”1730013R\”},{\”field\”:\”PART_NUMBER\”,\”op\”:\”eq\”,\”data\”:\”undefined\”}]}”

I hope you caught that and fixed it in 3.6.

Best regards!

Hi Tony.
Maybe you add option for column – autowidth.
For example if i not set column width, width calculated automatic(like in html table).
Сделать так, чтобы если не указать width, то jqgrid вела себя как table(т.е выставляла width колумна как (width_jqgrid-width_columns)).

Hi, Tonny!

Could you place sources from http://github.com/tonytomov/jqGrid/tree/jqgrid36 to http://www.trirand.com/blog/?page_id=6 (download page). Download from github.com give often back an old version of jqgrid. Currently, for example, download from http://github.com/tonytomov/jqGrid/tree/jqgrid36 gives back tonytomov-jqGrid-535781d.zip with has jqgrid from September 28th, 2009. Sometime (mostly if you make some changes on github.com) the sources loaded from http://github.com has not all files. A lot of different problems very often. It would be fine the have a stably way from download of the last jqgrid36 version.

Thanks

Hi Tony, I am sorry I didn’t read updated documentation. My problem resolved.
Infact I needed “onchange” event which is discussed by David Hansen.

thanks a lot….

Hello All,

The today release for the 3.6 version of jqGrid is changed for November 8, 2009.

The reasons are mostley connected with some problems in GitHub. I hope that they will be corrected to this date.

I have published a 3.6 RC which can be downloaded from the same place of the original blog post for 3.6 beta again with the demo files. Also the zip contain Changes.txt file with all fixes, news and changes.

The documentation in the wiki is updated to this release.

I think that this is very impresive – the docs are redy before the release Wink

Best Regards

Tony

Features 3.6 are Great like Dragndrop etc.

Joe Negron (LOGIC Wizards – NYC) :
@Joe Negron (LOGIC Wizards – NYC)
I think part of my problem is the UPDATE via a LEFT OUTER JOIN – not quite sure how that works if one or the other tables has no corresponding record. A SELECT (I think) would just leave those fields null but an UPDATE? I think it would just bomb So, #1 may not be a jqGrid problem or even jQuery but SQL… and only when updating orphaned records… but since I’m not getting any errors back from AJAX – I’m kinda blind to that fact. Does That make sense?
It maybe be cleaner with some type of (exists? UPDATE:INSERT) logic on the back end for BOTH tables. That would be a lot more coding but I think it needs to be done… As luck would have it, I can’t even test that theory (right now) b/c they’re doing some upgrade to the db servers.

outer join or inner join can NOT be used in UPDATE statement, only in SELECT statement. that’s: you can NOT UPDATE/INSERT more than ONE table (but can have SELECT sub-query statement with outer/inner join).

Hi Tony,
I am impressed about your job. Well done!!
Just one question.
If I want to use the last github release, what do I have to do?
I have seen the package contains files non compressed in one library.
Is there a way to build a minified/compressed version?

Thank your very much

Hello,
In principle yes you can build the min version if you have ant installed. just look at build.xml.
Regards
Tony
P.S. There is a little error in build, which I will correct right now – i.e. the charset should be not ANSI, but utf-8

hi Tony
i cant use custom validation
because i want set my validation error from service
how can i?

Hi Tony…I am new to jquery and have to use grids…Grids are inside the portlets and i want to have a scrollbar for the grid if its larger than its container i.e portlet.please help 🙂

Thanks

new2jquery :
Hi Tony…I want to have a scrollbar for the grid if its larger than its container i.e portlet.please help
Thanks

Hi,

I am a new bee to JGrid and im using 3.6 beta version. I have developed the application using the same and in which i am using tool bar search with drop down options in it. It works fine when i set loadOnce : true but i dont want in that way i want search to work from another aspx page. Can you please help me out to resolve the issue

Please post an example using php component and custom validation (custom_func)

Hi All,
I have successfully developed and replaced grid view of the existing application with JqGrid.Except the tool bar search functionality i.e. I dont want the user to Enter some Spl char and search instead i wanna do validation so that no spl characters are allowed to search in tool bar. I have used beforeSeearch: function() but its not getting fired up. Can u please help me out to perform the same.Thanks in advance