jQuery Grid Plugin – jqGrid

Realy a good job, “Bravo” !

A question : If the rowid isn’t a number it seems that the onSelectRow doesn’t fire, and there is no way to Edit inline. Have you alread heard about this ?

Hi,
Thanks for the good word.
Do you have any spacial content inserted in the table data or for the rowid?
onSelectRow is just call and nothing to do with the code. I think that getting the id is the problem maybe. Do you have any example?
You can just test what is the id

onSelectRow : function(rowid){
alert(rowid);
…
}

What is returned?

Regards
Tony

I had tried the “alert” before to contact you, and alert doesn’t fired. I thinked also that the ‘problem’ is before the onSelectRow so i looked for any typeof detection related to the rowid in your code, but i didn’t find anything.

I use the json data filler, and for example here is a piece of datas:

{ total: “1”, page: “1”, records: “2”,
rows : [
{ id : “Direction/sales”, cell:[“UZT”,”DAC”,”SG”,”ELA”]},
{ id : “Direction/customers”, cell:[“UZT”,”DAR”,”SG”,”AVM”]}
]}
This doesn’t work. As you can see the pseudo rowid is built with a scheme string, using “/” as separators. May be it’s this.

But If i use the following json response, it works.

{ total: “1”, page: “1”, records: “2”,
rows : [
{ id : “0”, cell:[“UZT”,”DAC”,”SG”,”ELA”]},
{ id : “1”, cell:[“UZT”,”DAR”,”SG”,”AVM”]}
]}

I used the following code to run the jqGrid:
jQuery(document).ready(function(){
var lastsel;
var refopt = “FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX”;
jQuery(“#list”).jqGrid({
url:’../json/GetAllCIEntites.aspx’,
datatype: ‘json’,
colNames:[‘Structure’,’Dir’, ‘Dep’,’CI’],
colModel :[
{name:’strstructure’,index:’strstructure’, width:150, sortable:true, sorttype:”string”},
{name:’strniveau_nm2′,index:’strniveau_nm2′, width:80, sortable:true, sorttype:”string”},
{name:’strniveau_nm1′,index:’strniveau_nm1′, width:90, sortable:true, sorttype:”string”},
{name:’strinitiales’,index:’strinitiales’, width:80, sortable:true, sorttype:”string”, editable:true,
edittype:”select”,editoptions:{value:refopt}}
],
pager: jQuery(‘#pager’),
rowNum:10,
rowList:[10,20,30],
sortname: ‘strstructure’,
sortorder: “asc”,
viewrecords: true,
imgpath: ‘themes/coffe/images’,
caption: “Sesame”,
height: 400,
width: 500,
onSelectRow: function(id){
alert(id);
if(id && id!==lastsel){
jQuery(‘#list’).restoreRow(lastsel);
jQuery(‘#list’).editRow(id,true);
lastsel=id;
;}
},
editurl:’../json/FillCIEntites.aspx’
});
});

(I plan to use another getjson to fill the ref table for the select box 😉 )

I had tried the “alert” before to contact you, and alert doesn’t fired. I thinked also that the ‘problem’ is before the onSelectRow so i looked for any typeof detection related to the rowid in your code, but i didn’t find anything.

I use the json data filler, and for example here is a piece of datas:

{ total: “1”, page: “1”, records: “2”,
rows : [
{ id : “Direction/sales”, cell:[“UZT”,”DAC”,”SG”,”ELA”]},
{ id : “Direction/customers”, cell:[“UZT”,”DAR”,”SG”,”AVM”]}
]}
This doesn’t work. As you can see the pseudo rowid is built with a scheme string, using “/” as separators. May be it’s this.

But If i use the following json response, it works.

{ total: “1”, page: “1”, records: “2”,
rows : [
{ id : “0”, cell:[“UZT”,”DAC”,”SG”,”ELA”]},
{ id : “1”, cell:[“UZT”,”DAR”,”SG”,”AVM”]}
]}

Since the id is append as valid html element I think that this is wrong.
”
…
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”).
…
”
Instead the numbers are valid.
For more information refer to:
http://www.w3.org/TR/html401/types.html

Hmmm, it seems that a first this is the editRow function, it also use schemes to constrcut its owns tags.

You know, the fact that i use a string as a rowid is not the must beautifull way to do. Most of people will realy use a good id.

So, I figured out a quite interresting way to deal with possibly stranges id: Store a corresponding array in jqgrid.

This array would map stranges ids from the reader with correct and internal numbers like id, and would be filled at data reading. When dialoging with the server, the eral id would be used from the correpsondance table, but in order to work properly, jqGrid would use its internals keys.

What do you think about this ?

Will be good to see such implementation 🙂

Continuing implémentation, i noticed than in IE 7 :(( the select box has a curious behavior, and in order to keep it opened, your only solution is to use teh keyboard to select the item. IE 6 and FF last version are ok.

Thank you for this will check it again.

Regards
Tony

How do i add a combobox with 1000s of data inside to be in edit field?. it is easy to add as edit combobox when combox contains few fields…any suggestion?. At present i am doing multipage edit…(show another page for editing)…i want to edit on the table itself…but …

i was testing toolbar example…i could n’t find toolbar,js…where is it?.

Can you also provide A modal dialog based on jqmodal?. i ned to create a custom form on popup dialog. The example in jqmodal website sucks..i created my own but i want to be consistent across…so if you create set of UI componenet based on jqmodal. Very much appreciated.

I need a Tree (sub tree animated..can have table as sub tree item) , Form dialog (custom background) , splitter window etc.. Thanks again.

pokerking,

1. Currently the purpose of combobox in jqGrid is not to load 1000s of data items. It can be implemented at client side in which the values are known. Database combo box is not supported. Instead of this you can implement a semi db combo box. Before loading the grid you can the appropriate data and set the values in colModel.

2. Toolbar is a part from jqgrid.base.js

3. If you open grid.formedit.js at end there are 3 function createModal, DnRModal, and viewModal which can be used outside jqGrid.

Regads
Tony

Because of another lib I am using I need to include prototype with jQuery. Consequently I have a call to jQuery.noConflict(). The problem is that grid.formedit.js and grid.subgrid.js have functions that are defined outside of a scoping method for the $ = jQuery. So the $ in those functions maps to prototype instead of jQuery.

Chris,
Thank you. I will correct this and publish it in next release – maybe next week.

Regards
Tony

Thanks! I forgot to say what a great plugin this is. I started with ExtJS. While that is a great library it was just too big and took too long to load. I have found it very easy to port over to jqGrid. Keep up the good work.

Hi Tony,

I’m trying to use jqGrid in a scenario where all rows are in edit mode all of the time. I basically don’t want the row to go into a non-edit mode after save or at all. I’d also ideally not want the save to be triggered on hitting ENTER but rather when the row loses selection (i.e. it auto-saves as you move off each row but stays in edit mode). What I have on completion of the load is to invoke editRow on all rows in the grid. This does indeed have the result of putting all rows into edit mode. However I’ve noticed that when a saveRow is executed it automatically sets the row back into a non-edit mode. Is there any way to override this other than to modify your javascript files? I thought about invoking editRow again using the after save function but suspect that this might still result in the row entering a non-edit mode for a split second (enough to be noticeable I guess).

Another thing I’d like to be able to do is to make some cells in a column editable and some non-editable based on a value in another cell on the same row. I don’t think this is possible at the moment because the editable attribute is defined for the whole column. What I want in my case is for a checkbox in one cell on the row to determine whether a combo box in another cell on the same row should be editable. How would you suggest I go about doing that?

Great plugin by the way.

Cheers,

Lance

Lance,
IMHO I think that with a little programming this can be done.
I will begin with a second thing.
Maybe you should read this:
http://www.trirand.com/blog/index.php?pagename=forum&rs_discuss_where=topic&rs_discuss_forum=discussion&rs_discuss_topic=105&rs_discuss_page=1&recent=479#post-479

If you use afterInsertRow event you can simply do something like this
…
afterInsertRow: function(rowid) { // maybe here is better to pass the row data too
var myrowdata = jQuery(“#mygrid”).getRowData(rowid);
if ( condition here /*use mayrowdata.myname*/) {
// change colModels names editable boolean option to true or false
// use setGridParam({colModel[index].editable: true or false})
}
$(“#mygrid”).editRow(rowid);
}

For the first you can use onSelectRow event again with custom ajax to save the row something like this
define variable for the lastselected row (lastsel)
var lastsel;
…
onSelectRow : function(rowid) {
if(rowid && rowid !== lastsel) {
if(lastsel != null) $.ajax({}); // save here the last selected row
lastsel = rowid;
}
}

For this maybe there will be a better logic, but I think that this is the direction –

Best Regards

Thanks for replying so quickly.

I can see how the afterInsertRow event would help me on initial display of the table. I’m not sure how it would dynamically respond to changes in the checkbox value (i.e. myrowdata.myname in your example). I was hoping that whenever the checkbox value was changed it would dynamically disable/enable the relevant fields on the same row in response to that change. I guess I could somehow save the row and reload whenever the checkbox changes but doesn’t sound the best. Actually, a better thought might be to simply set the grid params and issue another editRow on the same row whenever the checkbox changes. Would that work?

Regarding the second solution, I have just tried this out and it does indeed save on selection changes. I’m wondering how it would handle the scenario where the user makes an edit to a row and then clicks outside of the grid in order to do something else on the web page. This will not trigger a selection change and therefore would not trigger a save. Is there some event we can hook into that picks up when the user clicks on something outside of the grid? – I realise this is a big ask but wondered what your thoughts were. – I guess I could implement some sort of inactivity timer that autosaves maybe.

Cheers,

Lance

I’ve just tried the approach of using afterInsertRow to change the editable option. This does indeed change whether the cell is editable but ideally I’d like to still use the combo box, text fields, etc. even though they are not editable; otherwise the grid looks a little strange. What I might have to do is leave them editable all the time and just use my own javascript to disable the combox box, text field, etc.

Lance

Hi Tony! First of all thanks a lot for you work 🙂

Little question – is it any way to use form editing for grid as subgrid? My code only firing alert and no more reactions or errors

subGridRowExpanded : function(subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id+”_t”;
$(“#”+subgrid_id).html(“”);
var z = jQuery(“#list2”).getRowData(row_id);
jQuery(“#”+subgrid_table_id).jqGrid({ url:”index.php?q=2&ID=”+z[‘ID’],
datatype: “json”,
colNames: [‘author’,’commentupdated’,’commenttext’],
colModel: [ {name:”author”,index:”author”,width:80,editable:true,editoptions:{readonly:true,size:50}},
{name:”commentupdated”,index:”commentupdated”,width:130,editable:true,editoptions:{readonly:true,size:100}},
{name:”commenttext”,index:”commenttext”,width:300,editable:true,editoptions:{size:300}}],
rowNum:20,
width: 900,
height: ‘50%’,
toolbar: [true,”top”],
imgpath: ‘themes/basic/images’,
sortname: ‘num’,
sortorder: “asc”
})

$(“#t_”+subgrid_table_id).append(“”);
$(“input”,”#t_”+subgrid_table_id).click(function()
{
alert(“Test”);
var gr = “new”; jQuery(“#t_”+subgrid_table_id).editGridRow(gr, height:280,reloadAfterSubmit:false, url:”index.php”});});
}

@Lance,
Maybe I’m wrong, since I do not understand you.
You want to read data from the server and must have all the time the rows editable. Initialy some cols must not editable depending on the checkbox value from the server , which should be all time editable. If the user change the checkbox value some columns must be changed from editable to true or false.
Again with this a save must be done to the server when the user change the values of particular row. This save must be done without any additional button to do that – only when the user lief the row – Is that the case?

@Alex
Try this:

$(”input”,”#t_”+subgrid_table_id).click(function()
{
alert(”Test”);
var gr = “new”; jQuery(”#”+subgrid_table_id).editGridRow(gr, height:280,reloadAfterSubmit:false, url:”index.php”});});
}

Is there anyway to stop the grid from loading if there is no data. At the moment I’m using the loadComplete to determine if there is any data that has been loaded and then replacing the HTML wrapping around the grid to tell the user that there is no data.

However this makes the theme flash up – ideally I don’t want the theme grid to be displayed until there is content to be displayed.

Ronald,
jqGrid first create the content and then load the data. If I understand you will to have this in reversed order. This is not possible. I recommend you to enclose the grid in hidden div (jqGrid work on hidden elements) and depending on the result to show the grid.

Another possible solution is to know before constructing the grid if the initial request has data – i.e. make request to check if data is available and then construct the grid depending on that data

Regards
Tony

Hi Tony,

Yes, what you have described is roughly what I want, except that when the combo box, text fields, etc. are not editable, I’d rather have them still showing the combo box and text fields but in a disabled state rather than showing text. What I’ve noticed, for example, with a checkbox is that when it becomes non-editable, it changes from a checkbox to some text such as ‘yes’. It looks a little strange to have a mixture of text and checkbox in the same column. Perhaps it could be an option on how to render non-editable cells, i.e. either as text or as disabled GUI component (checkbox, select, textfield) and then the programmer can decide which option they want to go for.

I’ve realised that I’d only want to save the row if something has changed on it, so would need to be able to detect if it is dirty. Does jqGrid support this? Or would I need to have a variable that gets set on a change and reset on save?

Cheers,

Lance

Hi Lance,
“Perhaps it could be an option on how to render non-editable cells..”
You can do this in editoptions setting the needed attribute – i.e. – editoptions:{…disabled:true …} – here are all allowed options for this column – these are set as ttributes.

As for dirty cells – there is no support for this.

Regards
Tony

Thanks Tony.

Are you aware that your Row Editing -> Input Types demo doesn’t work properly in IE 7? It is impossible to select something from the “ship via” drop down. As soon as the mouse moves over the options in the drop down to select, the drop down list closes. This doesn’t happen in Firefox.

Any ideas what might be causing this? I’m using a drop down in my grid and am experiencing the same issue in IE7. I can select using the arrow keys but not with the mouse.

Cheers,

Lance

Hi Lance,

I know about this issue. It will be corrected in the final 3.2.

Regards
Tony

Great news! When are you expecting 3.2 will be ready? I’m currently running on the pre-release version you built with the afterInsertRow function included.

Cheers,

Lance

Hey dude I love your plugin, it works great on firefox, but when I try to view my page with IE7 I get the following error: Lenght of ColNames ColdMoDel or 0! and dosen’t load. any ideas?

Thanks, that fixed it.

From what we’ve seen, it seems to be related to the mouse in/out events and the tooltip that pops up. If we comment out the code that sets the title, it fixes the problem (strange as that seems). We were thinking that a ‘temporary’ fix in our case would be to recognise the cell as containing a ‘SELECT’ and if so then don’t set the title when hovering over the cell.

Lance

Lance,
Thank you very much for this ( actually I know this.) I think that we should recognize if the cell contain ‘select’ and ‘input’. I will fix this in the 3.2.

Best Regards
Tony

Wow, bravo , it greats .i love it. thank you, i will use it for my poject in my school.Thank you againt.

Hey again, sorry to bother you again, I”m getting the following errors when I add
jQuery(“#navgrid”).navGrid(‘#pagernav’,
{}, //options
{height:280,reloadAfterSubmit:false}, // edit options
{height:280,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);

from one of the samples.

$(modwin).jqDrag is not a function
DnRModal(“#alertmod”, “#alerthd”)grid.formedit.js (line 866)
(no name)()grid.formedit.js (line 653)
nodeName([table#list.scroll], function(), undefined)jquery.js (line 20)
size(function(), undefined)jquery.js (line 13)
navGrid(“#pager”, Object edit=true editicon=row_edit.gif add=true, Object height=280 reloadAfterSubmit=false, Object height=280 reloadAfterSubmit=false, Object reloadAfterSubmit=false, Object)grid.formedit.js (line 635)
(no name)()21 (line 102)
ready()jquery.js (line 27)
ready()jquery.js (line 27)
nodeName([function()], function(), undefined)jquery.js (line 20)
ready()jquery.js (line 27)
[Break on this error] $(modwin).jqDrag(handler).jqResize(“.jqResize”);

My Code is:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”baseUrl; ?>/templates/default/styles/grid.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”baseUrl; ?>/templates/default/styles/jqModal.css” />
<script type=”text/javascript” src=”baseUrl; ?>/js/jquery/jquery.js”>
<script src=”baseUrl; ?>/js/jquery/jquery.jqGrid.js” type=”text/javascript”>
<script src=”baseUrl; ?>/js/jquery/jquery.jqModal.js” type=”text/javascript”>
<script src=”baseUrl; ?>/js/jquery/jquery.jqDnR.js” type=”text/javascript”>

var lastsel;
jQuery(document).ready(function(){
jQuery(“#list”).jqGrid({
url:’url(array(), ‘pwdmgrview’, true ); ?>/groupid;?>/type/grid/’,
datatype: ‘xml’,
colNames:[‘ID’,’Hostname’,’Account’, ‘Password’,’Account Type’,’OS’],
colModel :[
{name:’HARDWARE_ID’,index:’HARDWARE_ID’, width:55,editable:false,editoptions:{readonly:true,size:10}},
{name:’NAME’,index:’NAME’, width:200, align:’left’,editable:false,editoptions:{readonly:true,size:10}},
{name:’ACCOUNT’,index:’ACCOUNT’, width:200, align:’left’,editable:true,editoptions:{size:20}},
{name:’PASSWORD’,index:’PASSWORD’, width:200, align:’left’,editable:true,editoptions:{size:20}},
{name:’TYPE_NAME’,index:’TYPE_NAME’, width:100, align:’left’,editable: true,editable:false,editoptions:{readonly:true,size:10}},
{name:’PLATFORM_NAME’,index:’PLATFORM_NAME’, width:100, align:’left’,editable:false,editoptions:{readonly:true,size:10}}
],
pager: jQuery(‘#pager’),
rowNum:10,
rowList:[10,20,30],
sortname: ‘HARDWARE_ID’,
sortorder: “desc”,
viewrecords: true,

imgpath: ‘/templates/default/images/table’,
height:210,
caption: “Password Manager”,
subGrid: true,
subGridUrl : “url(array(), ‘pwdmgrview’, true ); ?>/groupid;?>/type/subgrid/”,
subGridModel: [ {
name: [‘Environment’,’Application URL’,’Version’, ‘Application’],
width : [100,300,100,200],
params: [‘HARDWARE_ID’] }
],

onSelectRow: function(id){
if(id && id!==lastsel){
jQuery(‘#list’).restoreRow(lastsel);
jQuery(‘#list’).editRow(id,true);
lastsel=id;
}
},

editurl:”url(array(), ‘pwdmgrview’, true ); ?>/groupid;?>/type/edit/”

});

jQuery(“#list”).navGrid(‘#pager’,
{}, //options
{height:280,reloadAfterSubmit:false}, // edit options
{height:280,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);

});

Any ideas? sorry to bother you again.

never mind, I figured it out 🙂

I LOVE the options this tool provides. I am having a bit of trouble implementing them though. I use an oracle database at work, and to complicate things further, my boss uses Code Igniter to design the website. Which means the query is in the controller, but the table and loaded js files are not available until it calls the view.

My work around slow solution just to see if it works is using the query to write a javascript array to a text file. Then in the view I echoed the text file to use the array method. This caused 2 problems. First it is slow as christmas reading the 3500 line file. Second I can’t get the pager to work at all with the array method.

Can anyone help either either problem or maybe set me on track for a solution better than my gimp “write to file” one.

Shawn,
Paging with local data currently is not supported. I will try to realize this addition. Instead – loading of 1000 rows at once (at client side) will slow down every gird.
I think too, that loading big sets of data at client side (instead of paging) is not a good idea – instead that you see 10-20 rows, the data is still on the client and we must manipulate it. This require a lot of memory and will slow down the application.

Maybe there is a way to overcome the problem with Code Igniter. I’m sure it can be done.

Regards
Tony

Hi Tony,

First of all, great plugin.

A question about using the subgrid. Should it be possible the have a different number of columns in the subgrid per (parent)grid row?
By example:
grid row: name, desciption
subgrid row1: a, b, c, d
grid row: name, desciption
subgrid row2: e, f, g, h

Hi All,

I really like the grid and as simple to implement. Is it possible to have the calendar control on the date fields in the paging editable grid, along with readio group option.

Thanks,
Saurabh

Hi Tony,

I’ve noticed a strange issue with the binding of a SELECT to the currently selected value when using the inline edit feature. I’ll show you the code from grid.inlinedit.js:

case “select” :
var so = options.value.split(“;”),sv, ov;
elem = document.createElement(“select”);
$(elem).attr({id:options.id,name:options.name});
for(var i=0; i<so.length;i++){
sv = so[i].split(“:”);
ov = document.createElement(“option”);
$(ov).val(sv[0]).text(sv[1]);
if (sv[1]==vl) ov.selected =”selected”;
elem.appendChild(ov);
}
break;

I suspect that the following line:

if (sv[1]==vl) ov.selected =”selected”;

might be a bug. It seems to be comparing what was set for the ‘text’ to vl rather than what was set for the ‘value’. I would have thought that it would compare the ‘value’ instead, i.e. if (sv[0]==vl) ov.selected =”selected”;

What are your thoughts on this? – What I think it means at present is that in the XML returned from the server, it has to include the display text in the XML rather than the actual underlying value. So it is a bit inconsistence because when it POSTs an edit it sends the value but when it reads the XML from the server it expects the text.

Cheers,

Lance

Hello again,

It isn’t as simple as changing that sv[1] to sv[0] though because this breaks logic elsewhere in the grid.inlinedit javascript. It seems that createEl is invoked with vl set to the ‘value’ in some cases but the ‘text’ in others, so making it use the value instead of the text will break it when you perform a save. I think this further supports the fact that this area isn’t consistent, i.e. the fact that createEl is invoked with the text in some cases and value in others.

Cheers,

Lance

@Han,
You can do that server side. Maybe you should analyze the id for that purpose
@Saurabh,
See the demo examples

@Lance
You are right. The reason for this is that the inline edit is created not with a grid, but a late. This incosistency can be avoided, but this will slow down the speed of reading data.
Actually the concept is to read what is seen on the grid.

Regards

Hi

Two questions I couldn’t find answers for in the fine documentation.

I want to add different css classes to different rows in jqGrid. I want to hilite some rows depending on some server side data. is this possible?

I want the grid to expand automagically with one row somehow when user hits the end of the last row. Not sure exactly how this would work. Perhaps have an event fire off when hitting in the last field?

Anybody did something like this at all?

Kaare,

For the first question use afterInsertRow(row_id) event to add classes to particular row.

For the second I really do not understand what you mean – sorry.

Regards
Tony

I was hoping for clarification on what the editurl should point to, in respect to searching the grid.

Hi Tony
I have been working with your subgrid through json and I get a subgrid table and contents on the first row only.

All others are empty, although the sql has returned the data.

Any thoughts?

@Gresh,
editurl option is used for CRUD (create update delete data) while the url option is used for retrieving and serching data.

@Sal,
Please post your configuration and if possible the returned data, otherwise I can’t tell you what is wrong.

Regards
Tony

Hi Tony

We are new to php. Using php 5.1.6, here is the main php script followed by the subgrid script and our html.

0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page – $limit;
if($start page = $page;
$response->total = $total_pages;
$response->records = $count;
$i=0;
while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
$response->rows[$i][‘id’]=$row[‘product_ref’];
$response->rows[$i][‘cell’]=array($row[‘product_ref’],$row[‘brand’],$row[‘category’],$row[‘short_desc’],$row[‘technical’],$row[‘quantity’]);
$i++;
}
echo json_encode($response);

function json_encode($a=false)
{
if (is_null($a)) return ‘null’;
if ($a === false) return ‘false’;
if ($a === true) return ‘true’;
if (is_scalar($a))
{
if (is_float($a))
{
// Always use “.” for floats.
return floatval(str_replace(“,”, “.”, strval($a)));
}

if (is_string($a))
{
static $jsonReplaces = array(array(“\\”, “/”, “\n”, “\t”, “\r”, “\b”, “\f”, ‘”‘), array(‘\\\\’, ‘\\/’, ‘\\n’, ‘\\t’, ‘\\r’, ‘\\b’, ‘\\f’, ‘\”‘));
return ‘”‘ . str_replace($jsonReplaces[0], $jsonReplaces[1], $a) . ‘”‘;
}
else
return $a;
}
$isList = true;
for ($i = 0, reset($a); $i $v) $result[] = json_encode($k).’:’.json_encode($v);
return ‘{‘ . join(‘,’, $result) . ‘}’;
}
}
?>

rows[$i][‘id’]=$row[‘product_ref’];
$response->rows[$i][‘cell’]=array($row[‘product_ref’],$row[‘brand’],$row[‘long_desc’]);
$i++;
}

echo json_encode($response);
………….
?>

Here is the script in the html page:

jQuery(document).ready(function(){
var lastsel2
jQuery(“#list”).jqGrid({
url:’http://localhost:8080/php-examples/post2_jqgrid_vg_sub.php’,
datatype: ‘json’,
colNames:[‘Product Ref’,’Brand’,’Category’,’Short Description’,’Technical’,’Quantity’],
colModel :[
{name:’product_ref’,index:’product_ref’, width:100},
{name:’brand’,index:’brand’, width:100},
{name:’category’,index:’category’, width:150, align:’left’},
{name:’short_desc’,index:’short_desc’, width:150,align:’left’},
{name:’technical’,index:’technical’, width:100, sortable:false},
{name:’quantity’,index:’quantity’, width:80, sortable:false} ],

pager: jQuery(‘#pager’),
rowNum:10,
rowList:[10,20,30],
sortname: ‘product_ref’,
sortorder: “desc”,
viewrecords: true,
imgpath: ‘http://localhost:8080/jqgrid/themes/basic/images’,
caption: “Datatable Example”,
subGrid: true,

subGridUrl:’http://localhost:8080/php-examples/subgrid_vg.php?q=3′,
subGridModel: [{
name: [‘Product_ref’,’Brand’,’Full Description’],
width: [50,100,350],
params:[‘product_ref’]}
]

});

});

Here is the returned result as viewed in Firebug for an empty subgrid:

{“rows”:[{“id”:”167.17″,”cell”:[“167.17″,”Steriflex”,”Steriflex Catheter Intravenous polyurathene X-ray

opaque 16g 30cm”]}]}