jQuery Grid Plugin – jqGrid

Pretty cool~

Thanks for your work~

Very slick. I see a lot of similarities(sp?) with the Ext grid implementation. That’s not a dig, but a compliment. There do appear to be some styling consistency issues to be resolved (at least when looking at the examples in Firefox). And I did notice an example where you could programmatically sort the grid on a row, but noticed it never put the sort direction arrow on the grid when the function had run. Little things, but important. Very nice, and I look forward to reading through the code.

Hi there,
Nice work, I can’t wait to try it. Here’s my question:
is there a mode that allows multiple select of rows based on drag/drop operation, I mean like in this example:
http://www.zapatec.com/website/main/products/grid/demo.jsp#editable_autosave_cell.html
I am working on a project meant to replace the use of excel, therefore I intend to implement your grid plugin as I found it has everything to do the job,
except the multiple select via a transversal mouse drag (or did I not see it in the demos).
Congrats again!
Nicolas

Hi, I would like to figure out how to save the row the moment a field has changed. I tried something like:

…
onSelectRow: function(id) {
if(id && id != lastsel){
jQuery(‘#list1’).restoreRow(lastsel);
jQuery(‘#list1’).editRow(id,true,pickdates);
jQuery(“:input”,”#list1″).change(jQuery(“#list1”).saveRow(id); return true;});
lastsel=id;
}
},

But it works fine for dropdown field changes. But doesn’t when it’s a text field. I suspect it has something to do with the change event not being completed before the ajax request is sent. I can’t figure out how to do it ‘after’ the edit has been done rather than ‘while’ it’s being done.

Thanks for the plugin.

Hi, please can you supply an example of the final JSON data used in your simple JSON example, I am trying to produce my data from a mod_python module, and need to validate the syntax. Thanks of the cool work.

@Nicolas and @Juan
jqGrid saves only the entry row and not a particular cell on change.
Here is my technique to do that:
…
onSelectRow: function(id) {
if(id && id != lastsel){
jQuery(’#list1′).restoreRow(lastsel);
jQuery(’#list1′).editRow(id,true,myfunc);
jastsel=id;
}

myfunc function(id)
{
jQuery(“#”+id+”_thecellname”).change( function() {
$.ajax(..) // here is the code to save the cell
…
// if you have other cells you can chain them in jQuery
}
}

@andy
Please wait two days until the full documentation is ready. Check the documentation page for the chages

Regards
Tony

thank you we like you JQ plugin .. keep it upstream..

Hello Tony,

Concerning the “save edit into database” ,
I have tried your explanation in comment N°7. I think I dont really understand because it doesnt work.
I ve searched in the documentation, but any example explains that.
I hope you can give us more details about saving into database (entire row or cells).

Thank you very much
Ana

Hi Ana,

A good start can be found in Example page – Row editing examples. Basically you should define editurl option. If you perform save the data is posted to the server via editurl. You should “get” the posted values server side and perform a save or insert into the database.

Regards
Tony

I’m newbie, just try using jquery grid. It look nice…
in example.html, the navigation toolbar, not display search, reload icon.
how to enable this in navigation toolbar (look like in jqgrid.html) ?
and how to add my own function in the toolbar ?
Thank you very much
Amin

Not sure what you mean, but if you use your own toolbar you should add actions manually. The navigator is added only to the pager. See demoa on how to add your own action on custom toolbar

Regards
Tony

Hi,

I saw your post #7, Mars 7º:
Your post:

“@Nicolas and @Juan
jqGrid saves only the entry row and not a particular cell on change.
Here is my technique to do that:
…
onSelectRow: function(id) {
if(id && id != lastsel){
jQuery(’#list1′).restoreRow(lastsel);
jQuery(’#list1′).editRow(id,true,myfunc);
jastsel=id;
}

myfunc function(id)
{
jQuery(”#”+id+”_thecellname”).change( function() {
$.ajax(..) // here is the code to save the cell
…
// if you have other cells you can chain them in jQuery
}
}

@andy
Please wait two days until the full documentation is ready. Check the documentation page for the chages

Regards
Tony”

I’m trying to perform some calculations after editing a cell, widthout saving the row (I can use setCell to show results in another column…).
In your example:

myfunc function(id)
{
jQuery(”#”+id+”_thecellname”).change( function() {
$.ajax(..) // here is the code to save the cell
…
// if you have other cells you can chain them in jQuery
}
}

How can I get the cell content? What value would you pass to ajax in this example of yours?

Thanks in advance, I really appreciate if you could help me.
Regards,
JConstantino

JConstantino,
It is a simple:
myfunc function(id)
{
jQuery(”#”+id+”_thecellname”).change( function() {
// get the cell content just to show you
var cellvalue = $(this).val();
// here is the code to save the cell
$.ajax({url:’myurl’,data:{celname:cellvalue},…)
…

}
}

very impressive work…. makes table editing problem mch more easier….

as amin have said….

when i tried to mimick the example…. i dont see a reload grid button or find button… i tried also enabling it still it doesnt work….. made some custom buttons.. still not working…. im confused where i got wrong in here… heres my code….

jQuery(document).ready(function(){
jQuery(“#list”).jqGrid({
url:’example.php’,
datatype: ‘xml’,
mtype: ‘GET’,
colNames:[‘ID’,’Category’, ‘Description’],
colModel :[
{name:’cat_id’, index:’catid’, width:55},
{name:’cat_title’, index:’title’, width:290},
{name:’cat_desc’, index:’description’, width:380}],
pager: jQuery(‘#pager’),
rowNum:10,
rowList:[10,20,30],
sortname: ‘catid’,
sortorder: “desc”,
viewrecords: true,
imgpath: ‘themes/basic/images’,
caption: ‘Categories’
}).navGrid(‘#pager’,{edit:false,add:false,del:false,search:false})
.navButtonAdd(‘#pager’,
{caption:”Add”, buttonimg:”themes/basic/images/row_add.gif”,
onClickButton: function(){
alert(“Adding Row”)}, position:”last”})
.navButtonAdd(‘#pager’,{caption:”Del”, buttonimg:”themes/basic/images/row_del.gif”,
onClickButton: function(id){
alert(“Deleting Row: “+id)}, position:”last”
});
}); //end ready function

very impressive… you’ve given the light among the dynamic table editing problems on web….

anywayz… im encountering some probs with the navigation bar… the reload grid button doesnt display… ive made a custom buttons as per example on the docs still it won’t work… i dunno why… here’s the code….

…………..
jQuery(document).ready(function(){
jQuery(“#list”).jqGrid({
url:’example.php’,
datatype: ‘xml’,
mtype: ‘GET’,
colNames:[‘ID’,’Category’, ‘Description’],
colModel :[
{name:’cat_id’, index:’catid’, width:55},
{name:’cat_title’, index:’title’, width:290},
{name:’cat_desc’, index:’description’, width:380}],
pager: jQuery(‘#pager’),
rowNum:10,
rowList:[10,20,30],
sortname: ‘catid’,
sortorder: “desc”,
viewrecords: true,
imgpath: ‘themes/basic/images’,
caption: ‘Categories’
}).navGrid(‘#pager’,{edit:false,add:false,del:false,search:false})
.navButtonAdd(‘#pager’,
{caption:”Add”, buttonimg:”themes/basic/images/row_add.gif”,
onClickButton: function(){
alert(“Adding Row”)}, position:”last”})
.navButtonAdd(‘#pager’,{caption:”Del”, buttonimg:”themes/basic/images/row_del.gif”,
onClickButton: function(id){
alert(“Deleting Row: “+id)}, position:”last”
});
}); //end ready function
………………

heres the html

………………..

……………….

I have a problem with jqGrid.
I wish that add, del or edit on a row inserted to db on server-side
please help me!!!
I try like this
jQuery(document).ready(function(){
jQuery(“#navgrid”).jqGrid({
url:’editing.php?q=1′,
datatype: “xml”,
colNames:[‘Inv No’,’Date’, ‘Client’, ‘Amount’,’Tax’,’Total’,’Closed’,’Ship via’,’Notes’],
colModel:[
{name:’id’,index:’id’, width:55,editable:false,editoptions:{readonly:true,size:10}},
{name:’invdate’,index:’invdate’, width:80,editable:true,editoptions:{size:10}},
{name:’name’,index:’name’, width:90,editable:true,editoptions:{size:25}},
{name:’amount’,index:’amount’, width:60, align:”right”,editable:true,editoptions:{size:10}},
{name:’tax’,index:’tax’, width:60, align:”right”,editable:true,editoptions:{size:10}},
{name:’total’,index:’total’, width:60,align:”right”,editable:true,editoptions:{size:10}},
{name:’closed’,index:’closed’,width:55,align:’center’,editable:true,edittype:”checkbox”,editoptions:{value:”Yes:No”}},
{name:’ship_via’,index:’ship_via’,width:70, editable: true,edittype:”select”,editoptions:{value:”FE:FedEx;TN:TNT”}},
{name:’note’,index:’note’, width:100, sortable:false,editable: true,edittype:”textarea”, editoptions:{rows:”2″,cols:”20″}}
],
rowNum:10,
rowList:[10,20,30],
imgpath: ‘jqGrid/themes/basic/images’,
pager: jQuery(‘#pagernav’),
sortname: ‘id’,
viewrecords: true,
sortorder: “desc”,
caption:”Navigator Example”,
editurl:”someurl.php”,
height:210
}).navGrid(‘#pagernav’,
{edit:false,add:false,del:false})
.navButtonAdd(‘#pagernav’,{
caption:”Delete”, buttonimg:”fullpath/row-delete.gif”, onClickButton:
function(){
var gr = jQuery(“#navgrid”).getGridParam(“selrow”);
if( gr != null ) {
jQuery(“#navgrid”).delGridRow(gr,{
url: ‘del.php’}); }
else { alert(“Please Select Row to delete!”); }; }, position:”last” });
});

Hello Tony

When i tried your navigation bar.it doesn’t work.

Can u give some idea for Add,Edit,Delete logic

Thanks
Anand

I must’ve missed something… Your download contains a “themes” folder, but it’s the jQuery UI Lightness. Your sample code on the Getting Started tree item indicates linking to themes like sand, etc. How do I get them, short of saving each and every file and image from your theme directory?

– WB

Hi,

I am trying to edit the grid row and after clicking on save i need to save edited data in data base but editurl is not being involked.

please note that url is being invoked and i could able to retrieve data and see it in a grid.

my html code snippet is like…

jQuery(document).ready(function(){

$(“#save”).click(function (id) {
alert(“Saving…”);
var id = jQuery(“#rowed5”).getGridParam(‘selrow’);
if(id && id!==lastsel2){
jQuery(‘#rowed5’).saveRow(id,false);
lastsel2=id;
}
});

$(“#edit”).click(function (id) {
alert(“Editing…”);
var id = jQuery(“#rowed5”).getGridParam(‘selrow’);
if(id && id!==lastsel2){
jQuery(‘#rowed5’).restoreRow(lastsel2);
jQuery(‘#rowed5′).editRow(id,true);
lastsel2=id;
}
});

var lastsel2;
jQuery(“#rowed5″).jqGrid({
url:’server.do’,
datatype: ‘xml’,
mtype: ‘GET’,
editurl:’server.do’,
height: 250,

colNames:[‘ID Number’,’Name’, ‘Stock’, ‘Ship via’,’Notes’],
colModel:[ {name:’id’,index:’id’, width:90, sorttype:”int”, editable: true},
{name:’name’,index:’name’, width:150,editable: true, editoptions:{size:”20″,maxlength:”30″}},
{name:’stock’,index:’stock’, width:60, editable: true, edittype:”checkbox”,editoptions: {value:”Yes:No”}},
{name:’ship’,index:’ship’, width:90, editable: true, edittype:”select”, editoptions:{value:”FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX”}},
{name:’note’,index:’note’, width:200, sortable:false,editable: true,edittype:”textarea”, editoptions:{rows:”2″,cols:”10″}} ],

caption: “Input Types” });
var mydata2 = [ {id:”12345″,name:”Desktop Computer”,note:”note”,stock:”Yes”,ship:”FedEx”},
{id:”23456″,name:”Laptop”,note:”Long text “,stock:”Yes”,ship:”InTime”},
{id:”34567″,name:”LCD Monitor”,note:”note3″,stock:”Yes”,ship:”TNT”},
{id:”45678″,name:”Speakers”,note:”note”,stock:”No”,ship:”ARAMEX”},
{id:”56789″,name:”Laser Printer”,note:”note2″,stock:”Yes”,ship:”FedEx”},
{id:”67890″,name:”Play Station”,note:”note3″,stock:”No”, ship:”FedEx”},
{id:”76543″,name:”Mobile Telephone”,note:”note”,stock:”Yes”,ship:”ARAMEX”},
{id:”87654″,name:”Server”,note:”note2″,stock:”Yes”,ship:”TNT”},
{id:”98765″,name:”Matrix Printer”,note:”note3″,stock:”No”, ship:”FedEx”} ];
for(var i=0;i<mydata2.length;i++) jQuery("#rowed5").addRowData(mydata2[i].id,mydata2[i]); });

Edit A Record
Save A Record

Hi, I am evaluating which JS framework to use for my upcoming new project. I need all the capabilities that are possible in a grid. Could you let me know what browsers are supported on your latest implementation?

HI everyone

i have a project i am working on and the scenario we have is as follows:
the grid loads data via JSON from the database,[perfectly even],
but our main problem is that it takes forever to display the data.
i have the loadonce : true.

is there a way to make it load at least just the data to be viewed for the specific page.

thank you

if anybody looking for excel like cell selection then here is my creation for the same. http://hiteshagja.com/handle-dragdrop-event-using-jquer