jQuery UI Widgets Forums Grid Maximum rows allowed in grid

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • 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

    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/

    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

    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/

    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

    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 }
                        ],
                    })
     
                })
    • This reply was modified 9 months, 3 weeks ago by  mr_kirkwood. Reason: formatting
    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/

    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!

    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?

    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!

    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

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

You must be logged in to reply to this topic.