Home > jQuery > jqGrid 3.5 beta

jqGrid 3.5 beta

May 24th, 2009

I’m very happy to publish jqGrid 3.5 beta version on this day.
The cahnges are so many so that I will not publish them here. If you download the release you will find a Changes.txt file.

Three very important things are happen with 3.5 beta
1. jQuery UI Theme integration.
2. New rendering engine, which improves the loading speed in some cases up to 10 time faster as of previous releases.
3. At end I have made a decision to remove the loader. From this release I introduce a new download manager which simplicity the procedure of settings the grid to work. Here you can choose what to download. All the files are splited in one file.

As usual the last development source code can be obtained from GitHub.

Do not forget to check the new things here


  1. engineerachu
    August 4th, 2009 at 19:25 | #1

    I’m using jqGrid in ASP.NET. jqGrid is literally good. As of now, I’m using Handler(ashx) or WebService(asmx) to convert the DataTable into JSON and display in the Grid. Can I use c# code behind and bind the Data? I mean c# method convert the DataTable into JSON? I’m trying, if any one has done or have any idea, please let me know.

    Thanks and Regards,
    Achutha Krishnan

  2. Demetri
    August 18th, 2009 at 15:31 | #2

    How to adjust jqGid font size:
    I found solution in the wiki Documentation ‘How to Install’

    just reduce the font size of body section,

    html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;

  3. August 22nd, 2009 at 22:36 | #3

    Hi Tony
    I am using your latest grid 3.5 and modifying it according to my needs. I have an issue. While resizing the column the whole columns get messed up ( even on initial load ).
    I had to comment this line from css
    .ui-jqgrid .ui-jqgrid-hbox
    to show it properly on the initial load that alligned the headers and the data columns perfectly.
    But the columns(both data and header ) are still showing up less then the actual width of the whole table.
    This is what i have for the initialization of the grid.

    datatype: “JSON”,
    colNames:[‘Campaign Name’,’Status’, ‘Start Date’, ‘Total Contacts’,’Sent’,’Actions’],
    { name:’name’,index:’id’, jsonmap:’name’, width:150 },
    { name:’status’,index:’invdate’, jsonmap:’status’, width:150 },
    { name:’startDate’,index:’name asc, invdate’, jsonmap:’startDate’, width:150 },
    { name:’totalContacts’,index:’amount’, width:150, jsonmap:’endDate’, align:”right” },
    { name:’JobvitesSent’,index:’tax’, width:150, jsonmap:’userId’, align:”right” },
    { name:’Actions’,index:’total’, width:150, jsonmap:’type’, align:”right” }
    viewrecords: true,
    //height: 300,
    jsonReader : {
    root: “resultList”,
    page: “page”,
    total: “total”,
    records: “count”,
    repeatitems: false,
    cell: “”,
    id: “0”,

    Not sure what i am doing wrong. Any help would be greatly appreciated.

  4. August 23rd, 2009 at 03:32 | #4

    i figured out the problem. I put the jqgrid in the tag that was messing up the whole css. For now i have removed the center tags from the page.

  5. August 23rd, 2009 at 03:33 | #5

    <center> the rendering removed the tag name from the text.

  6. zeke0
    August 31st, 2009 at 21:17 | #6

    don’t work for me,
    table {

  7. September 4th, 2009 at 13:33 | #7

    Dear all,

    Am dealing with a problem in pagination.
    My queries are completely correct.
    When I am in the second page of a jqgrid and press sort by one column it returns me
    to the first page again.
    As I realize the browser sent the first page every time i press in the head columns sorting.

    Can anyone give a solution if there is?

    Thanks in advance,


  8. Carlos
    September 4th, 2009 at 22:59 | #8

    Great work with the grid Tony, thanks so much for your contribution…I have the following question though: Is there a way or a property that can be set on the grid so that it doesn’t wrap text. Right now, if the text goes over the columns width, all that shows up is three dots “…” We want to be able to show all the text on the column so that it can be scanned quicky without having to hover over the column to view the contents. Thanks again!

  9. Kaifi
    September 16th, 2009 at 09:33 | #9

    Hi Tony,
    I dont need to say that its a great plugin ever made..
    but i have issue :(, i want to use a separate url for my searching needs but it is using the “editurl” property can i change it to something else?how?
    plz reply asap…
    thanks 🙂

  10. Kumar
    September 22nd, 2009 at 10:37 | #10

    Even after putting jquery.searchFilter.js can’t able to search multiple conditions in IE6 and IE7…

  11. Casey
    September 30th, 2009 at 20:19 | #11

    Nice plugin.

    I’m using the grid (version 3.5) to bind to a javascript array of data. All CRUD operations are being done on the client. I’d like to keep the rows limited to 4 per ‘page’ of data. When ever I add the fifth row, the new row is appended to the current ‘page’ of data and not to a new ‘page’ of data. I set the ‘rownum’ property to 4 inside the option too. This method adds a new record and immediately put it into edit mode using the inline edit methods:

    function AddNew()
    var grid = $(‘#CodeGrid’);
    var total = grid.getGridParam(‘records’);
    grid.addRowData(total + 1, emptyItem); // add a new row with empty data
    SetupActions(‘CodeGrid’, total + 1); // set up some CRUD buttons
    grid.editRow(total + 1); // put new row into inline-edit mode
    ToggleEditMode(‘CodeGrid’, total + 1); // disable/enable some buttons

    Is there some way to add the new row to a new page of data?

  12. Casey
    October 5th, 2009 at 21:30 | #12

    OK, I figured out how to do deal with my paging issue. If anyone’s interested:

    function AddNew()
    var grid = jQuery(‘#CodeGrid’);
    var total = parseInt(grid.getGridParam(‘records’), 10); // get total records
    var maxRow = grid.getGridParam(‘rowNum’);// get rows per page
    if ((total + 1) % maxRow == 1) { // if the next row needs to be on next page
    var nextPagenum = Math.ceil((total + 1) / maxRow); // calc next page
    grid.setPostDataItem(‘page’, nextPagenum.toString());// set post data
    grid[0].p.page = nextPagenum.toString();// set page number
    emptyItem.id = total + 1; // set empty item’s id
    _dataArray.push(emptyItem); // add to local array first
    grid.trigger(“reloadGrid”); // trigger reload to get data from a function
    SetupActions(‘CodeGrid’, -1); // set up CRUD buttons
    grid.editRow(total + 1); // put new row into ‘edit mode’

  13. bill_mouse
    October 11th, 2009 at 14:09 | #13

    I try to integrate the jqgride with grails, and successed using firefox but failed in ie6&7. There is a script error when jqgrid call the Json-url. Any advise?

  14. MN
    November 15th, 2009 at 10:26 | #14

    I want to convert html table to grid, but there is an jserror : Microsoft JScript runtime error: ‘colModel[…].name’ is null or not an object

    my html code is

    Find by name: <input size="40" name="q" value="”/>


    <input type="hidden" name="pg" value="” />
    <input type="button" class="editor-button" value="| << " name="btnpager" disabled=”disabled” onclick=”pg.value=’1′;this.form.submit()”/>
    <input type="button" class="editor-button" value=" << " name="btnpager" disabled=”disabled” onclick=”pg.value=”;this.form.submit()”/>

    <%for (int i = 1; i
    <option selected=”true” value=””>

    > ” name=”btnpager” disabled=”disabled” onclick=”pg.value=”;this.form.submit()”/>
    > |” name=”btnpager” disabled=”disabled” onclick=”pg.value=”;this.form.submit()”/>


    I wonder if you could help me

  15. KEM
    November 23rd, 2009 at 13:09 | #15


    Yes, Me too woluld like to see a feature like this. Wrapping of column header text should be possible.

  16. Brett Green
    December 3rd, 2009 at 04:47 | #16

    For the TableToGrid… make sure your table definition has thead and tbody sections as follows:

    col 1col 2

    data 1data 2

    Looks like the function looks for the thead to build colnames, etc.

  17. Deepalakshmik
    December 13th, 2009 at 21:57 | #17

    I am trying to get a grid working using xmlstring as the datatype. I am getting “E is null” error in firefox and node type is null error in IE. I am passing the following xmlstring to the grid.
    header(‘Content-type: text/xml;charset=utf-8’)1312122009-12-01450.0040.00490.00 112009-11-01860.0012.00872.00 102009-10-01780.0020.00800.00 92009-09-01345.0015.00360.00

    And I have pasted below my code for grid:



    datatype: ‘xmlstring’,
    datastr: jgrid_data,
    colNames:[‘Inv No’,’Date’, ‘Amount’,’Tax’,’Total’,’Notes’],
    colModel :[
    {name:’invid’, index:’invid’, width:55},
    {name:’invdate’, index:’invdate’, width:90},
    {name:’amount’, index:’amount’, width:80, align:’right’},
    {name:’tax’, index:’tax’, width:80, align:’right’},
    {name:’total’, index:’total’, width:80, align:’right’},
    {name:’note’, index:’note’, width:150, sortable:false}
    height: ‘auto’,
    pager: ‘#pager’,
    rowNum: 4,
    viewrecords: true,
    caption: ‘My first grid’

    “, “inline”
    Please let me know what the problem is. I am not able to proceed forward because of this error.

    Thanks in advance

  18. Siddharth
    December 15th, 2009 at 11:13 | #18

    I want to edit the table row using jquery ‘tableToGrid’,But dunno how to proceed as there is no reference available for that.
    So, Please let me know how to edit the table row while using ‘tableToGrid’. Any suggestions/help related to this will be highly appreciated.


  19. RajSadagopan
    December 17th, 2009 at 22:20 | #19


    I would like to have an example of how to use jqGrid with JSP? All the examples in the web site talks only about using PHP. Any help is appreciated.


  20. December 27th, 2009 at 23:52 | #20

    ithink this problem is related to XML content type. i had the same problem and solved it with this header:


    Give the second parameter as true to override any previous content type header.

  21. Pablo
    January 14th, 2010 at 21:32 | #21

    Hi guys, i’m having some issues. Once I completed filters and try to search, I get he “loading” splash and the overlay dissapears, letting to manipulate the grid. I want to keep the grid inactive until I close the search modal. Thanks!

    url: ”,
    datatype: ‘json’,
    mtype: ‘GET’,
    loadui: ‘block’,
    multiselect: false,
    colNames: [‘Id’, ‘Creada’, ‘Titulo’, ‘Opciones’],
    colModel: [
    { index: ‘Id’, hidden: true, search: false },
    { index: ‘Creada’, width: 50, align: ‘left’, searchoptions: { dataInit: datePick, sopt: [‘le’, ‘ge’, ‘eq’]} },
    { index: ‘Titulo’, width: 150, align: ‘left’, searchoptions: { sopt: [‘cn’]} },
    { index: ‘Opciones’, width: 50, formatter: formatOpciones, align: ‘center’, sortable: false, search: false }

    pager: jQuery(‘#pager’),
    rowNum: 8,
    rowList: [8, 15, 20],
    sortname: ‘Creada’,
    sortorder: ‘desc’,
    viewrecords: true,
    imgpath: ‘/content/cupertino/images’,
    height: 240,
    width: 867,
    hidegrid: false
    }).navGrid(jQuery(‘#pager’), { search: true, edit: false, add: false, del: false, searchtext: “Buscar” },
    {}, // default settings for edit
    {}, // default settings for add
    {}, // delete instead that del:false we need this
    {closeAfterSearch: false, drag: false, closeOnEscape: true }, // search options
    {} /* view parameters*/



  22. amit kumar
    March 8th, 2010 at 14:56 | #22

    hi Calos, did you get the solution. I’m also facing the same problem. Please forward me the solution, if you have already figured out. Thank you.

  23. karim
    March 17th, 2010 at 13:57 | #23

    Please Tony,
    Why the number of fields in the xls file after the export does’nt depass 1000 fields???

  24. May 11th, 2010 at 21:12 | #24


    I’m trying to open a new window in the onCellSelect event and can’t get it to work.

    onCellSelect: function(rowid,iCol,cellcontent){
    if (iCol == 0)
    $(‘a[href=”myserver/pti/parview/#shipdetail.cfm?ThisSN=’+cellcontent+'”]’).attr(“target”, “_blank”);

    How can I do this? thanks, Jim

  25. July 3rd, 2010 at 10:00 | #25

    hi i’m trying with editing_data/edit_types/ and i want to set edit form with size and text input length ,how i set this edit form ?

  26. Ozahata
    August 10th, 2010 at 14:30 | #26

    You need insert this tag in the first line of html:

  27. Ozahata
    August 10th, 2010 at 14:33 | #27

    Demetri :
    How to adjust jqGid font size:
    I found solution in the wiki Documentation ‘How to Install’
    just reduce the font size of body section,
    html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;

    You need insert this tag in the first line of html:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

  28. Andre
    September 17th, 2010 at 11:00 | #28

    Hi, All. How are we get value of all column from jqgrid? What sintax do I used?

  29. Pedro
    November 16th, 2010 at 15:27 | #29


    That is exactly right! I sat with these styling issues for hours trying different things. The solution of having inline styles did not sit well with me and your solution fixed the problems.

    Thanks for that

Comment pages
1 5 6 7 362
Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information