jQWidgets Forums

Tagged: javascript grid, jquery grid, jqwidgets grid

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

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

Author

Fail to bind data to jqxgrid in IE11 Posts
December 8, 2015 at 2:50 pm Fail to bind data to jqxgrid in IE11 #79070

sangad
Participant

I am trying to bind 10000 records to grid.
but after some time it gives error
“Error occurred while processing collected data”

This issue is coming in IE11.

December 8, 2015 at 3:34 pm Fail to bind data to jqxgrid in IE11 #79076

Peter Stoev
Keymaster

hi sangad,

The informattion is insufficient for testing. You should provide at least jsfiddle.net example which demonstrates what is the issue. We have sample with 30 000 records which runs in IE11 – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/largedataset.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 10, 2015 at 6:15 am Fail to bind data to jqxgrid in IE11 #79140

sangad
Participant

Hi Peter Stoev,
Here is my complete code for 10000 record

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″>
<link href=”../Common/Styles.css” type=”text/css” rel=”stylesheet” />
<link rel=”stylesheet” href=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxloader.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.export.js”></script>
</head>
<body>
<table id=”tblAssetList” cellpadding=”2″ cellspacing=”0″ border=”0″ summary=”” width=”100%”>
<tr>
<td valign=”top” align=”left”>
<div id=’AssetPieChart’ style=”width: 850px; height: 500px;”>
</div>
</td>
</tr>
<tr>
<td valign=”top” align=”left”>
<div>
<div id=”jqxlistbox” style=”float: left;”>
</div>
<div style=”width: 10px; float: left;”>

>>
</div>
<div style=”margin-left: 10px; float: right;” id=”grdAllAsset”>
</div>
</div>
</td>
</tr>
<tr>
<td valign=”top” align=”right”>
<div style=’float: right;’>
<input type=”button” value=”Export to Excel” id=’excelExport’ />
<input type=”button” value=”Export to XML” id=’xmlExport’ />
</div>
</td>
</tr>
</table>
</body>
<script type=”text/javascript”>
var sourcedata;

$(document).ready(function () {
BindAssetGrid();
$(“#jqxlistbox”).animate({
width: 0,
height: 0
});
// $(“#jqxlistbox”).css(“display”, “none”);
});

//Bind the grid with Asset count
function BindAssetGrid() {
try {
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”
];

for (var i = 0; i < 30000; 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;
}

var source =
{
localdata: data,
datafields:
[
{ name: ‘id’, type: ‘number’},
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ }
],
datatype: “array”
};

var dataAdapter = new $.jqx.dataAdapter(source);
var exampleTheme;

///////////////// Custom Filter////////////////////////////
var buildFilterPanel = function (filterPanel, datafield) {
var textInput = $(“<input style=’margin:5px;’/>”);
var applyinput = $(“<div class=’filter’ style=’height: 25px; margin-left: 20px; margin-top: 7px;’></div>”);
var filterbutton = $(‘<span tabindex=”0″ style=”padding: 4px 12px; margin-left: 2px;”>Filter</span>’);
applyinput.append(filterbutton);
var filterclearbutton = $(‘<span tabindex=”0″ style=”padding: 4px 12px; margin-left: 5px;”>Clear</span>’);
applyinput.append(filterclearbutton);
filterPanel.append(textInput);
filterPanel.append(applyinput);
filterbutton.jqxButton({ theme: exampleTheme, height: 20 });
filterclearbutton.jqxButton({ theme: exampleTheme, height: 20 });
var dataSource =
{
localdata: dataAdapter.records,
datatype: “json”,
async: false
}
var dataadapter1 = new $.jqx.dataAdapter(dataSource,
{
autoBind: false,
autoSort: true,
autoSortField: datafield,
async: false,
uniqueDataFields: [datafield]
});
var column = $(“#grdAllAsset”).jqxGrid(‘getcolumn’, datafield);
textInput.jqxInput({ theme: exampleTheme, placeHolder: “Enter ” + column.text, popupZIndex: 9999999, displayMember: datafield, source: dataadapter1, height: 23, width: 175 });
textInput.keyup(function (event) {
if (event.keyCode === 13) {
filterbutton.trigger(‘click’);
}
});
filterbutton.click(function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = textInput.val();
var filtercondition = ‘contains’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
// add the filters.
$(“#grdAllAsset”).jqxGrid(‘addfilter’, datafield, filtergroup);
// apply the filters.
$(“#grdAllAsset”).jqxGrid(‘applyfilters’);
$(“#grdAllAsset”).jqxGrid(‘closemenu’);
});
filterbutton.keydown(function (event) {
if (event.keyCode === 13) {
filterbutton.trigger(‘click’);
}
});
filterclearbutton.click(function () {
$(“#grdAllAsset”).jqxGrid(‘removefilter’, datafield);
// apply the filters.
$(“#grdAllAsset”).jqxGrid(‘applyfilters’);
$(“#grdAllAsset”).jqxGrid(‘closemenu’);
});
filterclearbutton.keydown(function (event) {
if (event.keyCode === 13) {
filterclearbutton.trigger(‘click’);
}
textInput.val(“”);
});
};

//////////////// END Custom Filter ////////////////////////////////

$(“#grdAllAsset”).jqxGrid({
source: dataAdapter,
width: ($(‘#tblAssetList’).width() – 40),
sortable: true,
groupable: true,
autoheight: true,
columnsresize: true,
filterable: true,
showstatusbar: true,
renderstatusbar: function (statusbar) {
var rowCount = $(“#grdAllAsset”).jqxGrid(‘getrows’).length;
statusbar.append(‘<div style=”margin: 5px;”>Count: <span id=”rowsCountSpan”>’ + rowCount + ‘</span></div>’);
},
// groupsrenderer: groupsrenderer,
columnsreorder: true,
columns: [{ text: ‘ID’, datafield: ‘id’, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘First Name’, datafield: ‘firstname’, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘Last Name’, datafield: ‘lastname’, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘Product Name’, datafield: ‘productname’, hidden: true, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘Quantity’, datafield: ‘quantity’, hidden: true, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
}
],
groups: [‘firstname’]
});
}
catch (e) {

}
AssetPieChart();

var listSource = [{ label: ‘Id’, value: ‘id’, checked: ture }
{ label: ‘First Name’, value: ‘firstname’, checked: true },
{ label: ‘Last Name’, value: ‘lastname’, checked: true },
{ label: ‘Product Name’, value: ‘productname’, checked: false},
{ label: ‘Quantity’, value: ‘quantity’, checked: false },

];

$(“#jqxlistbox”).jqxListBox({ source: listSource, width: 200, checkboxes: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
$(“#grdAllAsset”).jqxGrid(‘beginupdate’);
if (event.args.checked) {
$(“#grdAllAsset”).jqxGrid(‘showcolumn’, event.args.value);
}
else {
$(“#grdAllAsset”).jqxGrid(‘hidecolumn’, event.args.value);
}
$(“#grdAllAsset”).jqxGrid(‘endupdate’);
});

$(“#grdAllAsset”).on(“groupschanged”, function (event) {
if (event.args.groups[0] != undefined) {
AssetPieChart();
}
});

$(“#grdAllAsset”).on(“filter”, function (event) {

AssetPieChart();

$(“#grdAllAsset”).jqxGrid({
renderstatusbar: function (statusbar) {
statusbar.empty();
var rowCount = $(“#grdAllAsset”).jqxGrid(‘getrows’).length;
statusbar.append(‘<div style=”margin: 5px;”>Count: <span id=”rowsCountSpan”>’ + rowCount + ‘</span></div>’);
}
});
});

$(“#excelExport”).jqxButton();
$(“#xmlExport”).jqxButton();

$(“#excelExport”).click(function () {
$(“#grdAllAsset”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});
$(“#xmlExport”).click(function () {
$(“#grdAllAsset”).jqxGrid(‘exportdata’, ‘xml’, ‘jqxGrid’);
});

}

function AssetPieChart() {
try {
var chartSource = “[“;
var group;
var count = $(“#grdAllAsset”).jqxGrid(‘getrootgroupscount’);
for (var i = 0; i < count; i++) {
group = $(“#grdAllAsset”).jqxGrid(‘getgroup’, i);
chartSource = chartSource + “{\”strCount\”:” + group.subrows.length + “,\”strDisplayField\”:\”” + group.group + “\”},”;
};
chartSource = chartSource.substring(0, chartSource.length – 1);
chartSource = chartSource + “]”;
var source =
{
dataType: ‘json’,
type: “GET”,
datafields: [{ name: ‘strCount’ },
{ name: ‘strDisplayField’ }
],
localdata: chartSource
};
var dataAdapter = new $.jqx.dataAdapter(source);
// prepare jqxChart settings
var settings = {
title: “Asset[s]”,
description: “”,
enableAnimations: true,
showLegend: true,
showBorderLine: false,
legendLayout: { left: 700, top: 10, width: 300, height: 800, flow: ‘vertical’ },
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
colorScheme: ‘scheme02’,
seriesGroups:
[
{
type: ‘pie’,
showLabels: true,
series:
[
{
dataField: ‘strCount’,
displayText: ‘strDisplayField’,
labelRadius: 170,
initialAngle: 15,
radius: 145,
centerOffset: 0
}
]
}
]
};
// setup the chart
$(‘#AssetPieChart’).jqxChart(settings);
}
catch (e) {
}
};

function Toggle() {

if ($(“#hypToggle”)[0].innerText == “>>”) {
$(“#grdAllAsset”).jqxGrid({
width: $(‘#tblAssetList’).width() – 240
});

$(“#jqxlistbox”).animate({
width: 200,
height: 200
});
$(“#hypToggle”).html(“<<<“);
}
else {
$(“#grdAllAsset”).jqxGrid({
width: $(‘#tblAssetList’).width() – 30
});

$(“#jqxlistbox”).animate({
width: 0,
height: 0
});
// $(“#jqxlistbox”).css(“display”, “”);
$(“#hypToggle”).html(“>>”);
}
}
</script>
</html>

December 10, 2015 at 6:21 am Fail to bind data to jqxgrid in IE11 #79141

sangad
Participant

Hi Peter Stoev,
Here are the issues that i am facing.
1. Not able to lad record more than 10000 in IE
2. Export not work for large data.
3. Chart synchronisation with grid take much time while filter grouping

please suggest me the solution.
we have license copy of jqwidget but not able to handle such scenario smoothly.

December 10, 2015 at 6:30 am Fail to bind data to jqxgrid in IE11 #79148

Peter Stoev
Keymaster

Hi sangad,

1. Our demo is with 30 000 records, not with 10 000 records and it works perfectly well.

2. Chart synchronization depends on your own code. You are using things like .css, .animate, .innerHTML, .html, .width() so things which all will affect the performance

3. To export data, you should host save-file.php on your server and update the exportdata method call.

Best Regards,
Peter Stoev

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

December 10, 2015 at 6:30 am Fail to bind data to jqxgrid in IE11 #79149

Peter Stoev
Keymaster

Hi sangad,

1. Our demo is with 30 000 records, not with 10 000 records and it works perfectly well.

2. Chart synchronization depends on your own code. You are using things like .css, .animate, .innerHTML, .html, .width() so things which all will affect the performance

3. To export data, you should host save-file.php on your server and update the exportdata method call.

Best Regards,
Peter Stoev

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

December 10, 2015 at 6:32 am Fail to bind data to jqxgrid in IE11 #79151

Peter Stoev
Keymaster

Hi sangad,

Also, please avoid posting multiple topics about same thing.

Best Regards,
Peter Stoev

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

December 10, 2015 at 6:38 am Fail to bind data to jqxgrid in IE11 #79153

sangad
Participant

Hi Peter Stoev,
i dont think so .width .animate,.html,.innerhtml
affecting performnace of my page.because it use less time on page

December 10, 2015 at 6:39 am Fail to bind data to jqxgrid in IE11 #79154

sangad
Participant

Hi Peter Stoev,
Please go through my code and let me know where i am going wrong

December 10, 2015 at 7:13 am Fail to bind data to jqxgrid in IE11 #79158

Peter Stoev
Keymaster

Hi sangad,

Your Chart’s initialization is wrong. On every filter, groupschanged, etc, you change ALL jqxChart settings, but you should change only the Chart’s source. This will definitely affect the performance because instead of 1 refresh, you will end up with ~20.

Best Regards,
Peter Stoev

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

December 10, 2015 at 9:07 am Fail to bind data to jqxgrid in IE11 #79175

sangad
Participant

Hi Peter,
My application in ASP.Net how can i integrate save-file.php
in asp.net application

December 10, 2015 at 9:11 am Fail to bind data to jqxgrid in IE11 #79176

Peter Stoev
Keymaster

Hi sangad,

There is such tutorial in the source code download package.

Best Regards,
Peter Stoev

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

December 10, 2015 at 12:13 pm Fail to bind data to jqxgrid in IE11 #79182

sangad
Participant

Hi Peter,
Can you provide me the code of export
I didnt find it in source code.
Please provide the code and save-file.php and steps to integrate in asp.net application.

We have the License copy of jqwidget

December 10, 2015 at 1:58 pm Fail to bind data to jqxgrid in IE11 #79185

Peter Stoev
Keymaster

Hi sangad,

If you have a licensed copy, then open it and you will find it there.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.