jQuery UI Widgets Forums Grid jqxGrid with large data(AJAX)

This topic contains 23 replies, has 6 voices, and was last updated by  robf 1 year, 3 months ago.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
  • jqxGrid with large data(AJAX) #3351

    hhchoi
    Member

    I am searching for how to use jqxGrid with large data.
    We tries to download distributed a large data using AJAX .
    We tested using knockoutjs, but if add a lot of rows at a time, performance was affected.
    If someone has a solution to this problem, please help…

    jqxGrid with large data(AJAX) #3352

    Peter Stoev
    Keymaster

    Hi hhchoi,

    To add many rows at once, you can use the jqxGrid’s beginupdate and resumeupdate methods. The beginupdate method stops the execution of all rendering methods. The resumeupdate method resumes all UI updates. These methods are appropriate for usage when you do many updates or adding or removing many rows.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>This example shows how to integrate jqxGrid with knockout.js.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.0.0.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Furious Lizard", sales: 152, price: 25.00 },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
    { name: "Brooding Dragon", sales: 0, price: 6350 },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
    { name: "Optimistic Snail", sales: 420, price: 1.50 }
    ];
    var GridModel = function (items) {
    this.items = ko.observableArray(items);
    this.addItem = function () {
    $("#jqxgrid").jqxGrid('beginupdate');
    for(var i = 0; i < 10; i++ )
    {
    if (this.items.length < 20)
    {
    // add a new item.
    this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
    }
    }
    $("#jqxgrid").jqxGrid('resumeupdate');
    };
    this.removeItem = function () {
    // remove the last item.
    this.items.pop();
    };
    this.updateItem = function () {
    // update the first item.
    var item = {};
    item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
    item.sales = Math.floor(Math.random() * 500);
    item.price = Math.floor(Math.random() * 200);
    this.items.replace(this.items()[0], item);
    };
    };
    var model = new GridModel(initialData);
    ko.applyBindings(model);
    var source = {
    localdata: model.items,
    datatype: 'local'
    }
    $('#addButton').jqxButton({ theme: theme });
    $('#removeButton').jqxButton({ theme: theme });
    $('#updateButton').jqxButton({ theme: theme });
    // create jqxGrid.
    $("#jqxgrid").jqxGrid(
    {
    source: source,
    autoheight: true,
    theme: theme,
    columns: [
    { text: 'Name', dataField: 'name', width: 200 },
    { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
    { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div style="margin-bottom: 10px;">
    <input id="addButton" type="button" data-bind="click: addItem" value="Add Item"/>
    <input id="removeButton" type="button" data-bind="click: removeItem" value="Remove Item"/>
    <input id="updateButton" type="button" data-bind="click: updateItem" value="Update Item"/>
    </div>
    <div id="jqxgrid">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxGrid with large data(AJAX) #3355

    hhchoi
    Member

    Hi Peter,

    Thank you for your answer.
    Unfortunately, your answer does not seem appropriate for our data.
    Our data is more than 1 million rows.
    What is the way to change the totalrecords for a dynamical source, when I use the virtualmode option.

    jqxGrid with large data(AJAX) #3381

    Peter Stoev
    Keymaster

    Hi hhchoi,

    To dynamically update the totalrecords in virtual mode, you need to set the totalrecords property and set the Grid’s source property.

    For example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>In this demo jqxGrid uses a virtualized scrolling which enables you to handle very large data sets without any impact on client side performance. The demo shows scrolling through 1 million records.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    // prepare the data
    var data = new Array();
    var firstNames =
    [
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];
    var lastNames =
    [
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];
    var productNames =
    [
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];
    var priceValues =
    [
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];
    // generate sample data.
    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;
    }
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: source,
    theme: theme,
    virtualmode: true,
    rendergridrows: rendergridrows,
    columns: [
    { text: 'Id', datafield: 'id', width: 100 },
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    // update total records.
    $("#button").click(function () {
    source.totalrecords = 100000;
    $("#jqxgrid").jqxGrid({ source: source });
    $("#jqxgrid").jqxGrid('scrollto', 0, 0);
    $("#jqxgrid").jqxGrid('render');
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>
    <input type="button" value="Change Total Records" id="button" />
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxGrid with large data(AJAX) #5016

    hhchoi
    Member

    Hi, Peter.

    I want to find solution for scroll problem in “$(“#jqxgrid”).jqxGrid(‘render’);”.
    When user moved the vertical scrollbar, what is how to stay to the scroll position?

    If this solves the above problem, we are planning to buy jqxGrid.

    Thanks..

    • This reply was modified 11 years, 11 months ago by  hhchoi.
    jqxGrid with large data(AJAX) #5045

    Peter Stoev
    Keymaster

    Hi hhchoi,

    Here’s the solution with the updated code from my previous post:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    // prepare the data
    var data = new Array();
    var firstNames =
    [
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];
    var lastNames =
    [
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];
    var productNames =
    [
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];
    var priceValues =
    [
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];
    // generate sample data.
    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: 10000
    };
    // load virtual data.
    var rendergridrows = function (params) {
    var data = generatedata(params.startindex, params.endindex);
    return data;
    }
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: source,
    theme: theme,
    virtualmode: true,
    rendergridrows: rendergridrows,
    columns: [
    { text: 'Id', datafield: 'id', width: 100 },
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    // update total records.
    $("#button").click(function () {
    source.totalrecords = 20000;
    // get old value.
    var scrollValue = $("#jqxgrid").jqxGrid('vScrollBar').jqxScrollBar('value');
    $("#jqxgrid").jqxGrid({ source: source });
    $("#jqxgrid").jqxGrid('scrollto', 0, 0);
    $("#jqxgrid").jqxGrid('render');
    // update the scroll value.
    $("#jqxgrid").jqxGrid('scrollto', 0, scrollValue);
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>
    <input type="button" value="Change Total Records" id="button" />
    </div>
    </body>
    </html>

    Hope the above code helps you.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxGrid with large data(AJAX) #5079

    hhchoi
    Member

    Hi, Peter.

    Above problem was solved. Thanks.. 🙂

    I found a another problem.
    If virtualmode option is true, filterable don’t work.

    What is the solution?

    Thanks

    jqxGrid with large data(AJAX) #5080

    Peter Stoev
    Keymaster

    Hi hhchoi,

    There’s is no filtering and sorting in virtual mode. In that mode the data is generated dynamically and there’s nothing actually to be sorted or filtered. In virtual mode, you can put sort and filter callback functions called when the user filters or sorts and implement your custom logic which works with the data you pass to the Grid in virtual mode. Help topics for Sorting and Filtering in virtual mode with Server Side Sort and Filtering – php-server-side-grid-paging-and-filtering.htm and php-server-side-grid-paging-and-sorting.htm.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxGrid with large data(AJAX) #23310

    ssp
    Participant

    Hi,

    I am trying to export a jqxgrid to excel using the following function:

    $(“#excelExport1”).click(function () {
    $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’,false);
    });

    On clicking the export button it is navigating to “Internet Explorer cannot diaplay a webpage” with the url

    http://jquerygrid.net/export_server/save-file.php

    jqxGrid with large data(AJAX) #23314

    Peter Stoev
    Keymaster

    Hi,

    We set the Export File Size Limit of our server to 2MB. If you have the save-file.php, then you can host it on your own server. The file is shipped with Developer/Enterprise licenses.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxGrid with large data(AJAX) #23316

    ssp
    Participant

    Hi Peter,

    I do not have any save-file.php and for information I use Java Spring MVC framework,
    plz give me the solution for not being able to export??

    Thanks,

    jqxGrid with large data(AJAX) #23319

    Peter Stoev
    Keymaster

    Hi,

    If you do not own a license, then the exporting is done through our server and as I already written the file size limit is 2MB. In addition, if your app for some reason does not allow connection through a remote server due to security reasons or other restrictions, you will not be able to export the Grid.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxGrid with large data(AJAX) #23326

    ssp
    Participant

    Peter,

    Thanks for all the replies!!

    I was able to export the grid a couple of times with OPEN and SAVE options, even though it was redirecting to the page:”http://jquerygrid.net/export_server/save-file.php” most of the times,.so I assume there was no security restrictions,
    But today I am unable to export even once,
    please help me out with this strange output!

    jqxGrid with large data(AJAX) #23329

    Peter Stoev
    Keymaster

    Hi,

    It is possible the server to be busy at the time you try to export, it is possible to be some timeout due to slow internet connection or you try to export a large set of data which exceeds the 2MB limit. We will check whether there’s something wrong on our side and if there is, we are going to fix it. I cannot provide more information about your issue at present.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    jqxGrid with large data(AJAX) #23345

    ssp
    Participant

    Thank you so much for the reply Peter!!

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.