Home > jQuery > jQuery Grid 3.0 final preview

jQuery Grid 3.0 final preview

Hi all. After a lot of work and help of community I have done the final release of jqGrid. The changes of the final release are big. First of all jqGrid have modular structure. The grid is divided in four modules – basic grid, inline editing module, subgrid module and the new form editing module. This way it is easy to do something into the module without changing the basic of the grid. The new form editing module uses two external plugins (I do not want to reinvert the wheel) jqModal and jqDnR from Brice Burgess.
The second news is that the grid has a lot of new themes. I hope you will enjoy them.
Of course there are a lot of bug fixes.
The preview release can be found here

This is not official release. It will be official when the documentation is done. I’m working hard on this.

I hope you will Enjoy

Tags:
  1. March 7th, 2008 at 11:49 | #1

    Pretty cool~

    Thanks for your work~

  2. March 7th, 2008 at 16:42 | #2

    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.

  3. March 7th, 2008 at 17:35 | #3

    Hi Steve,
    Thank you for the compliment.
    >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

    There is a new method sortData (not in current documentation) which do that :)
    It will be described in the upcomming docs

    Regards
    Tony

  4. Nicolas
    March 14th, 2008 at 13:10 | #4

    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

  5. Juan Camacho
    March 15th, 2008 at 20:34 | #5

    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.

  6. andy
    March 17th, 2008 at 03:49 | #6

    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.

  7. tony
    March 17th, 2008 at 12:02 | #7

    @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

  8. April 28th, 2008 at 15:38 | #8

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

  9. Ana Donna
    May 1st, 2008 at 15:10 | #9

    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

  10. tony
    May 3rd, 2008 at 17:18 | #10

    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

  11. amin
    June 20th, 2008 at 10:18 | #11

    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

  12. tony
    June 22nd, 2008 at 11:25 | #12

    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

  13. jconst
    July 23rd, 2008 at 19:44 | #13

    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

  14. tony
    July 24th, 2008 at 19:38 | #14

    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},…)

    }
    }

  15. milo
    August 1st, 2008 at 13:27 | #15

    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

  16. milo
    August 1st, 2008 at 13:32 | #16

    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

    ………………..

    ……………….

  17. amir
    October 4th, 2008 at 00:48 | #17

    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” });
    });

  18. Anand
    December 5th, 2008 at 19:27 | #18

    Hello Tony

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

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

    Thanks
    Anand

  19. April 28th, 2009 at 01:07 | #19

    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

  20. Ravi
    September 1st, 2009 at 09:47 | #20

    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

  21. Jquery user
    March 11th, 2011 at 02:35 | #21

    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?

  22. Lesego Thekiso
    March 2nd, 2012 at 12:02 | #22

    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

  23. April 1st, 2012 at 12:48 | #23

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

  1. No trackbacks yet.

In an effort to prevent automatic filling, you should perform a task displayed below.


Privacy Policy   Terms and Conditions   Contact Information