jQuery Grid Plugin – jqGrid

Hi Tony,

thank you for your excellent work.

When changing from JQGrid 3.4 to 3.5beta, my Grid content is always displayed with class=’ui-state-error’. In JQGrid 3.4 content was shown correct. Is this a bug, or an error in my code?

[code]

besser wäre timestamp1970

if (user_id == ” && db_day == ”) return false

_gridUrl = ‘files/ajax/reqDailyOutput.php?uid=’+user_id+’&db_day=’+db_day;
_datatype = “json”;

jQuery(“#dailyoutputTable”).setGridParam({url: _gridUrl, datatype: _datatype ,page:1}).trigger(“reloadGrid”);
}
//–>

[/code]

Hi Tony,

Great job on this widget! I’ve been using it extensively in my web application, but I have hit a road block and was wondering if you foresee any added flexibility for the developer in the near future regarding the html forms.
I am using ASP.NET MVC and ideally I would want to pass data from the html form to the controller (and back) using the ID of the object whose properties are displayed in the form, but I do not want that ID to be visible to the user at all. Does 3.5 have that capability already and I missed it? Right now, the html form seems to only pass strings in visible fields.
Is there a way to only use the Id of the object but use the DataModel to get the other properties and display them?

Thank you for your time and help,
Anita

@tony

Apologies for posting this twice, I have used “cellsubmit: ‘clientArray’”.

Question1 : How do I call now getChangedCells to access the group of cells edited, say suppose on click of a button.

All events like afterSaveCell, afterEditCell are on individual/single cells and not on a group of cells.

Question2: getChangedCells method doesn’t have any rows[] /cells[] as parameter. How to access the clientArray.

Any help is highly apreciated.

Many Thanks – Sumanta

Hi Anita,

Here’s a link that explains about using jqGrid with ASP.NET MVC
http://blogs.teamb.com/craigstuntz/2009/04/14/38200/

I am trying to use the 3.5 BETA version. Would you please let me know if I can download the demo files of 3.5 beta to start with.

Hi Tony,
I’m new to JqGrid and would like to know is it possible to decide whether a particular cell editable at run time?

Say I have a column with editable = false (in general not editable), but if some value from the same row hits a condition, I will allow the cell to be editable.

Can it be done in current release? or is there workaround? currently I have disabled the column, put the checking to onSelectCell and if i want to allow users to edit, i just prompt an popup dialog asking for new value…. not good idea i know..

Hi @all,
i’m working on a new website for days now and would like to use this amazing jqgrid, if i could figure out on how to import xml tags for select cells…here is my ColModel and the xml part:

colModel:
colModel: [
{name: “id”, index: “id”, width: 25, editable: false, editoptions: { readonly: true }},
{name: “sid”, index: “sid”, width: 65, editable: false, edittype: “text”, editoptions: { readonly: true }},
{name: “ts”, index: “ts”, width: 125, editable: false, edittype: “text”, editoptions: { readonly: true }},
{name: “un”, index: “un”, width: 75, editable: true, edittype: “text”, editoptions: { size: 100 }},
{name: “status”, index: “status”, width: 35, editable: true, edittype: “text”, editoptions: { size: 10 }},
{name: “skill”, index: “skill”, width: 35, editable: true, edittype: “text”, editoptions: { size: 10 }},
{name: “amail”, index: “amail”, width: 65, editable: true, editoptions: { size: 100 }},
{name: “ut”, index: “ut”, width: 75, editable: true, edittype: “select”, editoptions: { size: 20 }},
{name: “pwf”, index: “pwf”, width: 55, editable: true, edittype: “text”, editoptions: { size: 10 }},
{name: “newpw”, index: “newpw”, width: 75, editable: false, edittype: “text”, editoptions: { readonly: true }},
{name: “newpwts”, index: “newpwts”, width: 125, editable: false, edittype: “text”, editoptions: { readonly: true }},
{name: “pwts”, index: “pwts”, width: 145, editable: false, edittype: “text”, editoptions: { readonly: true }}
]

XML:

−

1
2
11
−

1
…SessionID…
…Timestamp…
…User…
…Value1…
…Value2…
…Mail…
−

−

Option1
Option2
Option3
Option4

…Value…
…Value…
…Timestamp…
…Timestamp…

So what i would like to have is, that jqGrid loads the xml stuff correct into the colModel…everything works fine, except the part width the .

Is there someone, who could tell me, what i did wrong?

Thx…

Hi, your plugin is excellent, but i have some problem with another plugin, I use jqgrid 3.5 and also use jsoncookie, i dont know what is wrong, after trial and error i checked line by line, and the error just come from when i load source js from jqqrid. may be there’s a conflict with JSON Parse, coz firebug say this error

JSON.parse is not a function
anonymous(“waa”)jquery.j…cookie.js (line 21)
anonymous(“waa”, Object path=/ expires=10, Object path=/ expires=10)jquery.j…cookie.js (line 46)
ISTWeb_v.2()ISTWeb_v.2 (line 94)
[Break on this error] return cookieData ? JSON.parse(cookieData) : {};\n

i just set cookie and alert that cookie, that code work well if i dont load jqgrid but error happened when i load jqgrid.. Thanks

Hi Kris,

Thank you for your help.
I read all Craig Stuntz’s posts on jqGrid (prior to asking my question above) and none of them talks about using the default model binder in ASP.NET MVC. We don’t use LINQ in our implementation, and Craig does not go over form editing. As for validation, I’ve already had to change the source code in order to allow for explicit errors (that tell the user which object causes the error and why) when in edit mode.

Any help would be greatly appreciated.

Thank you,
Anita

I have found another fix for table CSS

ui.jqgrid.css (line:28)

.ui-jqgrid .ui-jqgrid-btable {
margin-left:0;
table-layout:fixed;
}

With the latest build from GitHub, sometimes .. my table body doesn’t align to the left (in Firefox 3.5), I used firebug to debug and found out that, adding margin-left:0;’ can solve the problem.

Hi! (again) 🙂

I have a bit of a silly question, actually. I’m pretty sure the support is in the application, but after searching high and low I just can’t find it.

[relevant bit]

What I want to do is being able to have a popup to edit a column, but that column should not be visible in the actual grid.

[/relevant bit]

I realize I could just do hideCol() on them individually, but it’d be so much prettier if I didn’t have to do that iteration.

Any hint would be appreciated!

Thanks 🙂

Never mind that last comment. I was silly and thought that the only documentation that existed were the actual demos. After finding the excellent documentation I see that it’s clearly there and very easy to find.

Again, good job 🙂

Hi Tony and everyone,

i’ve asked it also, but have got no answer.
In the last builds (10, 11 and the build from today) there’re a bug (?) with a multiboxonly property in a combination with multiselect.

I’ve defined
…
multiselect:true,
multiboxonly:true,
…

I can still select the row by clicking on it, the last selected row/rows is/are unselected at the moment.The selarrrow-array is reset and consist of only one just selected id.

Multiselect with checkboxes works fine.

Does anyone have the same problem?

Thank you

Best regards,

Pavel

@Pavel,
The purpose of multiboxonly is like yahoo mail. Try to click only on checkboxes (on multiselect column) and see what will be happen.

tony :
@Pavel,
The purpose of multiboxonly is like yahoo mail. Try to click only on checkboxes (on multiselect column) and see what will be happen.

If i click on the checkbox, I can select multiple rows, but if I click near the the box (but still in the column), I have all selected rows deselected and only one row selected. The same behavior is if I click on the row.

I have created example to show how to work with jqGrid and WCF service. here is the link http://ybbest.wordpress.com/2009/07/20/working-with-jqgrid-and-wcf-service/

I have add some functionaly.
Maybe for anybody will help.

I use tree grid and mani nav buttons.
Result: last buttons not displayed(croped).

In grid.base(line 72 – options) add
navParams: {left:true, center:true, right:true},

In grid.base(line 1296) add
$.each(ts.p.navParams,function(i,val) {
if (val)
navtblstr+=””;
});

Change (line 1300)
$(ts.p.pager).addClass(‘ui-jqgrid-pager corner-bottom’).append(XXXX)

XXXX=””+navtblstr+””

Now if i need only navbar i set center:false,right:false and all buttons are displayed.

navtblstr+=””;

Sory
navtblstr+=””;

Hi Tony,

I’m reposting this because I do not have an answer yet.
Great job on this widget! I’ve been using it extensively in my web application, but I have hit a road block and was wondering if you foresee any added flexibility for the developer in the near future regarding the html forms.
I am using ASP.NET MVC (and did read Craig Stuntz’s blog, but we don’t use LINQ, and he doesn’t cover HTML form edit) and ideally I would want to pass data from the html form to the controller (and back) using the ID of the object whose properties are displayed in the form, but I do not want that ID to be visible to the user at all. Does 3.5 have that capability already and I missed it? Right now, the html form seems to only pass strings in visible fields.
Is there a way to only use the Id of the object but use the DataModel to get the other properties and display them?

Thank you for your time and help,
Anita

Problem with firefox

Hi Tony,
First, thank you very much for a wonderful tool. I’m testing out this version and love the new features. However the problems I encounters in firefox (version 2.0.0.20) are:
1. data cells collapses (no width) until activating by mouse over. I think it’s the problem with ui script because I saw the same problem with the left nav on your demo site as well.
2. Sorting icon on the header do not displayed (both on my test page and on jqGrid demo page)
3. The grid fails to load content ( no record display) randomly on navigating/sorting (IN IE 7, it works more consistently)

Do you know what I might have done wrong or are they bugs? I might try to duplicate the problem in the stable version and see if it works.

Thanks,
Mary

@Anita,
To be a honest it is difficult to me to understand what you mean. Also to summarize: You have custom form and want to connect this form to the grid – i.e get data from grid and set data to grid. If this is the case you can use the formToGrid and gridToForm methods. The only requirement in this case is that the names in the form should be equal of those in the grid. You can look in the Examples: New in version 3.2 -> Custom Button and Forms

@Mary Pham
Sorry, but at the moment I do not have FireFox 2.x

@tony
Will you in future add functionaly for saving status of treegrid(expand)?

Dear Tony,

File grid.formedit.js
Line:280 …..form name=’FormPost’ id='”+frmgr+”‘….

Here in this line, you hard-code the style for this element “overflow:auto”.
In order to get the auto form width to work (get rid of x-scrollbar in the dialog’s form), I have to define the rule for form.FormPost { overflow:visible !important }.

Just let you know that you may want to remove this, or move it to ui.jqgrid.css
For me, I don’t like the idea to define the form width. I like it to be auto…

Hi Tony

First, I must say excellent plugin… Congratulations!
I read whats new (features and fixed bugs) in 3.5 version and I like it and wanna use this version, but I have a doubt… Since it needs me for developing commercial web application, how stable is this beta version (can I use it without problems for production) and if it is not recommended, when is expected a stable release of jqGrid 3.5. version?
And one more question, is the view of currently loaded rows (i.e. “View 1 – 10 of 100 rows” and “Page 1 of 5”) implemented features in 3.4 or they are new in 3.5? And if they are in 3.4, how to implement them?

Thanks in advance.

Regards,
Renata

Hi Tony,
I’m trying to use the summary row in 3.5 beta. I found results does not format as “currency” (with 2 decimal digits) that I specified in the column formatter.
I tried to format the data before passing back to jqgrid, but “NaN” was displayed. It seems jqgrid is not happy with the comma (thousand separator) in the string.

For those having “internet explorer cannot open the internet site .. operation aborted” problem with jqgrid, move any grid enabling code to onload event or document ready in jquery will solve the problem.

$(function() { /* enable jqgrid here */ });

not sure if this can work correctly with tab mode (like in jqgrid demo)

To Tony

I found a bug, this is really a bug.

Enabling celledit and formedit in jqgrid in the same time can cause this problem.
To reproduce this,
Click on the text cell you want to edit ==> textbox appears in the cell
Click on the pencil icon in the navigator bar ==> the dialog’s form is shown with html code inside text field.

jqGrid 3.5beta
When using array data source type, sorting causes doublicating data each time clicked

Hi,
Tony first of all this is excellent work!
I’m using in my in-house application since I’m new to all this stuff I’m struggling 🙂

I found one problem the demo page is not load in my Firefox (3.5) browser .
Any one has any idea?

One more thing! does anyone has idea
how do I restrict my colmodel text field it always enter in upper case, no matter capslock is on of off.
Previously I did this with simple CSS,

input.uppercase{
text-transform: uppercase;
}

but I do not think we can implement CSS in colmodel, am I right?

Hi Tony,

I would like to report Drag-and-Drop issue on FF3.5, IE7
Drag-and-Drop a row in jqgrid to the top row causes a messy column size.
If I drag the top row back to the top, the correct column size is correct again.

I suspect that it maybe from the the reason that you only define a width for the top row.

Regards,

OK another feature.. — Adding default submit button to the edit/add form, so user can press enter instead of clicking on submit link.

Currently I have to do this using afterShowForm event

In FF set the default submit button css ‘display’ to none is ok, but not IE.. so we need to set width and height to 0 instead. (In IE if the button’s display is none, the form won’t send ENTER key press to the button)

(Sorry for duplication, it seems that HTML doesn’t show up)

OK another feature.. — Adding default submit button to the edit/add form, so user can press enter instead of clicking on submit link.

Currently I have to do this using afterShowForm event

jQuery(jq).append(“<INPUT TYPE=\’SUBMIT\’ STYLE=\’width:0px;height:0px;\’/ >”)’.
‘.submit(function() { jQuery(\’#sData\’).click(); return false; });

In FF set the default submit button css ‘display’ to none is ok, but not IE.. so we need to set width and height to 0 instead. (In IE if the button’s display is none, the form won’t send ENTER key press to the button)

Hi Tony,
I read in documentation that “rowdata” is passed in the custom formatter function, but I only saw rowid and colModel. Is there a way to get rowdata? I need to have a column with link to another page using value of another (hidden) column value as parameter.
Thanks,
Mary

hi Tony,

Thank you for your reply. I was hoping to be able to modify the jqGrid modal form, didn’t want to make it look like the one in the 3.2 demo. But I will start working on that custom form, can it be created to look like the jqGrid modal edit/create forms?

Thanks again,
Anita

Hi Tony,
can you please see if posting to the forum is ok? I’m not been able to make one, thanks!

@jpsala
sorry, it’s working, must be some problem with my firefox 3, 3.5 works fine

Sorry to re-post, But I was hoping there was a function to be able to change the width of a column with javascript, something along the lines of:

$(‘#mygrid’).setColumnWidth([colName/colNumber?], [width]);

Is there anything like this, or does anyone have a patch which would achieve this?

Thanks in advance.

Due to my last modification to grid.formedit.js to avoid some nasty bugs with subgrids (see comment #46 at page 5), the edit window defaulted to position (0,0) as it was created in the body element instead of the current subgrid. Again, I’ve changed the aforementioned file at line 185:

editGridRow : function(rowid, p){
p = $.extend({
top : 0,
left: 0,
width: 300,

it now reads:
editGridRow : function(rowid, p){
var offset = $(this).offset();
p = $.extend({
top : offset.top,
left: offset.left,
width: 300,

so now the position of the modal window defaults to the position of the content of the current grid. Alternatively offset can be set to the position of the main jqgrid element instead of its content with $(this).parent().parent().offset().

Bye.

@Tony,

Excellent work!!!

@Caspard had written the following on 07/17:

“I have added some grids to a jQuery UI Accordion object. All the grids on the accordion child that is expanded by default, displays perfectly. But the grids on the accordion children that are NOT expanded by default, permanently shows the jqGrid “Loading” div on these grids. Any ideas?”

I too am getting the “Loading” div message, but on the 2nd, 3rd, 4th, etc. divs using UI Tabs. Similarly, it works perfectly on the 1st div. I’m using Build 10. Any thoughts on this?

Just wanted to share a tweak that worked nicely for me for multiple selection without checkboxes. I wanted to have control- and shift-click work as in other applications: control click toggles selection, normal click clears all selections except what’s under the mouse, shift click selects a range. I got it to work by doing three things:

1. calling hideCol(”cb”) to remove the checkboxes
2. suppressing the browser’s default handling of shift clicks with:
$(table).mousedown(function(e) { if (e.shiftKey) return false; });
(works in firefox and webkit, haven’t figured out how in ie yet)
3. modifying grid.base.js to handle standard mouse behaviors like in file explorer and the grids from extjs and dojo

Here’s the change to grid.base.js (3.5-beta). Replace line 1710 with this:

// click clears selection
if (!e.ctrlKey && !e.shiftKey)
$(ts).resetSelection();
// grow selection on shift click
if (e.shiftKey && ts.p.selrow && ts.p.selrow != ptr[0].id) {
var i = $(ts.rows).index($(”#” + ts.p.selrow));
var j = $(ts.rows).index($(”#” + ptr[0].id));
if (i > j) { var tmp = i; i = j; j = tmp; }
for (var k = i; k <= j; ++k) {
ptr = $(ts.rows).slice(k, k + 1);
// don't remove current selections
if(!ptr.hasClass(”ui-state-highlight”))
$(ts).setSelection(false, true, ptr);
}
else {
$(ts).setSelection(false, true, ptr);
}

I can send the whole file if anyone's interested. And Tony I'm sure could make it nicer than I can, but it's a start.

I saw that jquery ui is scheduled to implement control and shift click like this in ui.selectable as of version 1.8.

Cheers,

Hi Tony

Wanted to inquire from you that does jq grid supports multi – column sorting and the concept of template columns ? If not , Is it scheduled in a future release ?

Hi Tony,

When the 3.5 will be released (Come out of beta)?

Thank you.

In case anyone is interested, I figured out how to use jqGrid to enable multiselect using control and shift clicking without checkboxes, like in file explorer. Here’s how:

1. Turn on multiselect.
1. Call hideCol(”cb”) to remove the checkboxes
2. Suppress the browser’s default handling of shift click and drag with:
$(table).mousedown(function(e) { if (e.shiftKey) return false; });
$(table).mousemove(function(e) { if (e.button == 0) return false; });
3. Modify grid.base.js to handle standard mouse behaviors like in file explorer and the grids from extjs and dojo. Replace line 1710 of grid.base.js in 3.5-beta with this:

if (!e.ctrlKey && !e.shiftKey) // click clears selection
$(ts).resetSelection();
if (e.shiftKey && ts.p.selrow && ts.p.selrow != ptr[0].id) { // grow selection on shift
var i = $(ts.rows).index($(”#” + ts.p.selrow));
var j = $(ts.rows).index($(”#” + ptr[0].id));
if (i > j) { var tmp = i; i = j; j = tmp; }
for (var k = i; k <= j; ++k) {
ptr = $(ts.rows).slice(k, k + 1);
if(!ptr.hasClass(”ui-state-highlight”)) // don't remove current selections
$(ts).setSelection(false, true, ptr);
}
else {
$(ts).setSelection(false, true, ptr);
}

I can send the whole file if anyone's interested. I'm sure Tony would know how to make it much more efficient and how to integrate it better into the code so it's available for others too. But this got me what I needed and I hope it's helpful to others too.

Version 1.8 of jquery ui.selectable is scheduled to provide support for ctrl and shift click like this too. See:
http://dev.jqueryui.com/ticket/4205
http://dev.jqueryui.com/ticket/2946

Will be nice to see it in jqGrid too!

Cheers,

tony :
@Pavel,
The purpose of multiboxonly is like yahoo mail. Try to click only on checkboxes (on multiselect column) and see what will be happen.

Hi Tony,

don’t want to be annoying :-), but I still think there a bug in all builds since build 9.

After I have defined

…
multiselect:true,
multiboxonly:true,
…

1. The row can be still selected by clicking on the row. (multiboxonly:true is so ignored).
2. And by clicking on the row and selecting it all other checkboxes are being unchecked!

So the situation is, if I have selected some rows to do whatever with them and I accidental click not on the checkbox, but near it or somewhere in the row, all my selection is gone and I have to do all it again.

It was not so in the build 9. There was no action by clicking on the row if it was defined multiselect:true and the onSelectRow event was not defined.

Thanks in advance! 🙂

Best regards,

Pavel

Tony,

I am trying to reduce my memory requirements after moving to jqGrid 3.5. Which jquery.ui commponents are required by jqGrid? Most things work with just the ui core but not all?

Thanks,
Jerry

I am trying to get my userdata and having trouble with it.

getReturnedData()cited in the docs doesn’t seem to exist, when I search over the jqGrid directory tree. So I am trying to get it with getGridParam like this:

loadComplete: function(){
var data = $(“#list1”).getGridParam(‘userData’);
alert(“Data: ” + data);
}
displays the alert: Data: [object Object]

Here is a snippet from the returned XML:

3
48
955
Rex

… followed by cells and remainder of rows …

and my xmlReader from the .jqGrid configuration hash:

xmlReader: {
root: “rows”,
row: “row”,
page: “rows>page”,
total: “rows>total”,
records : “rows>records”,
repeatitems: true,
cell: “cell”,
id: “[id]”,
userdata: “rows>userdata”
},

The table itself is loading. Do I have something configured wrong or am I failing to understand how to get into the Object returned?

Forgot to mention in the first posting re my problem with userData, I am using 3.5 beta from about a week and a half ago.

@Steven Black
I had the same problem, and figured out just now. It’s not a typo. You need to load one of the locale files such as i18n/grid.locale-en.js.