jQuery Grid Plugin – jqGrid

@tony
even if I’m setting .ui-jqgrid { font-size:11px; } in an external stylesheet or in ui.jqgrid.css, it doesn’t work. Only the title of the grid is adjusting at this font-size.

@tony
I managed to fix it by using :
table.ui-jqgrid-htable, table.ui-jqgrid-btable, table.ui-pg-table {
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size:11px;
}
any idea why applying font-size to div would not work ?

Hey, Tony.
Still remember the framework I have mentioned before?
Now I turn into developping a Content Management System which consist of Jqgrid.
This is the project page: http://www.the-di-lab.com/?page_id=47

And I hope you could give some advices.

Regards.
The-Di-Lab

Dear Tony，
Thanks your great plugins,
Can you explain the use of right_field in treegrid,I have read the online document ,but I can not find the realation between the treenodes
Thank you

Can anyone tell me why the request is no longer for json when the datatype is set to “json”? The dataType parameter for the $.ajax request is now set to “text” when the datatype is “json” and then $.parse is called to evaluate it. This has caused me a problem because I am using ASP.NET MVC with the grid and I created a ActionMethodSelectorAttribute checking for json in the Accept header, now the grid does not call the correct actions.

Thank you.

@Tony
@Xelgen
Could you please provide a link to the problem. It is very strange.

Yes, sure. It’s currently on my local machine, I will upload it to the hosting coming week, and will send you a link (and login/password as it’s in admin section of website, ) to the problem. Can you send me a mail, to the adress I’ve used here to comment, so I can mail you login/password?

Tony,

Concerning the checkbox, I was able to enable them on my grid. I simply wanted to modify the default display, because i believe that the default disable look is not the greatest in and browser. I guess you mean to modify it using the custom formatter. I’ll give it a try!

Other concerns:

My concerns are mainly related to the calling of functionality when creating the grid. You have a good standard for almost everything… then comes the NavGrid, the NavButton and the new filterToolbar.

Let me explain as briefly as possible. The issue is mainly related to the NavButtons since i generate all the config object for the grid from a php script. The entire config is a JSON string == javascript object.

Then i parse the object to set different variable here and there according to the different function call. In the case of the NavButton, i don’t know how many i need to add (array of buttons) and since they need to be chained to the NavGrid then the only option is to create a NavGrid config string and then eval it. In other words, start with something like:
var mynavgrid = “mygrid.NavGrid(…)”

then i add the NavButtons in a loop as a string with all it implies like converting back my config object to a json string for each button.

mynavgrid += ".NavButton(" + json_encode(objNavButton->Options) + ")";


Why not have one object to load the entire grid


jqgrid:{"selector":"#mygrid"
, "gridOptions":{}
, "navGrid":{
"selector": "#mygrid" // same as gridOptions:pager
, "defaultButtons":["Add":{"show":true, "options":{}},...]
, "userButtons":["button":{},"button":{},...]
}
, "filterToolbar":{...}
}


So any javascript that receive a JSON/Javascript object e.g. myJQGRID could generate the grid using


var my grid = JQuery(myJQGRID.selector).jqGrid(myJQGRID);


If you’d be interested for 3.6, let me know, i could help you if needed.

I tried to keep it short. if not clear, you can email me..

Hi Tony,
sorry i haven’t found how to return false/true in onCellSelect() on doc(both pdf or online).
It’s only say:
—————————————————
added event onCellSelect(rowid, iCol, cellcontent) fires when we click on particular cell in the grid; rowid is the id of the row, iCol is the index of the cell cell, content is the content of the cell.
(Note that this available only when we are not using the cell editing module — and is disabled when using cell editing). Important note regarding IE6: this event may exhibit strange behaviours because of a bug in early IE6 releases. …….
————————————————-

I try it blow, not works:

multiselect : true,
//multiboxonly : true,

onCellSelect : function(rowid, iCol, cellcontent) {
switch (iCol) {
case 1 :
show_card(grid_id, rowid);
return false; // <—- not works…
break;
}
}

the jqgrid version is 3.44.
can you give me some advice if you have time (^.^)

Tony,

I got the Custom Nav Buttons under control now just by assigning navGrid to a variable eg.myNavGrid then use it to add buttons.

myNavGrid.navButtonAdd(...);
I just got confused by the line in the documentation that says:
“This method must be chained with the setting of the Standard Buttons.”

For the rest, i still think it would be “nicer” to add the possibility to initialize the “entire” grid using one object as the parameter (without removing the public methods).

Hi Tony,

First of all I want to tell you how happy I am with this jquery plugin. I love all the features it got and that it now also got jQuery UI Theme integration.

I have a question though. I’m using xml as the data provider and I like the way it implements server side paging. But I would rather have the grid do client side sorting. Now I’ve been looking around in the documentation, and it seems there are only 2 ways making the grid sort client side. One way is to set the grid’s loadonce option to true, and the other way is by using the datatype ‘clientSide’ or ‘local’.
Making the grid only load once will break the server side paging, and using a different datatype is not an option either.
Is there any way to use server side paging but client side sorting? Or can the grid only be used fully client side -or- fully server side but not mixed.

Hi,

Is there a deafult setting that limits the number of rows in a grid? All my grids seem to stop at 20 rows.

Thanks!

@xuding
Great work. I have already posted something in the Forum.

@dfischer
Thanks fixed in GitHub. Will not explain why this was.

@Xelgen
Refer to the bottom at each page of this site. There are a Contact details.

@Basdub
Thanks for the suggestion. Just to known (as your mentioted) as of 3.5 you do not need to call first navGrid and then navButtonAdd – you can direct call navButtonAdd without calling navGrid. Will think about your suggestion

@waiting
Sorry it is a my error. I was thinking for beforeSelectRow. Sorry again will see later your problem

Regards
Tony

In general, fantastic work!
… but now even your demo site is “waiting” to load in IE 6 and IE 7.

I cant wait, I have to switch to another grid. ):

@Tony
doesn’t matter,i’ll waiting for your fix (on v3.44 or v3.5)
thanks.

@casperd
If you check at http://www.secondpersonplural.ca/jqgriddocs/index.htm you can find that the default rows is indeed set to 20.

“rowNum integer The initial number of rows that are be returned from the server 20”

So you can simply change the setting to your own number (-:

@Lotte
Thanks!
If I want to display ALL records in a grid, what should the rowNum property be set to?

The treegrid still works on 3.5 ?

After i switched the code from 3.4 to 3.5 the grid doesn’t show and also no post request for data is been made (i have firebug and firephp in place).

jQuery(document).ready(function(){
jQuery(“#treegrid2”).jqGrid({
treeGrid: true,
treeGridModel : ‘adjacency’,
ExpandColumn : ‘name’,
url: ‘server.php’,
datatype: “json”,
mtype: “POST”,
colNames:[“id”,”Account”,”Acc Num”, “Debit”, “Credit”,”Balance”,”Parent”],
colModel:[
{name:’id’,index:’id’, width:180,key:true},
{name:’name’,index:’name’, width:180},
{name:’num’,index:’acc_num’, width:80, align:”center”},
{name:’debit’,index:’debit’, width:80, align:”right”},
{name:’credit’,index:’credit’, width:80,align:”right”},
{name:’balance’,index:’balance’, width:80,align:”right”},
{name:’parent’,index:’parent’, width:80,align:”right”}
],
height:’auto’,
pager : jQuery(“#ptreegrid2”),
imgpath: ‘themes/redmond/images’,
caption: “Treegrid example”
});
});

@cristib
i had the same problem, but it works, just need to do like in install.txt written

Sorry, still doesn’t work… I did as you said. Here is the code…

jqGrid Demo

html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: auto; /* Remove scroll bars on browser window */
font: 12px “Lucida Grande”, “Lucida Sans Unicode”, Tahoma, Verdana;
}

// We use a document ready jquery function.
jQuery(document).ready(function(){
jQuery(“#treegrid2”).jqGrid({
treeGrid: true,
treeGridModel : ‘adjacency’,
ExpandColumn : ‘name’,
url: ‘server.php’,
datatype: “json”,
mtype: “POST”,
colNames:[“id”,”Account”,”Acc Num”, “Debit”, “Credit”,”Balance”,”Parent”],
colModel:[
{name:’id’,index:’id’, width:180,key:true},
{name:’name’,index:’name’, width:180},
{name:’num’,index:’acc_num’, width:80, align:”center”},
{name:’debit’,index:’debit’, width:80, align:”right”},
{name:’credit’,index:’credit’, width:80,align:”right”},
{name:’balance’,index:’balance’, width:80,align:”right”},
{name:’parent’,index:’parent’, width:80,align:”right”}
],
height:’auto’,
pager : jQuery(“#ptreegrid2”),
imgpath: ‘themes/redmond/images’,
caption: “Treegrid example”
});
});

Firebug confirmed me that all the files were loaded ok (200 code).

Still no request is made for data, and no grid is displayed…

The blog filter is removing my html code, but files are loaded.

Btw, i think there are some mistakes on the demo of tree:
treedatatype: “xml”,
should be:
datatype: “xml”,

Ooook… I solved, thanks…

After re-checking the html code again i saw some differences from the version i have, and now treegrid loads…

Sorry for too many posts….

One more question: there is any plan to support multiselect into tree view also ?

don’t know if is this is bag or not but
in treegrid, treeGridModel : ‘adjacency’

after row deletion, the xml loaded from server is added to one in greed, but not replacing it.

I found a bug using multi search using datepicker in the field. no matter what is put into the field when you search it doesnt actually submit the data in data in the field, it always just submits a blank data variable.

Here is my firebug data (paid_status is the datepicker field)
{“groupOp”:”AND”,”rules”:[{“field”:”paid_status”,”op”:”eq”,”data”:””},{“field”:”comm_status”,”op”:”eq”,”data”:”test”}]}

And here is the column definition:
{name:’paid_status’,index:’paid_status’, align:’right’, width:80, searchoptions:{sopt:[‘eq’], dataInit:function(el){$(el).datepicker({dateFormat:’mm/dd/y’});}}

Tony
I am trying to use the hide/show columns feature in 3.5. When I click on my launch button, the grid form opens, all columns are populated with a check mark, but the entire popup grid is disabled. THe Beta 3.5 “demo” (New in version 3.3 — Visible Columns) is also doing the same thing. I am using a current version of the github download.

also, i’ve noticed that if formatter is used (for example ‘checkbox’),
the value passed to custom form is ‘<input …' not the actual id

and 'checkbox' doesn't return ane value back to grid 🙁

кстати, Тони Ñ‚Ñ‹ случайно на русском не говоришь ? 🙂

Tony,

For begin, sorry for my imperfect English …

I use version 3.4 Alfa 3 of jqGrid with the XML import configuration option. I’m trying to use version 3.5 Beta for the integrated search toolbar but I have an error ‘xml2json or parse are not present’…

I tried differents solutions, included all the files in the ‘src’ folder, but the error persist …

How to resolve this problem ?

Thank you,
Florent

There is a bug:
When cellEdit is set tu True, “onSelectRow” event is not triggered after click on a row. In this case ‘master – slave’ scenario with two connected dataGrids doesn’t work.

Dear Tony,
Without using the jqGrid called “form editing” (which is not suitable nor realistic at all for grids),I am trying to add an empty row after the last row of a jqGrid , then fill the empty row, and update the grid . Just like Windows datagrids which always have just after the last row, an empty row marqued by an ‘*’ . Have you some indication on how to do that with jqGrid? or better a sample or demo ?
Thank you very very much!…

why colum resizable doesnt work ?

Here is an example : How to do something like this
|—————————————————–|
| NU | AUTHOR | BOOK TITLE | Price |
|—–|———-|————————-|———-|
| 1 | Tony | jqGrid: Best Practices | 8000 |
|—–|———-|————————-|———-|
| 2 | Raouf | aspnetMVC : How To | 1000 | the last row
|—–|———-|————————-|———-| is always an
| * | | | | empty row for
|—–|———-|————————-|———-| adding new rows

Hi… Is there any solution to add Separator to custom buttons navigation section in jqGrid 3.5 beta?… If any, then I have made one…

Just insert next code lines to js/grid.formedit.js at line:1479

navSeparatorAdd: function() {
return this.each(function() {
if( !this.grid) { return; }
var navtbl = $(“.navtable”);
if (navtbl) {
var sep = “”;
$(“tr”,navtbl).append(sep);
}
});
},

and now, we can add Separator with custom buttons… like that:
$(“#jqgrid”).jqGrid(
…
).navGrid(…)
.navSeparatorAdd()
.navButtonAdd();

Hai Tony, everyone…

If I had something like this :

colModel:[
{name:’id’,index:’id’},
{name:’name’,index:’name’, editable: true, edittype: ‘select’, editoptions:{value:”OPTION:VALUE”}
]

and this “OPTION:VALUE” referred to an array from PHP (let say a result array from db query), Is it possible to do this?

@oglab
Hi everyone
oglab try this
editoptions:{dataUrl:’test.txt’, defaultValue:’Intime’},

@Raouf
Two ways to do this :
1- Always keep an empty line in your db (just fill the db with the id). Then you will just update the line once data is entered in the grid
2- Add an empty line after parsing the db (using php for example). The empty line will appear in the grid. Once data is entered you will use a “INSERT” sql method to store it into the db.

@Morgan,
Thanks – fixed in GitHub.
@maj
Check that you load the css. If you use the version from GitHub you should load the css css or both from src/css ui.jqgrid.css and jquery.searchFilter.css

@Orin
I do not understand what you mean. Please explain again. No problems with russian language.

@Florent
In your download do you have included both modules Json stringify and JSON/Xml utils?

@oglab
You can use {value:”1:one;2:two”}
or
{value:{1:”one”,2:”two”}}

@Tony

Hi Tonny! Found a little bug using hidden fields (in firefox dunno why, chrome renders okay).
The HTML is evaluating one more column in the “_empty” row,
so columns are not matching if you use any hidden field.

grid.base.js : Line 1339
for(i=0;i<ts.p.colNames.length;i++){
td = document.createElement("td");
trow.appendChild(td);
}

suggestion bugfix by me:

//modified by olavo at exodus dot eti dot br
Line 1339 :
for (var i = 0; i < ts.p.colModel.length; i++) {
td = document.createElement("td");
if (ts.p.colModel[i].hidden) $(td).hide();
trow.appendChild(td);
}

I was in a hurry, but I guess the "$(td).hide();" part can be optimized.

Best Regards

dignity :
editoptions:{dataUrl:’test.txt’, defaultValue:’Intime’}

did you mean the array value is in test.txt? ..nothing happened

tony :
You can use {value:”1:one;2:two”}
or
{value:{1:”one”,2:”two”}}

yes, but what i need, the arrayed value is retrieved from other file or from other sql result. Is there any sample how to do this, sorry maybe this is stupid thing, basically i’m not a programmer so i need to ask the expert.

Tony

Still trying to get Show/Hide columns feature to work in v3.5
I am sure that I am loading the correct CSS files (the most recent ones from GitHub). I am trying to use the hide/show columns feature in 3.5. When I click on my launch button, the grid form opens, all columns are populated with a check mark, but the entire popup grid is disabled, essentially locking the whole page. Please note that when I run your demo directly from your website (new in version 3.3, Visible Columns (http://www.trirand.com/jqgrid35/jqgrid.html)
the same thing is happening.

Tony… one question…
How to use getInd() method for Nested TreeGrid and when and where to use it? I need to know if is node data loaded (grid.isNodeLoaded())…
I’m trying this code:


var grid=$("#treeGrid"), gsr=grid.getGridParam("selrow");
record = grid.getInd(grid.rows, gsr, true);
if(grid.isNodeLoaded(record)){ do smth... }


but it gives me an error: obj (means grid.rows) is undefined (at line:690 of grid.base.js)

Hi Tony,
Yes I included both files (json2.js and JsonXml.js). I already changed the order in which files are included, but the problem was not resolved.

Have you another solution ?

Best Regards,
Florent.

The following code used for test of jqGrid, only renders header of the first filter box. jqGrid is not rendered in IE, in FF it is rendering.

If I remove , it works fine in both.
————————————————

Filter Box

Filter Form

————————————————

what can be the issue?

just removing “ui-icon” class name from the span tag, works fine!!! But the icon is not displayed on the filter box..!!!

I extend tableToGrid function for more functionaly.

function tableToGrid(selector) {
change to
function tableToGrid(selector,options) {

and
$(this).jqGrid({
datatype: “local”,
width: w,
colNames: colNames,
colModel: colModel,
multiselect: selectMultiple
});
change to
$(this).jqGrid($.extend({
datatype: “local”,
width: w,
colNames: colNames,
colModel: colModel,
multiselect: selectMultiple
},options));

Now i can use navbar and other functionaly of jqgrid.

Hi,

jqGrid 3.5 Beta(build5) (all options but treegrid and subgrid)

afterInserRow event doesn’t work…

Best regards.

@Dominique Thank you,
Subject : Adding empty row after each insert
I am trying this :
function AddEmptyRow() {
var emptyrow = function(){
for (i = 0, j = colNames.length; i < j; i++) {
return colNames[i] + ":''";}
};
var added = jQuery("#List").addRowData("", emptyrow "last")
}

Dear Tony
Can we set the position of the below pager bar’s text ? In some situations that we have to set the pager align to the right side ,
because of too many buttons to set。

Kind Regards

Hi Tony,

It would be nice to clean the corners of the grid. So, I propose you to add the following styles in ui.jqgrid.css in order to overload the ones contained in jquery-ui-1.7.1.custom.css:

.ui-jqgrid .ui-corner-tr {
-moz-border-radius-topright:4px;
}
.ui-jqgrid .ui-corner-tl {
-moz-border-radius-topleft:4px;
}

.ui-jqgrid .ui-corner-all {
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0;
}

Moreover, you can add a little right margin for the pagin-info:

.ui-jqgrid .ui-paging-info {
font-weight:normal;
height:19px;
margin-top:3px;
margin-right:4px; /* added for a little margin on right side */
}

Best regards,
Thomas

Hi Tony,

I have following error while deleting rows in 3.5 Beta:

“t is not defined”, grid.base.js, row 333

I have trying both: a single id or an id string.

The row with the first id only is deleted, the modal dialog is not hided and the widths of all cols (cb inclusive) are reset.

$(‘#mygrid’).delGridRow(ids, {modal:true, drag:true, reloadAfterSubmit:false});

I didn’t have this error with 3.4.

Thanks in advance!

Regards,

Pavel