jQWidgets Forums

jQuery UI Widgets Forums Grid Using "refresh" inside of jqxGrid "cellendedit" causing "circular ref" in 7.2.0

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

  • 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>


    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


    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

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

You must be logged in to reply to this topic.