Home > Uncategorized > jQuery Grid 1.0 beta

jQuery Grid 1.0 beta

jQuery Grid is my first jQuery plugin. It is based on grid developed by makoomba. I have rewrite the code (and add a lot of new features), so that the grid can work with jQuery 1.1.2. The grid is a Ajax-enabled JavaScript control that provides solution for representing tabular data on the web. Since the grid is client-side solution and loading data dynamically through Ajax callbacks, it can be integrated with any server side technology.

Features:

  • Full control with JavaScript API
  • Data returned from the server is XML
  • Simple configuration
  • Ability to load big datasets (paging)
  • Resizable columns
  • Server-side sorting
  • Support of links, images, checkboxes
  • You can add more than one grid on a sigle page (master-detail)

Licensing

The plugin is available under the the same double licensing scheme as jQuery itself is (MIT/GPL).

Documentation

The documentation can be found in the documentation page.

Tags:
  1. Andres
    June 5th, 2007 at 21:15 | #1

    Hello, your jgrid is wonderful, but I can’t make it work. It keeps “loading” the content but never loads, the table keeps empty.
    I’m sure that must be something wrong in my PHP, could you please publish the PHP you are using for generate de XML?

    Thanks

  2. tony
    June 6th, 2007 at 17:27 | #2

    Hi Andres,
    here is the basic MySQL PHP example:

    < ?php

    $page = $_GET['page']; // get the requested page
    $limit = $_GET['rows']; // get how many rows we want to have into the grid
    $sidx = $_GET['sidx']; // get index row - i.e. user click to sort
    $sord = $_GET['sord']; // get the direction

    // connect to the database
    $db = mysql_connect("myhost", "user", "pass")
    or die("Connection Error: " . mysql_error());

    // if you do not pass order field please set it
    if(!$sidx) $sidx='id';

    mysql_select_db("mydb") or die("Error conecting to db.");

    // count the total number of pages
    $result = mysql_query("SELECT COUNT(*) AS count FROM myTable");
    $row = mysql_fetch_array($result,MYSQL_ASSOC);
    $count = $row['count'];

    if( $count >0 ) {
    $total_pages = ceil($count/$limit);
    } else {
    $total_pages = 0;
    }

    $start = $limit*$page – $limit; // do not put $limit*($page – 1)

    $SQL = “SELECT id, fld1, fld2, fld3 FROM myTable ORDER BY $sidx $sord LIMIT $start , $limit”;

    $result = mysql_query( $SQL ) or die(“Couldn’t execute query.”.mysql_error());

    if ( stristr($_SERVER["HTTP_ACCEPT"],”application/xhtml+xml”) ) {
    header(“Content-type: application/xhtml+xml”); } else {
    header(“Content-type: text/xml”);
    }
    echo(“< ?xml version=\"1.0\" encoding=\"utf-8\"?>\n”);

    echo “<rows>”;
    echo “<page>”.$page.”</page>”;
    echo “<total>”.$total_pages.”</total>”;

    // be sure to put text data in CDATA

    while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    echo “<row id='”. $row[id].”‘>”;
    echo “<cell>”. $row[fld1].”</cell>”;
    echo “<cell>< ![CDATA[". $row[fld2]."]]></cell>”;
    echo “<cell>”. $row[fld3].”</cell>”;
    echo “</row>”;
    }
    echo “</rows>”;

    ?>

  3. sam
    June 8th, 2007 at 06:57 | #3

    i try to use your script,but the $page value can’t get ,return a object value,please check your script,ths!

  4. sam
    June 8th, 2007 at 07:00 | #4

    and i want to put some chinese in ,but it can’t work, in XML file it can display

  5. sam
    June 8th, 2007 at 07:04 | #5

    below is my php script,can you tell me where i wrong?

    0 ) {
    $total_pages = round($count/$limit,0);
    } else {
    $total_pages = 0;
    }
    $start = $limit*$page – $limit; // do not put $limit*($page – 1)
    $query1=”SELECT * FROM f_ware”;
    $cursor1=exequery($connection,$query1);
    $dom = new DOMDocument(“1.0″,”utf-8″);
    header(“Content-Type: text/xml”);
    $root = $dom->createElement(“rows”);
    $dom->appendChild($root);
    $page = $dom->createElement(“page”);
    $root->appendChild($page);
    $text = $dom->createTextNode(“$page”);
    $page->appendChild($text);
    $total = $dom->createElement(“total”);
    $root->appendChild($total);
    $text = $dom->createTextNode(“$total_pages”);
    $total->appendChild($text);
    $LINKMAN_COUNT=1;
    while($ROW=mysql_fetch_array($cursor1))
    {

    $PRODUCT_ID1=$ROW["ware_id"];
    $ware_name1=$ROW["ware_name"];
    $ware_code1=$ROW["ware_code"];
    $w_count=$ROW["w_count"];
    $w_q=$ROW["w_q"];
    $w_h=$ROW["w_h"];
    $w_l=$ROW["w_l"];
    $w_c=$ROW["w_c"];
    $setdate=$ROW["setdate"];
    $row = $dom->createElement(“row”);
    $root->appendChild($row);
    $id = $dom->createAttribute(“id”);
    $row->appendChild($id);
    $idvalue = $dom->createTextNode(“$LINKMAN_COUNT”);
    $id->appendChild($idvalue);
    $cell = $dom->createElement(“cell”);
    $row->appendChild($cell);
    $text = $dom->createTextNode(“$LINKMAN_COUNT”);
    $cell->appendChild($text);
    $cell = $dom->createElement(“cell”);
    $row->appendChild($cell);
    $text = $dom->createTextNode(“$ware_code1″);
    $cell->appendChild($text);
    $cell = $dom->createElement(“cell”);
    $row->appendChild($cell);
    $text = $dom->createTextNode(“$w_count”);
    $cell->appendChild($text);
    $cell = $dom->createElement(“cell”);
    $row->appendChild($cell);
    $text = $dom->createTextNode(“$setdate”);
    $cell->appendChild($text);
    $cell = $dom->createElement(“cell”);
    $row->appendChild($cell);
    $text = $dom->createTextNode(“$w_q”);
    $cell->appendChild($text);
    $cell = $dom->createElement(“cell”);
    $row->appendChild($cell);
    $text = $dom->createTextNode(“$w_c”);
    $cell->appendChild($text);
    $LINKMAN_COUNT++; }

    echo $dom->saveXML();
    ?>

  6. sam
    June 8th, 2007 at 07:12 | #6

    by the way,can you give a full examples( html file,mysql file,php file),because your Document is not clear ^_^ hehe ,thank you !!! but your plugins is powerful!!

  7. Tony
    June 8th, 2007 at 13:00 | #7

    Hi sam,

    You can go to Examples page and download the working example.
    I have configured two php files with Adodb and MySQL. Both work for me fine.

    Regards

  8. phil
    June 14th, 2007 at 16:34 | #8

    Hi Tony,
    Thanks for your hard work on this. In my application I won’t know how many columns I have until I get the database response (depends on which table I instruct it to query). Am I likely to experience a lot of problems if I tried to modify your code to pass a column heading XML tag which contained the colNames and colModel rather than specifying them in the parameters?

    Thanks

  9. Tony
    June 16th, 2007 at 11:34 | #9

    Hi phil,
    Sorry for the late answer.
    This can be done, but I never try this.
    The main goal is to fill the colModel and colNames array with the data from the xml.
    1. Comment the lines between 98 and 101. This condition check if the arrays of the colModel and colNames are not equall.
    2. Write a custom function which read the header data from xml (the capitions and the real names.) and fill the arrays colNames and colModel with a apropriate data.
    3. Call the function before constructing the grid – i.e before line 263.

    Regards

  10. phil
    June 18th, 2007 at 13:27 | #10

    Tony,
    Thanks. I’ll probably give this a go and see how I get on.
    Phil

  11. June 20th, 2007 at 16:38 | #11

    Hi. Just let me say you did a great plugin.

    I have problem only in FIREFOX I have problem at first data load
    as you can see below
    [ http://img521.imageshack.us/img521/9782/jgridzk9.gif ]
    after a sort everything works fine
    [ http://img224.imageshack.us/img224/1144/jgridafternu1.gif ]

    It seems that with a low number of results/rows there are problems on the first firefox view, everything ok in FF with more data

    Everyone has same problem and above all knows why and the solution…?
    Everything works fine in IE

  12. Tony
    June 21st, 2007 at 11:59 | #12

    Hi Luca,

    Thanks.
    Yes I know about this problem. Currently I resolve the problem, but it seems that this is not good solution. Next week I will publish the corrected version with a another addition – subgrid.

    Best regards
    Tony

  13. Aldo
    June 23rd, 2007 at 14:52 | #13

    Hello

    Is there a way to resize the grid’s witdth and height automatically to the window size when resized and the pager bar is allway at the bottom?

    Thanks
    Aldo

  14. Tony
    June 26th, 2007 at 12:25 | #14

    Hi Alodo,

    Not sure, but when using dimensions plugin this can be done. Always I will make some tests

    Regards

  15. PaPaReNT
    June 30th, 2007 at 18:06 | #15

    Hi there,

    Nice job! But i’ve the same problem of Luca (every cell is on the left). Can you send me your solution, even if it’s not really good :) I’d appreciate.

    Thanks

  16. Tony
    June 30th, 2007 at 19:01 | #16

    PaPaReNT,
    You can download the updated version 1.1beta

    Regards

  17. July 31st, 2007 at 10:30 | #17

    New version fixes the problem I had. Nice job.

    Now a simple question, how to change grid width??? Tried giving the width to the table in html code (i.e. ), this enlarges the table but not the headers…

    in the code I’ve seen something referring to the css style but I have only width value in this class to be changed

    table.scroll th span {
    cursor: e-resize;
    border-right: 1px solid #D6D2C2;
    width: 10px;
    float: right;
    display: block;
    margin: -2px -1px -2px 0px;
    height: 18px;
    overflow: hidden;
    }

    Modifying this only changes header’s cells width but not the entire width…

    see image for example

    http://img179.imageshack.us/img179/8131/jqgrid11lb4.jpg

    any hints???

  18. Tony
    July 31st, 2007 at 14:04 | #18

    Hi Luca,
    Glad to help you.
    The width of the grid is a sum of the width of the columns when you define the grid.
    So, if you have a width of a table, the result will be unexpecetd.
    Actually this is idea – maybe i can do that.
    The idea is – if you specify a width of the table the width of the columns shuld be scaled accordind to that width
    Let see if I can do that :)

    Regards

  19. July 31st, 2007 at 17:10 | #19

    [QUOTE]
    The idea is – if you specify a width of the table the width of the columns shuld be scaled accordind to that width
    [/QUOTE]
    That would be great. best would be the possibility to set the width in the parameters like height, and let the script calculate everything :-))))

    thanks for prompt answer

  20. Jason Lamb
    August 2nd, 2007 at 10:49 | #20

    Hi… first of all… thanks for an amazing plugin!!! The only question(s) that I have is/are as follows:

    I noticed that the examples assume that rows will be returned and the table will display irrespective of whether or not their is data to display. Is there anyway to check before trying to present the table if there are rows to display, if so… present them?

    Another area that this pops up is when one reaches the last page… you can continue moving through blank pages for infinity. Eg) If there were 5 pages to display, one can still move onto pages 6, 7, 8, etc… Is there a way to check if the user is on the last page, if so then disable/prevent them from moving further?

    Thanks!!!

  21. Jason Lamb
    August 2nd, 2007 at 12:27 | #21

    Okay… I am the weakest link!!! I got the grid to stop cycling past the allowed number of pages. My bad!!!

  22. Jason Lamb
    August 2nd, 2007 at 16:16 | #22

    Yeah… it’s me again.

    So far I’ve managed to integrate the plugin quite nicely into a page that I’m currently working on… but I was wondering if anyone has figured out how to set the table to adjust automatically yet? I’ve been running around in circles trying to use the dimensions plugin to set the height. The width is easy enough… but problems arise once the scrollbars pop up. Shouldn’t the height of the table be the sum of the height of all rows once they’ve been added to the table..? Does anyone have any idea how this can be solved?

    Thanks a million…

    Jason

  23. Tony
    August 2nd, 2007 at 17:52 | #23

    Hi Jason,

    Glad to see that you use jqGrid plugin.
    Now about the width and height.
    For the width is easy, since we set it.
    For the height is a difficult. We should calculate a lot of parameters to obtain this feature. I’m not a CSS expert.
    Since I I’m ?° follower of the simple things I can do something like this:
    1. We can set the height of a single row as parameter.
    2. When this parameter is set the common parameter of the table height should be omited.
    3. As a result I know how many rows are returned from the server and then I can set the new height as multiplication from number of returned rows and the height of the single row.

    Is that what you want?

    Note that you will got a unexpected results in this case when you change the:
    table.scroll tbody td {
    ….
    overflow: hidden;
    white-space: nowrap;

    }
    in the css

    Regards
    Tony

  24. August 2nd, 2007 at 18:29 | #24

    this resolves the problem of table width???

    or only single cell’s width???

    is it difficult to set table width as parameter?’?

  25. Tony
    August 2nd, 2007 at 19:11 | #25

    Hi Luca,
    The new version is ready and fixes the problem with a table width.
    There are a lot of new features, but I need to make some additional tests.
    I hope that the new version will be published in Saturday.

    Regards
    Tony

  26. August 3rd, 2007 at 11:02 | #26

    Great job tony.

    I’ll wait for this next release, I’m sure it’ll be as good as other realeses.

    Thanks for accepting our suggestions to create an improved version.

    Counting the hours ’till next release :-)

    luca

  27. August 5th, 2007 at 19:00 | #27

    Tony,

    Thanks for your work on jqGrid. This is a “killer” plugin with a huge amount of utility. IMO jQuery badly deserves a top-notch native grid plugin, and yours is fitting the bill. There is the awesome EXT2JS grid component, but for some reason it feels like jQuery is the redheaded stepchild of that project. It’s always nice to have alternatives…

    Quick ?: Did you write the column sorting method(s)? I am thinking about “mashing in” Christian Bach’s modular/extendable methods from tablesorter2 (http://lovepeacenukes.com/tablesorter/2.0/)… but will wait until releases to do benchmarks.

    Keep up the great work! I’m looking forward to the next version.

    ~ Brice

  28. Tony
    August 6th, 2007 at 09:59 | #28

    Brice,

    Thank you for the good words. I think this plugin will be better.
    I know about EXTJS and will not comment…
    I think the idea of jQuery UI is great and hope that in the near future this will be one of the best UI.

    Now about your question- This is possible and require a lot of logic. I will try…
    That what I will try (and need) in the moment is to implement the grid as something like a autocomplete combobox. Yes, there are a lot of such plugins, but none of them do that I want and they have a strange behaviour in my project.

    Thank you again
    Regards

  29. Rod
    August 15th, 2007 at 09:30 | #29

    Hi Tony,

    Didn’t know where to post this so i will just put it here.
    I found a little bug whereby if a user chooses a row limit of say 50, and they are on the last page of table with a resultset of only 40 records then the table will freeze on loading.

    I fixed this by altering the populate function associated with selbox change event. The function associated with the selbox change event now passes a reference to the populate function indicating that the ajax call should use page 1 instead of the current page.

    If that didn’t make any sense please see the code below…


    $(p.pager).find(“select”).bind(‘change’,function() {
    p.rowNum = this.value>0 ? this.value : p.rowNum; populate(‘page’);
    if(onSelectRow) {onSelectRow(p.selrow = null);} else {p.selrow = null;}
    });


    var populate = function (source) {
    if(!grid.hDiv.loading) {
    if(source == ‘page’){ p.page = 1; }

    By the way your plugin is tops!

  30. August 15th, 2007 at 11:59 | #30

    Rod,
    Thank you very much for the correction. If possible can you send me a link to this problem, if not please write me the initial settings of the grid i.e $(“some”).jqGrid(..). I will simulate the problem.
    Reason to do that is that the user must stay in the same settings and look more rows. I will investigate again the code and eventually make the needed (your) changes.

    Regards

  31. ashish
    December 3rd, 2007 at 08:08 | #31

    It’s really wonderful. But I am facing a problem while adding my requirement as In my case the total amount will be calculated automatically by adding the amount + tax. I think that this can be achieved using any method given below …

    1. Reloading the entire row data (getting that row again from the server using ajax)
    2. Reloading the complete grid, but in this case I have to take care of the current paging and sorting order.
    3. Updating the row data in a callback function using setRowData() .. -> I have tried this BUT it is NOT working.It is working if I pass a static rowID in the 1st param but it is not working when I am passing dynamic rowID + its data which I am getting as a result in my callback function.

    Can anyone help me in this !

    Thanks
    Ashish Sharma

  32. tony
    December 3rd, 2007 at 15:28 | #32

    Ashish Sharma,

    Could you please describe in more detail what you try to do?
    Which methods do you use?
    If possible please post a code.

  33. January 29th, 2008 at 10:05 | #33

    Hi there Tony, this is definitely the best ajax datagrid I have seen and I have tried a lot! My problem though is that I cannot figure out how to get the grid to update the table after inline edit.

    I can see that inline editing works and that it updates the dataset fine – but how does it then perform an update query on the mysql table?

    I really hope you can help. Thanks for your time.
    Cheers
    Aleonz

  34. February 1st, 2008 at 15:30 | #34

    Hi Aleonz,

    If you look in demo page Row Editing -> Basic Example
    you should note two url – one for query data (parameter url)
    and another for saving data to the server (editurl)

    Let consider this example, and suppose that the editurl has another name
    edit.php (not like in example page server.php)

    If you call save row method the data is posted to the server via edit.php and you can
    obtain the values and set it to the database

    edit.php can look like this:

    < ?php

    $uniqrow = $_POST['id']; // this is id of grid
    $date_inv = $_POST['invdate']; // this is the name attr from colModel
    $clientname = $_POST['name']; // this is a name attr from colModel
    ....

    $SQL = "UPDATE mytable set invdate='".$date_inv."', name ='".$clientname."' WHERE tableid=".$uniqrow;
    $db = mysql_connect($dbhost, $dbuser, $dbpassword)
    or die("Connection Error: " . mysql_error());

    mysql_select_db($database) or die("Error conecting to db.");
    $result = mysql_query($SQL);
    ....
    ?>

    Note that you should perform additional checking of data before you update the database.

    If you need help please let me known
    Tony

  35. Mr Bola A Bola
    February 15th, 2008 at 09:52 | #35

    Hello,

    A very nice plugin!
    It would be great to see a fuller verson of documentation. For example features described in http://www.trirand.com/blog/?p=3#comment-273 can not be found in http://www.trirand.com/blog/?page_id=4 (documentation). For some reason PHP scripts in example pages are cut on most interesting place.

    Thanks

  36. Nick Ace
    March 19th, 2008 at 06:24 | #36

    Hello This is great; I been looking for a nice grid for quite sometime now I try creating my own and as I see this (this great);
    – One thing is your documentation is not that detailed. for the php part and it would be very nice if it you would have a callback return that canbe catch after the grid calls the edit url so we can test the request and output value for our evaluation.

    – I kind of encounter a Problem in IE your x button in IE does not appear its there when you click it and you can also right click it and select to show picture it will show it to you.

    -Thank this is a realy realy good grid

  37. March 28th, 2008 at 05:12 | #37

    this is a realy realy good grid

  38. October 19th, 2008 at 03:11 | #38

    Hi

    It is a really useful plugin. Saves a lot of time for me

    Thank you very much.

  39. Suresh Nimbalkar
    August 1st, 2009 at 06:45 | #39

    Great work!

    It would be nice if the grid has a filter option by clicking on the column header and selecting entry/ies which you want in the filter. Once you filter entries based on your filter criteria, a way to select all entries at once will save a lot of user time in selecting relevant entries.

  40. paulojsp
    December 16th, 2009 at 14:46 | #40

    I can’t make it work… :(

    i think my php is work fine.. but i’m getting a error:
    [Exception] TypeError: Cannot read property ‘nodeType’ of null

    can anyone help me??

  41. Bob Kruithof
    March 25th, 2011 at 16:03 | #41

    The documentation link gives me a 404 error, mate ;)

  42. Bit Bucket
    July 10th, 2012 at 01:09 | #42

    Too bad this is bloated, overly complex, and poorly documented because the rendered product with UI is actually surprisingly nice.

  1. June 30th, 2007 at 18:56 | #1
  2. May 19th, 2009 at 19:24 | #2

Anti-spam: complete the taskWordPress CAPTCHA


Privacy Policy   Terms and Conditions   Contact Information