jQWidgets Forums

Tagged: circular reference, jqxGrid ;, Maximum call stack size exceeded

This topic contains 2 replies, has 2 voices, and was last updated by clusters 5 years, 10 months ago.

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

Author

Using "refresh" inside of jqxGrid "cellendedit" causing "circular ref" in 7.2.0 Posts
May 16, 2019 at 9:04 pm Using "refresh" inside of jqxGrid "cellendedit" causing "circular ref" in 7.2.0 #105271

clusters
Participant

So we had just updated jQWidgets from V4.4.0 to V7.2.0, and we are getting “Uncaught RangeError: Maximum call stack size exceeded” when we tried to edit a cell. It seems that when using the grid “refresh” method inside the “cellendedit” event that they would just go into an infinite loop, and the error would go away should we change the method from “refresh” to “updatebounddata.” So any idea if this is a bug or if we are doing something wrong? Our codes had worked before the upgrade and the “cellendedit” and “refresh” events had fired only once. Below is the piece of test code that had duplicated our finding. Thank ahead for your help! Tim

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting.
</title>
<meta name=”description” content=”JavaScript Grid with rich support for Data Filtering, Paging, Editing, Sorting and Grouping” />
<link rel=”stylesheet” href=”/js/jqwidgets/styles/jqx.base.css”>
<link rel=”stylesheet” href=”/js/jqwidgets/styles/jqx.metro.css”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
<script type=”text/javascript” src=”/js/jquery-ui-1.9.1.custom.min.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets/jqx-all.js”></script>
<script
src=”https://code.jquery.com/jquery-migrate-3.0.1.min.js”
integrity=”sha256-F0O1TmEa4I8N24nY0bya59eP6svWcshqX1uzwaWC4F4=”
crossorigin=”anonymous”></script>
<script type=”text/javascript” src=”/js/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var url = “/js/products.xml”;
// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘ProductName’, type: ‘string’ },
{ name: ‘QuantityPerUnit’, type: ‘int’ },
{ name: ‘UnitPrice’, type: ‘float’ },
{ name: ‘UnitsInStock’, type: ‘float’ },
{ name: ‘Discontinued’, type: ‘bool’ }
],
root: “Products”,
record: “Product”,
id: ‘ProductID’,
url: url
};
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
if (value < 20) {
return ‘<span style=”margin: 4px; margin-top:8px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;”>’ + value + ‘</span>’;
}
else {
return ‘<span style=”margin: 4px; margin-top:8px; float: ‘ + columnproperties.cellsalign + ‘; color: #008000;”>’ + value + ‘</span>’;
}
}
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
// initialize jqxGrid
$(“#grid”).jqxGrid(
{
width: getWidth(‘Grid’),
source: dataAdapter,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
editable: true,
selectionmode: ‘multiplecellsadvanced’,
columns: [
{ text: ‘Product Name’, columngroup: ‘ProductDetails’, datafield: ‘ProductName’, width: 250 },
{ text: ‘Quantity per Unit’, columngroup: ‘ProductDetails’, datafield: ‘QuantityPerUnit’, cellsalign: ‘right’, align: ‘right’, width: 200 },
{ text: ‘Unit Price’, columngroup: ‘ProductDetails’, datafield: ‘UnitPrice’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 200 },
{ text: ‘Units In Stock’, datafield: ‘UnitsInStock’, cellsalign: ‘right’, cellsrenderer: cellsrenderer, width: 100 },
{ text: ‘Discontinued’, columntype: ‘checkbox’, datafield: ‘Discontinued’ }
],
columngroups: [
{ text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’ }
]
});
$(“#grid”).bind(“cellendedit”, function (event) {
var args = event.args;
console.log(args);
$(“#grid”).jqxGrid(‘refresh’);
//$(“#grid”).jqxGrid(‘updatebounddata’);
});
});
</script>
</head>
<body class=’default’>
<div id=”grid”>
</div>
</body>
</html>

May 17, 2019 at 5:20 am Using "refresh" inside of jqxGrid "cellendedit" causing "circular ref" in 7.2.0 #105274

Peter Stoev
Keymaster

Hi clusters,

The event is called when the edit operation ends which includes closing the editor and removing its instance. Calling ‘refresh’ there invokes a re-render action of the Grid. In general, I do not think that it is necessary to call either ‘refresh’ or ‘updatebounddata’. If your idea is to make a server call or something like that after an edit operation, then the ‘updaterow’ function should be added to the ‘source’ object. Its purpose is to send the update requests after editing finishes.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

May 19, 2019 at 5:21 pm Using "refresh" inside of jqxGrid "cellendedit" causing "circular ref" in 7.2.0 #105288

clusters
Participant

Hi Peter:

Right. It is trying to handle some computed columns. “Refresh” and “updatebounddata” shouldn’t be necessary. I will have to find another way to handle that. Thanks and appreciate your response and info.!

Best regards,

Tim
Author

Posts

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

You must be logged in to reply to this topic.