jQuery UI Widgets › Forums › Grid › Data is still loading error
Tagged: bindingcomplete, jqwidgets, sort, sortable, virtualmode
This topic contains 7 replies, has 4 voices, and was last updated by oscar.vanderleij 7 years ago.
-
Author
-
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
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 StoevjQWidgets Team
http://www.jqwidgets.com/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.
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 StoevjQWidgets Team
http://www.jqwidgets.com/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?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} />
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)
Issue was caused by something else. Solution found in this topic: https://www.jqwidgets.com/community/topic/overactive-sort-event/
-
AuthorPosts
You must be logged in to reply to this topic.