jQuery Grid Plugin - jqGrid - Topic: [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

IKB56 on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Sat, 04 Jun 2011 20:52:47 +0300

No need to check totalrows. Forgot to remove from the sample code.

IKB56

kobruleht on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Sat, 04 Jun 2011 20:37:31 +0300

code:

$totalrows = isset($_REQUEST['totalrows']) ? $_REQUEST['totalrows']: false;
if($totalrows) {
$limit = $totalrows;
}

why totalrows are checked? jqGrid does have such parameter in doc

IKB56 on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Sat, 04 Jun 2011 16:59:54 +0300

Hello,

This is my test program. Please refer to the huge test data.

---index.html ----------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Virtual scrolling Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.multiselect.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#scroll").jqGrid({
        url:'testData.php',
        datatype:"json",
        height:750,
        width:600,
        altRows:true,
        shrinkToFit:false,
        colNames:['Index','Name','Code'],
        colModel:[
     {name:'item_id',index:'item_id', width:65, sorttype:'int'},
     {name:'item',index:'item', width:150},
     {name:'item_cd',index:'item_cd', width:100}
        ],
        rowNum:100,
        rowList:[40,60,100],
        scroll:1,
        loadonce:false,
        mtype:"GET",
        rownumbers:true,
        rownumWidth:70,
        gridview:true,
        pager:'#pscroll',
        viewrecords:true,
        caption:'Huge DataGrid'
    });
    jQuery("#scroll").jqGrid('navGrid','#pscroll',{del:false,add:false,edit:false},{},{},{},{multipleSearch:true});
});
</script>
</head>
<body>
<table id="scroll"></table>
<div id="pscroll"></div>
</body>
</html>

--- testData.php ----------------------------------------------------------------

<?php

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

$totalrows = isset($_REQUEST['totalrows']) ? $_REQUEST['totalrows']: false;
if($totalrows) {
$limit = $totalrows;
}

//data count
//$count = 5000000;    // OK
//$count = 5500000;    // OK
//$count = 6000000;    // NG
//$count = 7000000;    // NG
$count = 50000000;     // NG
//$count = 500000000; // NG
//$count = 2000000000; // NG

if( $count > 0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
if ($limit<0) $limit = 0;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
if ($start<0) $start = 0;

$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;

$dc = $limit;
$rdc = $count - $start;
if ($dc > $rdc) {
    $dc = $rdc;
}
for ($ir = 0; $ir < $dc; $ir++) {
    $n = $start + $ir + 1;
    $row[item_id] = 'item_id ' .$n;
    $row[item] = 'item ' .$n;
    $row[item_cd] = 'item_cd ' .$n;
    $responce->rows[$ir]['id']=$row[item_id];
    $responce->rows[$ir]['cell']=array($row[item_id],$row[item],$row[item_cd]);
}
echo json_encode($responce);

Leandro Irgang on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Sat, 04 Jun 2011 01:06:26 +0300

Hello... I will try to simulate this problem later and see how i can help

Leandro Irgang

IKB56 on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Fri, 03 Jun 2011 20:32:18 +0300

Thank you for useful information. SlickGrid it may be good.

IKB56

kobruleht on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Fri, 03 Jun 2011 17:29:05 +0300

You can switch to slickgrid. According to SlickGrid Developer answer in stackoverflow.com where this issue was discussed, this is resolved in SlickGrid.

IKB56 on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Fri, 03 Jun 2011 12:44:01 +0300

Hello,

I understood the limitations of the browser and that efforts are needed to fix the problem. But I think the virtual scrolling is required huge data support. Near future, I hope that the huge data is supported by the virtual scrolling.

I would like to complete this topic. Thank you.

IKB56

tony on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Fri, 03 Jun 2011 09:20:50 +0300

Hello,

The problem of more than 500 000 records lie in the browsers limitations itself and the way we realize virtual scrolling.

The problem is hard to be fixed, but I think this is not impossible. This requiere a lot of eforts and calculations.

Kind Regards

IKB56 on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Thu, 02 Jun 2011 21:35:47 +0300

Additional information

Line scrolling, 1 page scrolling by pressing the â–³ â–½ buttons of the scroll bar. When I move the slider on the scroll bar, I want to be able to move the page. At that time, the page displayed is not a good position to correct page.

IKB56

IKB56 on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Thu, 02 Jun 2011 20:41:27 +0300

Hello,

Probably, yes.

I's a matter of logic to calculate the page position (request to the server). When the page position is less than 0, the slider of the scroll bar to move 1 pixel will be assigned a few pages.

Which parts of Java Script, what should I fix it?

IKB56

Leandro Irgang on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Thu, 02 Jun 2011 19:16:14 +0300

i am not sure, but try increase value of rowNum, because 50.000.000 / 100 = 500.000 pages on only around 700px of vertical scrollbar height will give to us around 0.014px (of scrollbar) for each page.

Leandro Irgang

IKB56 on [jqGrid 4.0] Virtual Scrolling problems in big data on Web server

Thu, 02 Jun 2011 13:20:49 +0300

Hello
I've tried to display a virtual scroll through more data than 50,000,000 lines can not scroll work.
When I move the slider of the scroll bar to display the page location is invalid.
jqGrid a bug?, please tell me how to bugfix.

jQuery("#scroll").jqGrid({
url:'dataReader.php',
datatype:"json",
height:750,
width:1120,
altRows:true,
shrinkToFit:false,
colNames:[…,…,…,…,…,…],
colModel:[…,…,…,…,…,…],
rowNum:100,
rowList:[40,60,100],
scroll:1,
loadonce:false,
mtype:"GET",
rownumbers:true,
rownumWidth:70,
gridview:true,
pager:'#pscroll',
viewrecords:true,
caption:''
});