jQWidgets Forums

This topic contains 9 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 6 months ago.

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

Author

Grid large data Posts
December 10, 2013 at 1:25 pm Grid large data #46278

jkhantwal
Participant

Hello,

I am doing a mass update from client side with select all option and facing a performance issue which is killing the page and doesn’t work properly.
Please follow the steps:
1. Grid should contain 2000 k records
2. select all check box is clicked
3. Change the Quantity to new value.
4. The new value will get updated (check box selected rows )
Please check the code and let me know where I am doing wrong. Also I required a loading icon till update of row happen.
It works well when 5 to 10 records are selected and the page hang when I have 2000 k records .
Below is the code for your reference.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example illustrates Rows Selection with a Checkbox.

</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.10.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/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.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=”../../scripts/gettheme.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>

<script type=”text/javascript”>
$(document).ready(function() {
var theme = “”;

// prepare the data
var data = generatedata(2000, true);

// prepare the data
var source =
{
localdata: data,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ }
],
datatype: “array”
};
var dataAdapter = new $.jqx.dataAdapter(source);

// create jqxgrid.
$(“#jqxgrid”).jqxGrid(
{
width: 700,
height: 450,
source: dataAdapter,
theme: theme,
sortable: true,
filterable: true,
editable: true,
ready: function() {
// called when the Grid is loaded. Call methods or set properties here.
},
selectionmode: ‘checkbox’,
altrows: true,
columns: [
{ text: ‘First Name’, editable: false, datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, editable: false, datafield: ‘lastname’, width: 100 },
{ text: ‘Product’, editable: true, datafield: ‘productname’, width: 180 },
{ text: ‘Quantity’, editable: true, datafield: ‘quantity’, width: 80, cellsalign: ‘right’ },
{ text: ‘Unit Price’, editable: true, datafield: ‘price’, width: 90, cellsalign: ‘right’, cellsformat: ‘c2’ },
{ text: ‘Total’, editable: false, datafield: ‘total’, width: 100, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});

$(“#jqxgrid”).bind(‘cellendedit’, function(event) {
var rows = $(“#jqxgrid”).jqxGrid(‘selectedrowindexes’);
var cellValue = args.value;
for (var m = 0; m < rows.length; m++) {
var columnDataField = event.args.datafield;
var rowIndex = rows[m];
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowIndex, columnDataField, cellValue);

}
});

});
</script>

</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”>
</div>
</div>
</body>
</html>

December 10, 2013 at 1:31 pm Grid large data #46279
Peter Stoev
Keymaster
Hi jkhantwal,
```
$("#jqxgrid").bind('cellendedit', function(event) {
var rows = $("#jqxgrid").jqxGrid('selectedrowindexes');
var cellValue = args.value;
for (var m = 0; m < rows.length; m++) {
var columnDataField = event.args.datafield;
var rowIndex = rows[m];
$("#jqxgrid").jqxGrid('setcellvalue', rowIndex, columnDataField, cellValue);

}
});
```
The above code makes 2000 refreshes of jqxGrid and that’s the reason of the performance issue on your side.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
December 10, 2013 at 1:43 pm Grid large data #46280

jkhantwal
Participant

Hi Peter ,

can you please help me with sample code to make this run also with some loading icon till the operation complete.

i am facing the issue on production with larger data .

Thanks in advance.

Thanks,
Jkhantwal

December 10, 2013 at 1:52 pm Grid large data #46282

Peter Stoev
Keymaster

Hi jkhantwal,

With that code, you will update all Grid rows from the edited column. If you want to stop the Grid’s refreshes, call the Grid’s beginupdate method before your loop and endupdate after your loop.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 10, 2013 at 2:07 pm Grid large data #46284

jkhantwal
Participant

Hi Peter,
i have already tired and still facing the issue, request you to please run the given sample code from you side to check the problem. and revert back with some solution and with loading icon

$(“#jqxgrid”).bind(‘cellendedit’, function(event) {
$(“#jqxgrid”).jqxGrid(‘beginupdate’);

var rows = $(“#jqxgrid”).jqxGrid(‘selectedrowindexes’);
var cellValue = args.value;
for (var m = 0; m < rows.length; m++) {
var columnDataField = event.args.datafield;
var rowIndex = rows[m];
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, rowIndex, columnDataField, cellValue);

}
$(“#jqxgrid”).jqxGrid(‘endupdate’);
});

Thansk,
Jkhantwal

December 10, 2013 at 2:21 pm Grid large data #46285

Peter Stoev
Keymaster

Hi Jkhantwal,

For loading icon, you could probably dynamically add IMG tag and dynamically remove it when it is necessary. This website: http://www.ajaxload.info/ could help you to generate an animated Loading GIF image.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 10, 2013 at 2:34 pm Grid large data #46287

jkhantwal
Participant

Hi Peter,

Did you get a chance to run the given code and conclude solution for the problem .
will this grid support larger data or not? if not i need some documentation as i have to update my client.

will appreciate if you have some solution for this problem or provide a other way/ sample code to do this functionality .

Thanks,
Jkhantwal

December 10, 2013 at 2:40 pm Grid large data #46288

Peter Stoev
Keymaster

Hi Jkhantwal,

The problem is not the large data. It is more the fact that you want to update all Cells within the Grid while the Grid is Still in Edit mode. According to me, you should use another approach for updating Grid data.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 10, 2013 at 2:44 pm Grid large data #46289

jkhantwal
Participant

Thanks peter,

Can you please suggest the other approach to update the cell.

Thanks,
Jkhantwal

December 10, 2013 at 2:51 pm Grid large data #46290

Peter Stoev
Keymaster

Hi Jkhantwal,

Why do you need to update all cells within the edit column after editing a cell in that column? Sorry about that, but I don’t get it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.