jQuery UI Widgets › Forums › Grid › jqxGrid with large data(AJAX)
Tagged: jqxgrids performance
This topic contains 23 replies, has 6 voices, and was last updated by robf 1 year, 8 months ago.
-
Author
-
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…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 StoevjQWidgets Team
http://www.jqwidgets.comHi 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.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 StoevjQWidgets Team
http://www.jqwidgets.comHi, 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..
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 StoevjQWidgets Team
http://www.jqwidgets.comHi, 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
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 StoevjQWidgets Team
http://www.jqwidgets.comHi,
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
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 StoevjQWidgets Team
http://www.jqwidgets.comHi 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,
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 StoevjQWidgets Team
http://www.jqwidgets.comPeter,
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!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 StoevjQWidgets Team
http://www.jqwidgets.comThank you so much for the reply Peter!!
-
AuthorPosts
You must be logged in to reply to this topic.