jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

How does true scrolling work?

08/02/2010
22:28

monoclast

Cedar Park, TX, USA

Member

Members

Forum Posts: 12

Member Since:
08/02/2010

Offline

The demonstration page for New in Version 3.6 > True Scrolling Rows doesn't show the bigset.php PHP file, and doesn't indicate which jqGrid options are key to getting real-time scrolling to work correctly.

Also, when I look at the documentation for scrolling options, it isn't clear what is required, which is frustrating, to say the least.

I've added the scroll:1 option to my grid, but apparently that's not enough. I don't see any difference in the parameters jqGrid is passing to my grid url: option PHP script. So obviously I am missing something crucial.

Can someone please list exactly what is required here, and/or update the demo page, and/or update the documentation to show clearly what is required to get real-time "true scrolling" working?

10/02/2010
14:55

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

This is right. There should be no change in the server response. Everthing is done client side, the same way as you prepare the paging mechanizm.

Also it seems that your sever response is not correct. There is not somthing special. Just look deeper in the demo.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

16/02/2010
21:49

monoclast

Cedar Park, TX, USA

Member

Members

Forum Posts: 12

Member Since:
08/02/2010

Offline

LOL... I truly wish I could "look deeper in the demo", but the demo isn't very deep to begin with! You don't allow us to view the PHP file in the demo. And again, the demo doesn't tell exactly which options are required to make it work. Obviously it's not as straight forward as you seem to indicate!

I just did a small test, and it's still not working. See if you can tell me why:

Here's my index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT.....t;>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-smoothness/jquery-ui-1.7.2.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <script type="text/javascript" language="javascript" src="javascript/jquery-1.4.1.min.js"></script> <script type="text/javascript" language="javascript" src="javascript/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" language="javascript" src="javascript/i18n/grid.locale-en.js"></script> <script type="text/javascript" language="javascript" src="javascript/jquery.jqGrid.min.js"></script> <script type="text/javascript" language="javascript" src="javascript/index.js"></script> </head> <body> <table id="my_grid"></table> <div id="my_grid_pager"></div> </body> </html>

Next, here's my index.js file:

jQuery(document).ready(function() { my_grid = jQuery("#my_grid").jqGrid({ url: 'php/get_grid_data.php', datatype: 'xml', mtype: 'POST', colNames: ['ID', 'Word'], colModel: [ {name:'id', index:'id', width:50, key:true}, {name:'word', index:'word', width:300}, ], scroll: 1, pager: '#my_grid_pager', gridview: true, viewrecords: true, rowNum: 100, sortname: 'id', sortorder: 'asc', emptyrecords: 'Nothing to display', caption: 'My Grid', }); jQuery("#my_grid").navGrid('#my_grid_pager',{edit:false, add:false, del:false, refresh:false}); });

Here's my get_grid_data.php file:

<?php

// obtain passed-in parameters
$page = $_POST['page']; $limit = $_POST['rows'];$sortindex = $_POST['sidx']; $sortorder = $_POST['sord'];

if ($page == 0) $page = 1;
if ($limit == 0) $limit = 1; if ($sortindex == '') $sortindex = 'date'; if ($sortorder == '') $sortorder = 'DESC';

$result = db_count_grid_rows ($totalrows);

if ($totalrows > 0) { $totalpages = ceil ($totalrows / $limit); } else { $totalpages = 0; }

if ($page > $totalpages) $page = $totalpages;
$start = ($limit * $page) - $limit;
if ($start < 0) $start = 0;
$result = db_get_grid_data ($sortindex, $sortorder, $start, $limit, $rows);

header ("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );  header ("Cache-Control: no-cache, must-revalidate" );  header ("Pragma: no-cache" ); header ("Content-type: text/xml");
$s = "<?xml version='1.0' encoding='utf-8'?>\n"; $s .= "<rows>\n"; $s .= " <page>" . $page . "</page>\n"; $s .= " <total>" . $totalpages . "</total>\n"; $s .= " <records>" . count ($rows) . "</records>\n"; foreach ($rows as $row) { $s .= " <row id=\"" . $row['id'] . "\">\n"; $s .= " <cell>" . $row['id'] . "</cell>\n"; $s .= " <cell>" . $row['word'] . "</cell>\n"; $s .= " </row>\n"; } $s .= "</rows>\n";  echo $s;
// ------------------------------------------------------------------------------------------------
function db_count_grid_rows (&$count)  {
global $db_host; global $db_user; global $db_pass; global $db_name;

$result = true; // default: no error
$db = mysql_connect ($db_host, $db_user, $db_pass); if (!$db)   { $result = mysql_error ();   }
else
{
if (mysql_select_db ($db_name))   { $query = "SELECT COUNT(*) AS count FROM my_table"; $db_result = mysql_query ($query); $row = mysql_fetch_array ($db_result);   $count = $row['count']; } else
{
$count = 0; $err = mysql_error(); $result = "mysql_select_db ($db_name) failed: $err"; } mysql_close ($db);   } return $result; }
function db_get_grid_data ($sortindex, $sortorder, $start, $numrows, &$rows)  {
global $db_host; global $db_user; global $db_pass; global $db_name;
$result = true; // default: rows found
$db = mysql_connect ($db_host, $db_user, $db_pass);   if (!$db)   { $result = mysql_error ($db);   }
else
{
if (mysql_select_db ($db_name, $db))
{
$sortindex = mysql_real_escape_string ($sortindex); $sortorder = mysql_real_escape_string ($sortorder); $start = mysql_real_escape_string ($start); $numrows = mysql_real_escape_string ($numrows);
$query = "SELECT * FROM my_table ORDER BY $sortindex $sortorder LIMIT $start , $numrows";

$db_result = mysql_query ($query, $db); if ($db_result !== false) { $num = mysql_num_rows ($db_result); if ($num !== false) { while ($row = mysql_fetch_array ($db_result)) { $rows[] = $row; } } else { $err = mysql_error(); if ($err != "") { $result = "$err (QUERY = $query)"; } } } else { $err = mysql_error ($db); $result = "mysql_query ($query) failed: $err"; } } else { $err = mysql_error(); $result = "mysql_select_db ($db_name) failed: $err"; } mysql_close ($db); } return $result; } ?>

When I load the HTML page, the PHP file gets called just once, to load 100 rows starting at row 1. It never gets called again.

So what's wrong or missing here?

16/02/2010
22:23

monoclast

Cedar Park, TX, USA

Member

Members

Forum Posts: 12

Member Since:
08/02/2010

Offline

Wow... This forum really screws up pasted code!

So if you want to see the actual code, here is an archive of it - I included a mySQL dump of the actual database being queried as well:

grid_test.zip

The first person to tell me what is wrong with the code gets a gold star. 🙂

17/02/2010
11:40

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

How many goldstars? Wink

The error is in your php script just replace

$s .= "<rows>\n";
$s .= "   <page>" . $page . "</page>\n";
$s .= "   <total>" . $totalpages . "</total>\n";
$s .= "   <records>" . count ($rows) . "</records>\n";

with

$s .= "<rows>\n";
$s .= "   <page>" . $page . "</page>\n";
$s .= "   <total>" . count ($rows) . "</total>\n";
$s .= "   <records>" .$totalpages . "</records>\n";

By the way you have a error in th js

        colModel:
       [
            {name:'id', index:'id', width:50, key:true},
            {name:'word', index:'word', width:300}, <-------- This will not work in IE
       ],

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

17/02/2010
17:33

monoclast

Cedar Park, TX, USA

Member

Members

Forum Posts: 12

Member Since:
08/02/2010

Offline

Aha!!!! It works!!!!! Thank you so much for spotting that!

I have fixed my sloppy Javascript as well, thanks to you. : )

17/02/2010
19:31

monoclast

Cedar Park, TX, USA

Member

Members

Forum Posts: 12

Member Since:
08/02/2010

Offline

One last question:

If I change the index.js rowNum: argument to 1000, the grid only loads the first 1000 rows. Is there something else I need to change to make it support loading 1000 rows at a time, or is it limited to auto-loading only 100?

20/02/2010
10:07

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Look afgain in your php script, maybe you return only 100 from here

No limitations at all

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

20/02/2010
17:10

monoclast

Cedar Park, TX, USA

Member

Members

Forum Posts: 12

Member Since:
08/02/2010

Offline

Ok thanks I'll debug it!

08/03/2010
21:40

monoclast

Cedar Park, TX, USA

Member

Members

Forum Posts: 12

Member Since:
08/02/2010

Offline

I find now that this is actually not working correctly at all! Apparently there is a bug in jqGrid!

Only the first 400 rows are loaded, and after that jqGrid just stops invoking the PHP file!

I have documented it here with a live example:

/blog/?page_id=393/help/true-scrolling-bug/

Any comments would be appreciated!

09/03/2010
22:50

rudiger

Member

Members

Forum Posts: 3

Member Since:
09/03/2010

Offline

tony said:

Hello,

How many goldstars?

The error is in your php script just replace

$s .= "<rows>n";
$s .= "   <page>" . $page . "</page>n";
$s .= "   <total>" . $totalpages . "</total>n";
$s .= "   <records>" . count ($rows) . "</records>n";

with

$s .= "<rows>n";
$s .= "   <page>" . $page . "</page>n";
$s .= "   <total>" . count ($rows) . "</total>n";
$s .= "   <records>" .$totalpages . "</records>n";

I'm having the same problem... I tried both XML and JSON responses, and the true scrolling does not work...

I tried this "fix", and although it scrolls, the bottom row of the grid becomes the totalPages (500,000), instead of the count (10,000,000)...

The examples on the site work with the original PHP? Please tell us the way the site examples are working?

10/03/2010
01:02

monoclast

Cedar Park, TX, USA

Member

Members

Forum Posts: 12

Member Since:
08/02/2010

Offline

As I stated in my initial post, it sure would be nice if you would actually allow people to read the PHP you are using on your demo page.

Without being able to read the PHP we are left strictly guessing from seemingly incorrect documentation!

10/03/2010
01:25

rudiger

Member

Members

Forum Posts: 3

Member Since:
09/03/2010

Offline

This looks like a bug.

The behavior for the examples is way different in IE8 (version 8.0.7600.16385) and in Firefox (version 3.6)...

IE8 won't display more than 50,000 (in the 500,000 row example).

10/03/2010
01:42

monoclast

Cedar Park, TX, USA

Member

Members

Forum Posts: 12

Member Since:
08/02/2010

Offline

Well, since we can't persuade you to help, I looked at the code again with a fresh mind today, and I figured it out on my own. 🙂

The documentation says:

total: the total pages in the query

records: the total records from the query

But this is misleading and incorrect. What is should say is:

total: the total number of pages in the entire data set

records: the total number of records in the entire data set

The phrase "in the query" is very misleading, because with "True Scrolling", you actually query the database for only a small number of rows at a time! So of course the total of the query is not the entire data set.

Rudiger: If you use this corrected code (notice the records element value), it works correctly:

$s = "<?xml version='1.0' encoding='utf-8'?>\n";

$s .= "<rows>\n";

$s .= " <page>" . $page . "</page>\n";

$s .= " <total>" . $totalpages . "</total>\n";

$s .= " <records>" . $totalrows . "</records>\n";

foreach ($rows as $row)

{

$s .= " <row id="" . $row['id'] . "">\n";

$s .= " <cell>" . $row['id'] . "</cell>\n";

$s .= " <cell>" . $row['word'] . "</cell>\n";

$s .= " </row>\n";

}

$s .= "</rows>\n";

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
53 Guest(s)

Currently Browsing this Page:
1 Guest(s)