Maximum rows allowed in grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: data, grid, jquery grid, jqxGrid ;, large data, limit, load, maximum number of rows, mysql, number, php, row, virtual mode, virtualmode

This topic contains 10 replies, has 5 voices, and was last updated by Peter Stoev 5 years, 2 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Maximum rows allowed in grid Posts
October 7, 2015 at 10:34 pm Maximum rows allowed in grid #76543

DLIN
Participant

Hi,

I am in the process of evaluating alternative to Dev Express’ grid control for one of web projects I am working on. When experimenting with the jQWidget’s grid control, I have found that if I fill the grid with more than 1400 rows, nothing will get displayed in the grid. Doesn’t that mean there is a limit on imposed on the number of rows allowed in the control? I am having the same problem with your ListBox control.

Thanks in advance.

DLin

October 8, 2015 at 5:10 am Maximum rows allowed in grid #76547

Dimitar
Participant

Hi DLin,

jqxGrid supports displaying much more than 1400 rows, as evidenced by the demo Large Data Set (30000 rows). The grid can display even more rows if virtualmode (load on demand) is enabled, as shown in the demos Virtual Paging and Virtual Scrolling, both with 1000000 rows.

Unfortunately, jqxListBox does not support the loading of such large numbers of items.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 11, 2015 at 2:16 am Maximum rows allowed in grid #76659

axelncabrera
Participant

Hi,

Dimitar is there a link to the “Virtual Scrolling” link you referred above that shows the data.php and index.php files used in it? I am having problems implemening sample “jqxGrid Virtual Scrolling with PHP and MySQL”. I created both pages as described in the example but substituted the database information for mine. As a result I only get the first 18 rows of the table and the scrolling doesn’t work. Here are my data.php and index.php files:

—– data.php ——-

<?php

$hostname = “localhost”;
$database = “mortalidad”;

$username = “root”;
$password = “”;

$connect = mysqli_connect($hostname, $username, $password)
or die(‘Could not connect: ‘ . mysqli_error($connect));

ini_set(‘memory_limit’, ‘512M’);
mysqli_select_db($connect, $database);

$bool = mysqli_select_db($connect, $database);
if ($bool === False){
print “can’t find $database”;
}

$firstvisiblerow = $_GET[‘recordstartindex’];
$lastvisiblerow = $_GET[‘recordendindex’];

error_log($firstvisiblerow . “- ” . $lastvisiblerow . chr(13), 3, “my-errors.log”);

$rowscount = $lastvisiblerow – $firstvisiblerow;

$query = “SELECT co_pahocode, nu_ano, co_icd10, total FROM tb_mortalidad_g2 “;
$query = $query . ” LIMIT $firstvisiblerow, $rowscount”;

$result = mysqli_query($connect, $query) or die(“SQL Error 1: ” . mysqli_error($connect));

$sql = “SELECT FOUND_ROWS() AS found_rows;”;
$rows = mysqli_query($connect, $sql);
$rows = mysqli_fetch_assoc($rows);
$total_rows = $rows[‘found_rows’];
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
$orders[] = array(
‘co_pahocode’ => $row[‘co_pahocode’],
‘nu_ano’ => $row[‘nu_ano’],
‘co_icd10’ => $row[‘co_icd10’],
‘total’ => $row[‘total’]
);
}
$data[] = array(
‘TotalRows’ => $total_rows,
‘Rows’ => $orders
);

echo json_encode($data);

—- index.php —————–

<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.classic.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
url: ‘data.php’,
dataType: ‘json’,
cache: false,
datafields: [
{ name: ‘co_pahocode’ },
{ name: ‘nu_ano’ },
{ name: ‘co_icd10’ },
{ name: ‘total’ }
],
root: ‘Rows’,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
source: source,
theme: ‘classic’,
virtualmode: true,
width:”100%”,
height:”1000px”,

rendergridrows: function(obj)
{
return obj.data;
},
columns: [
{ text: ‘Country’, datafield: ‘co_pahocode’, width: 200 },
{ text: ‘Year’, datafield: ‘nu_ano’, cellsformat: ‘d’, width: 200 },
{ text: ‘Cause’, datafield: ‘co_icd10’, width: 200 },
{ text: ‘Total’, datafield: ‘total’, width: 180 }
]
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”></div>
</body>
</html>

—————–

Thanks,
Axel Cabrera

October 12, 2015 at 9:02 am Maximum rows allowed in grid #76694

Dimitar
Participant

Hi Axel,

The grid in the Virtual Scrolling demo is bound to local data and does not make use of any PHP files.

Is there any error thrown in your browser’s console while testing your modified version of the example jqxGrid Virtual Scrolling with PHP and MySQL? Please note that all its files are available in the jQWidgets download package, under phpdemos\bind_grid_to_mysql_database_virtual_scrolling.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 18, 2015 at 10:36 pm Maximum rows allowed in grid #78317

axelncabrera
Participant

Dimitar,

I began again to look at the problem I described you before and I found that in my select statement the keyword SQL_CALC_FOUND_ROWS was missing. Thanks,

Axel Cabrera

I

June 18, 2019 at 3:51 pm Maximum rows allowed in grid #105709
mr_kirkwood
Participant
I have two tables i am loading into my application. One has 350k and one has over 1 million records. I am not sure i understand how to get my code into your sample for the Virtual Paging. The data takes about 2-3 minutes to load. Is there a better way i should be doing this? Here is one table…

Thanks!
```
WyoArchTables.serverApi("QueryArtifactsDSD").then(searchArtifactsDSD => {

                var source = {
                    localData: searchArtifactsDSD,
                    dataType: "array",
                    dataFields: [
                        { name: 'SiteID', type: 'string' },
                        { name: 'ArtifactID', type: 'string' },
                        { name: 'Attribute', type: 'string' },
                        { name: 'AttributeValue', type: 'string' },
                        { name: 'FreeformValue', type: 'string' },
                        { name: 'Units', type: 'string' }

                    ]
                };
               
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#artifactsSearchTableDSD").jqxGrid({
                    source: dataAdapter,
                    //width: '100%',
                    height: 700,
                    width: '100%',
                    rowsheight: 22,
                    pagesize: 25,
                    pageable: true,
                    autoheight: true,
                    sortable: true,
                    altrows: true,
                    enabletooltips: true,
                    filterable: true,
                    columnsresize: true,
                    showfilterrow: true,
                    theme: 'energyblue',
                    selectionmode: 'multiplecells',
                    columns: [
                        { text: 'ID', datafield: 'ArtifactID', width: 140 },
                        { text: 'Site', datafield: 'SiteID', width: 130 },
                        { text: 'Attribute', datafield: 'Attribute', width: 150 },
                        { text: 'Attribute Value', datafield: 'AttributeValue', width: 150 },
                        { text: 'Property Value', datafield: 'FreeformValue', width: 150 },
                        { text: 'Units', datafield: 'Units', width: 150 }
                    ],
                })
 
            })
```
June 18, 2019 at 3:59 pm Maximum rows allowed in grid #105711

Peter Stoev
Keymaster

Hi mr_kirkwood,

To work with such amount of data, the Grid should be in virtual mode. To learn how to use it in virtual mode, please check the jqxGrid’s Virtual Mode online demos.

JQWidgets team
http://www.jqwidgets.com/

June 18, 2019 at 8:58 pm Maximum rows allowed in grid #105712
mr_kirkwood
Participant
Peter,

I saw the demos but i am not sure how to “plug” my data into the example code. For example,
```
var generatedata = function (startindex, endindex) {
                var data = {};
                for (var i = startindex; i < endindex; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);

                    row["id"] = i;
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;

                    data[i] = row;
                }
                return data;
            }

            var source =
            {
                datatype: "array",
                localdata: {},
                totalrecords: 1000000
            };

            // load virtual data.
            var rendergridrows = function (params) {
                var data = generatedata(params.startindex, params.endindex);
                return data;
            }

            var totalcolumnrenderer = function (row, column, cellvalue) {
                var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
                return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
            }
```
the variable (var data) shows up several times. I guess that is confusing me. Also, my source data how do i plug that in? The examples are using pre-canned data. Sorry, this is new to me!
June 19, 2019 at 4:46 pm Maximum rows allowed in grid #105735

mr_kirkwood
Participant

Peter,

Does the virtual data not support sorting? i am testing out the demo and tried adding sorting but it will not. IS this because its using the generated data on the fly?

June 19, 2019 at 7:42 pm Maximum rows allowed in grid #105738

mr_kirkwood
Participant

Peter,

Sorry about all of the posts. I am now aware that i need to use .php files on the server for filtering and sorting. I have purchased a licence for the large data export. Do i need to purchase the filtering and sorting? I looked through the files and could not find the ‘serverfiltering_data.php’ file. Is there a chance you could walk me through this process?

Thank you!

June 20, 2019 at 4:53 am Maximum rows allowed in grid #105742

Peter Stoev
Keymaster

These php files are included in the demo package and are also available in the documentation tutorials
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.