jQuery UI Widgets Forums Grid Data is still loading error

This topic contains 7 replies, has 4 voices, and was last updated by  oscar.vanderleij 6 years, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Data is still loading error #52909

    hotsnow
    Participant

    Hello,

    I’m using the jqxGrid (Ver 3.2.2) in the virtual mode. As long as I don’t sort, I can scroll without problems, but when I sort a column and start scrolling I get the following error:

    0x800a139e - JavaScript runtime error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the 'bindingcomplete' event. Call this function in the 'bindingcomplete' event handler.

    The callstack is all internal code:

           sortby [jqxgrid.sort.js] Line 7	Script
     	update [jqxgrid.js] Line 7	Script
     	z [jqxgrid.js] Line 7	Script
     	k [jqxgrid.js] Line 7	Script
     	callDownloadComplete [jqxdata.js] Line 7	Script
     	success [jqxdata.js] Line 7	Script
     	c [jquery-1.10.2.min.js] Line 21	Script
     	fireWith [jquery-1.10.2.min.js] Line 21	Script
     	S [jqxdata.js] Line 7	Script
     	H [jqxdata.js] Line 7	Script

    This is my HTML code (sample with changed code):

    <!DOCTYPE html>
    <html lang="en" style="width: 100%; height: 100%">
    <head>
        <title id='Description'>In this example is demonstrated how to implement server filtering, sorting and paging with jqxGrid.</title>
        <link rel="stylesheet" href="../../Scripts/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="../../Scripts/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxgrid.storage.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../Scripts/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {            
            // prepare the data
    
            var source =
            {
                datatype: "json",
    
                datafields: [
                    { name: 'Id', type: 'number' },
                    { name: 'Timestamp', type: 'date' },
                    { name: 'Source', type: 'string' },
                    { name: 'LogLevel', type: 'string' },
                    { name: 'Logger', type: 'string' },
                    { name: 'Message', type: 'string' }
                ],
                cache: false,
                url: '/Logging/Data',
                filter: function () {
                    // update the grid and send a request to the server.
                    $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                },
                sort: function () {
                    // update the grid and send a request to the server.
                    $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                },
                totalrecords: 1009,
                root: 'Rows',
                beforeprocessing: function (data) {
                    if (data != null) {
                        source.totalrecords = data[0].TotalRows;
                    }
                }
            };
    
            var dataadapter = new $.jqx.dataAdapter(source, {
                loadError: function(xhr, status, error) {
                    alert(error);
                }}
            );
                    
            $("#jqxgrid").jqxGrid(
            {
                //width: $("#main").width(),
                //height: $("#main").height(),
                width: 800,
                height: 600,
                source: dataadapter,
                filterable: true,
                sortable: true,
                virtualmode: true,
                rendergridrows: function(obj) {
                    return obj.data;
                },
                columns: [
                    { text: 'Id', datafield: 'Id', width: 150, type: 'number' },
                    { text: 'Zeitpunkt', datafield: 'Timestamp', width: 150, type: 'date', cellsformat: 'd.M.y HH:mm:ss.fff' },
                                { text: 'Source', datafield: 'Source', width: 100 },
                                { text: 'Level', datafield: 'LogLevel', width: 70 },
                                { text: 'Logger', datafield: 'Logger', width: 180 },
                                { text: 'Message', datafield: 'Message' }
                ]
            });
        });
        </script>
    </head>
    <body id="main" style="width: 95%; height: 95%">
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid"></div>
       </div>
    </body>
    </html>

    Thanks

    Data is still loading error #52911

    Peter Stoev
    Keymaster

    Hi hotsnow,

    I will add a work item about this error. As a workaround, you can enable the Paging functionality by setting “pageable” to true. The Virtual Mode/Load on Demand mode will still be enabled in that case.

    Best Regards,
    Peter Stoev

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

    Data is still loading error #64309

    Jeiwan
    Participant

    Hello,

    Is there any solution for this problem? I receive the same exception when I scroll a table in the virtual mode with sorting enabled. Here’s a demo: http://jsfiddle.net/Jeiwan/sarnt1za/3/ (last version of jqxGrid is used) To get the error you need to scroll the table twice, without letting the previous render to complete.
    Putting $(‘#test_jqxgrid’).jqxGrid(‘updatebounddata’, ‘sort’); in bindingcomplete event doesn’t help, as it goes in an infinitive loop. And pageable option is not acceptable in my case, unfortunately.

    Thanks in advance.

    Data is still loading error #64320

    Peter Stoev
    Keymaster

    Hello Jeiwan,

    “Putting $(‘#test_jqxgrid’).jqxGrid(‘updatebounddata’, ‘sort’); in bindingcomplete event doesn’t help, ” is a big mistake. “bindingcomplete” is raised when the binding is completed and re-binding the Grid by calling the “updatebounddata” will raise “bindingcomplete” again.

    Best Regards,
    Peter Stoev

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

    Data is still loading error #64340

    Jeiwan
    Participant

    Thanks for the reply, Peter, but I already figured out that putting updatebounddata inside bindingcomplete event doesn’t help. Therefore the exception message seems to be misleading. And it is this updatebounddata call that seems to cause the error.
    Anyway, could you give any hint how to solve the problem?

    Data is still loading error #96800

    oscar.vanderleij
    Participant

    Using version 5.4.0 and this issue still exists. The Error is thrown as this line of code “sortby:function(a,b,c,d,e){if(this._loading&&!1!==e)throw new Error(“jqxGrid: “+this.loadingerrormessage);”. The this._loading is true but the grid already seems loaded/bounded.

    Hereby my React code snippets.

    
    const source = {
        url: Settings.apiEndpoint + 'project/' + this.props.projectId + '/targets/?format=json',
        datatype: 'json',
        cache: false,
        datafields: [
            { name: 'id', type: 'int' },
            { name: 'name', type: 'string' },
            { name: 'address', type: 'string' },
            { name: 'user_id', type: 'int' },
            { name: 'user_full_name', type: 'string' },
            { name: 'user_avatar',type: 'string' },
            { name: 'lat', type: 'float' },
            { name: 'lon', type: 'float' }
        ],
        root: 'results',
        beforeprocessing: function (data) {
            source.totalrecords = data.count;
        },   
        filter: () => {
            // update the grid and send a request to the server.
            this.refs.grid.updatebounddata('filter');
        },
        sort: () => {
            // update the grid and send a request to the server.
            this.refs.grid.updatebounddata('sort');
        }
    };
    this.state.dataAdapter = new $.jqx.dataAdapter(source,{});
    
    
    <JqxGrid
        ref="grid"
        source={this.state.dataAdapter}
        columns={this.state.columns}
        filterable={true}
        sortable={true}
        sorttogglestates={1}
        showfilterrow={true}
        rowsheight={52}
        theme={'inspinia'}
        rowdetails={true}
        initrowdetails={initrowdetails}
        rowdetailstemplate={rowdetailstemplate}
        width={'100%'}
        height={'100%'}
        selectionmode={'multiplerowsextended'}
        virtualmode={true}
        rendergridrows={rendergridrows}
        />
    
    Data is still loading error #96819

    oscar.vanderleij
    Participant

    Created a JSFiddle: https://jsfiddle.net/oscarvanderleij/6j43jLv9/

    Please open the console and try scrolling down couple of times short after eachother and see the error message in the console:

    
    jqx-all.js:106 Uncaught Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the 'bindingcomplete' event. Call this function in the 'bindingcomplete' event handler.
        at b.(anonymous function).sortby (https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js:106:3906)
        at b.jqx.dataview.dataview.update (https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js:90:53538)
        at q (https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js:90:267100)
        at Object.l (https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js:90:267157)
        at i.jqx.dataAdapter.callDownloadComplete (https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js:18:32074)
        at Object.success (https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js:18:22405)
        at bw (https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js:7:9062)
        at Object.fireWith [as resolveWith] (https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js:7:10024)
        at S (https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js:18:64582)
        at XMLHttpRequest.H (https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js:18:71052)
    
    Data is still loading error #96822

    oscar.vanderleij
    Participant

    Issue was caused by something else. Solution found in this topic: https://www.jqwidgets.com/community/topic/overactive-sort-event/

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

You must be logged in to reply to this topic.