jQuery UI Widgets › Forums › Grid › error occurs when load grid again
Tagged: angular grid, bindingcomplete, data, jquery grid, jqxgrid, load, loading, The data is still loading
This topic contains 15 replies, has 2 voices, and was last updated by neha101288 9 years, 5 months ago.
-
Author
-
Hi Peter,
I got this <
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.
> error when i loaded my grid again,
actually i need to display grid data on button click event, it works fine with first time but through the error second time(second time click on button.)Hi neha101288,
This error is thrown, because, as the message states, the data is still loading and you are trying to load it a second time before the first load has been complete. As a workaround, you can use a flag variable, e.g.:
var loading = false; ... $('#button').click(function() { if (loading === false) { loading = true; // place your code for data loading here } }); ... $('#jqxGrid').on('bindingcomplete', function(event) { loading = false; });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I still have this error, bindingcomplete event fire correctly and when grid going to bind it through this error message.
<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.>
Used this code in mvc and bind the grid from controller data is in json format.Actually got this in jqxgrid.sort.js file.
sortby:function(d,g,f,e,b){if(this._loading&&b!==false)
Column number – 3813Hi neha101288,
Did you implement our flag variable solution?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Yes,i implement that solution and its work fine. bindingcomplete event fire correctly but when grid going to bind again(second time on button click) it through this error message.Actually got this in jqxgrid.sort.js file.
sortby:function(d,g,f,e,b){if(this._loading&&b!==false)
Column number – 3813Hi neha101288,
If the grid is still binding, the second button click should not do anything. That is what the flag variable is for. Please share your button click code and we will review if you have implemented the solution correctly.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thanks for your fast reply,This is my code
var loading = false;
$(‘#jqxgrid’).on(‘bindingcomplete’, function (event) {
loading = false;
alert(“Binding is completed”);
});
$(“#viewReport”).click(function () {
debugger;if (loading === false) {
loading = true;
$(‘#ReportTitle’).empty();
$(‘#ReportTitle’).append(‘<h2><div style=”margin-top: 5px;”>Auditee Report <br/>’ + yearMonthFromVal + ‘-‘ + yearMonthThruVal + ‘<br/>Errors</div><h2>’);
var AuditeeErrorResult =
{
cache: false,
datatype: “json”,
datafields: [
{ name: ‘Auditee’ },
{ name: ‘ErrorCount’ },
{ name: ‘FunctionDesc’ },
{ name: ‘FunctionErrorCode’ },
{ name: ‘FunctionErrorDesc’ },
{ name: ‘FunctionGroupDesc’ }
],
url: ‘../Auditee/GetAuditeeErrorJson’,
data: { yearMonthFrom: yearMonthFromVal, yearMonthThru: yearMonthThruVal, auditeeIdList: checkedItems },
};
var dataError = new $.jqx.dataAdapter(AuditeeErrorResult, {
loadComplete: function () {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
$(“#jqxgrid”).jqxGrid(‘showgroupsheader’, false);
$(“#jqxgrid”).jqxGrid(‘autoresizecolumns’);
},
});$(“#jqxgrid”).on(‘pagechanged’, function () {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
});$(“#jqxgrid”).jqxGrid( // error occurs here in second time of button click event.
{
width: 1200,
autoheight: true,
source: dataError,
theme: ‘darkblue’,
altrows: true,
enabletooltips: true,
groupable: true,
pageSize: 10,
sortable: true,
filterable: true,
columnsresize: true,
ready: function () {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
},
pagesizeoptions: [’10’, ’20’, ’30’, ’40’, ’50’],
pageable: true,
columns: [
{ text: ‘Auditee’, dataField: ‘Auditee’, width: 200 },
{ text: ‘Error Count’, dataField: ‘ErrorCount’, width: 200 },
{ text: ‘Function Group’, dataField: ‘FunctionGroupDesc’, width: 160 },
{ text: ‘Function’, dataField: ‘FunctionDesc’, width: 220 },
{ text: ‘Error Code’, dataField: ‘FunctionErrorCode’, width: 120 },
{ text: ‘Error Description’, dataField: ‘FunctionErrorDesc’ }],
groups: [‘Auditee’]
});
}});
Hi neha101288,
You should call the grid initialization code only once. On each button click you just need to update the data. Here are the changes I suggest you make:
var AuditeeErrorResult = { cache: false, datatype: "json", datafields: [{ name: 'Auditee' }, { name: 'ErrorCount' }, { name: 'FunctionDesc' }, { name: 'FunctionErrorCode' }, { name: 'FunctionErrorDesc' }, { name: 'FunctionGroupDesc' }], url: '../Auditee/GetAuditeeErrorJson', data: { yearMonthFrom: yearMonthFromVal, yearMonthThru: yearMonthThruVal, auditeeIdList: checkedItems } }; var dataError = new $.jqx.dataAdapter(AuditeeErrorResult); var loading = true; $('#jqxgrid').on('bindingcomplete', function(event) { loading = false; alert("Binding is completed"); $("#jqxgrid").jqxGrid('expandallgroups'); $("#jqxgrid").jqxGrid('showgroupsheader', false); $("#jqxgrid").jqxGrid('autoresizecolumns'); }); $("#jqxgrid").jqxGrid({ width: 1200, autoheight: true, source: dataError, theme: 'darkblue', altrows: true, enabletooltips: true, groupable: true, pageSize: 10, sortable: true, filterable: true, columnsresize: true, pagesizeoptions: ['10', '20', '30', '40', '50'], pageable: true, columns: [{ text: 'Auditee', dataField: 'Auditee', width: 200 }, { text: 'Error Count', dataField: 'ErrorCount', width: 200 }, { text: 'Function Group', dataField: 'FunctionGroupDesc', width: 160 }, { text: 'Function', dataField: 'FunctionDesc', width: 220 }, { text: 'Error Code', dataField: 'FunctionErrorCode', width: 120 }, { text: 'Error Description', dataField: 'FunctionErrorDesc' } ], groups: ['Auditee'] }); $("#jqxgrid").on('pagechanged', function() { $("#jqxgrid").jqxGrid('expandallgroups'); }); $("#viewReport").click(function() { if (loading === false) { loading = true; $('#ReportTitle').empty(); $('#ReportTitle').append('<h2><div style="margin-top: 5px;">Auditee Report <br/>' + yearMonthFromVal + '-' + yearMonthThruVal + '<br/>Errors</div><h2>'); AuditeeErrorResult = { cache: false, datatype: "json", datafields: [{ name: 'Auditee' }, { name: 'ErrorCount' }, { name: 'FunctionDesc' }, { name: 'FunctionErrorCode' }, { name: 'FunctionErrorDesc' }, { name: 'FunctionGroupDesc' }], url: '../Auditee/GetAuditeeErrorJson', data: { yearMonthFrom: yearMonthFromVal, yearMonthThru: yearMonthThruVal, auditeeIdList: checkedItems } }; dataError.dataBind(); $("#jqxgrid").jqxGrid('updatebounddata'); } });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Now getting this error “Unable to get property ‘data Bind’ of undefined or null reference jqwidget”.How to solve this.
hi Dimitar,
I made change, but on grid data update grid bind with my previous parameter.i did not resolve this.
Hi neha101288,
I thought the values of yearMonthFromVal, yearMonthThruVal and checkedItems are updated by the time you click the button (in a portion of your code you did not share). Is that not so?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
I am sharing my full code here, please check it
///My Code
@{
Layout = “~/Views/Shared/_ReportLayout.cshtml”;
}
@section scripts {
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
debugger;
var yearMonthFromVal = 0;
var yearMonthThruVal = 0;
var auditeeIdListVal = null;
var checkedItems = null;//Prepare Source
var source =
{
datatype: “json”,
datafields: [
{ name: ‘YearMonth’ },
{ name: ‘YearMonthDesc’ }
],
url: ‘../Auditee/GetReport’
};//Bind Year Month DropDownList
var dataAdapter1 = new $.jqx.dataAdapter(source);
$(“.jqxWidget”).jqxDropDownList({
selectedIndex: 0, source: dataAdapter1, displayMember: “YearMonthDesc”, valueMember: “YearMonth”, width: 200, height: 20, theme: ‘energyblue’
});//check all
$(“#CheckAll”).jqxButton({
theme: ‘energyblue’, width: ’80’, theme: ‘energyblue’
});
$(‘#CheckAll’).on(‘click’, function () {
$(“.jqxWidget1”).jqxDropDownList(‘checkAll’);});
//Print Button
$(“#print”).jqxButton({ theme: ‘energyblue’});$(“#print”).click(function () {
var gridContent = $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’);
var newWindow = window.open(”, ”, ‘width=800, height=500’),
document = newWindow.document.open(),
pageContent =
‘<!DOCTYPE html>\n’ +
‘<html>\n’ +
‘<head>\n’ +
‘<meta charset=”utf-8″ />\n’ +
‘<title>jQWidgets Grid</title>\n’ +
‘</head>\n’ +
‘<body>\n’ + gridContent + ‘\n</body>\n</html>’;
document.write(pageContent);
document.close();
newWindow.print();
});// Create a Export jqxDropDownList
var download = [
“Export”,
“XML”,
“CSV”,
“PDF”,
“Excel”
];
$(“#ddlExport”).jqxDropDownList({
source: download, selectedIndex: 0, width: 80, height: 20, theme: ‘darkblue’
});
//Code for export page
$(‘#ddlExport’).on(‘change’, function (event) {
var args = event.args;
var index = args.index;
switch (index) {
case 1: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xml’, ‘Auditee_Error_Report’);
break;
case 2: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘Auditee_Error_Report’);
break;
case 3: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘pdf’, ‘Auditee_Error_Report’);
break;
case 4: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘Auditee_Error_Report’);
break;
}
});//From Month DropDown Text Change Event
var dataAdapter1 = new $.jqx.dataAdapter(AuditeeName);
$(‘#DropDownListFromMonth’).on(‘change’, function (event) {
var args = event.args;
yearMonthFromVal = $(‘#DropDownListFromMonth’).jqxDropDownList(‘getItem’, args.index).value;
GetAuditeeName(yearMonthFromVal, yearMonthThruVal);
});//To Month DropDown Text Change Event
$(‘#DropDownListToMonths’).on(‘change’, function (event) {
var args = event.args;
yearMonthThruVal = $(‘#DropDownListToMonths’).jqxDropDownList(‘getItem’, args.index).value;
GetAuditeeName(yearMonthFromVal, yearMonthThruVal);
});//Check Change event of Auditee name drop down
$(“#AuditeeName”).on(‘checkChange’, function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
var items = $(“#AuditeeName”).jqxDropDownList(‘getCheckedItems’);
checkedItems = “”;
$.each(items, function (index) {
checkedItems += this.value + “, “;
});
}
}
});
var AuditeeErrorResult = {
cache: false,
datatype: “json”,
datafields: [{
name: ‘Auditee’
}, {
name: ‘ErrorCount’
}, {
name: ‘FunctionDesc’
}, {
name: ‘FunctionErrorCode’
}, {
name: ‘FunctionErrorDesc’
}, {
name: ‘FunctionGroupDesc’
}],
url: ‘../Auditee/GetAuditeeErrorJson’,
data: {
yearMonthFrom: yearMonthFromVal,
yearMonthThru: yearMonthThruVal,
auditeeIdList: checkedItems
}
};var dataAdapter = new $.jqx.dataAdapter(AuditeeErrorResult);
//dataError.dataBind();$(‘#jqxgrid’).on(‘bindingcomplete’, function (event) {
loading = false;
alert(“Binding is completed”);
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
$(“#jqxgrid”).jqxGrid(‘showgroupsheader’, false);
$(“#jqxgrid”).jqxGrid(‘autoresizecolumns’);
});$(“#jqxgrid”).jqxGrid({
width: 1200,
autoheight: true,
source: dataAdapter,
theme: ‘darkblue’,
altrows: true,
enabletooltips: true,
groupable: true,
pageSize: 10,
sortable: true,
filterable: true,
columnsresize: true,
pagesizeoptions: [’10’, ’20’, ’30’, ’40’, ’50’],
pageable: true,
columns: [{
text: ‘Auditee’,
dataField: ‘Auditee’,
width: 200
}, {
text: ‘Error Count’,
dataField: ‘ErrorCount’,
width: 200
}, {
text: ‘Function Group’,
dataField: ‘FunctionGroupDesc’,
width: 160
}, {
text: ‘Function’,
dataField: ‘FunctionDesc’,
width: 220
}, {
text: ‘Error Code’,
dataField: ‘FunctionErrorCode’,
width: 120
}, {
text: ‘Error Description’,
dataField: ‘FunctionErrorDesc’
}],
groups: [‘Auditee’]
});$(“#jqxgrid”).on(‘pagechanged’, function () {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
});//view Report Click event
loading = false;
$(“#viewReport”).jqxButton({ width: ’90’, theme: ‘darkblue’ });
$(“#viewReport”).click(function () {
debugger;
if (loading === false) {
loading = true;
$(‘#ReportTitle’).empty();
$(‘#ReportTitle’).append(‘<h2><div style=”margin-top: 5px;”>Auditee Report <br/>’ + yearMonthFromVal + ‘-‘ + yearMonthThruVal + ‘<br/>Errors</div><h2>’);AuditeeErrorResult = {
cache: false,
datatype: “json”,
datafields: [{
name: ‘Auditee’
}, {
name: ‘ErrorCount’
}, {
name: ‘FunctionDesc’
}, {
name: ‘FunctionErrorCode’
}, {
name: ‘FunctionErrorDesc’
}, {
name: ‘FunctionGroupDesc’
}],
url: ‘../Auditee/GetAuditeeErrorJson’,
data: {
yearMonthFrom: yearMonthFromVal,
yearMonthThru: yearMonthThruVal,
auditeeIdList: checkedItems
}
};
//dataAdapter = new $.jqx.dataAdapter(AuditeeErrorResult);
dataAdapter.dataBind();
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}
});
});//Function to bind Auditee name dropdown
function GetAuditeeName(yearMonthFromValT, yearMonthThruValT) {
var AuditeeName =
{
datatype: “json”,
datafields: [
{ name: ‘AuditeeID’ },
{ name: ‘Auditee’ }
],
url: ‘../Auditee/GetAuditeeNameJson’,
data: { yearMonthFrom: yearMonthFromValT, yearMonthThru: yearMonthThruValT }
};
var dataAdapter1 = new $.jqx.dataAdapter(AuditeeName);
$(“.jqxWidget1”).jqxDropDownList({
checkboxes: true, source: dataAdapter1, displayMember: “Auditee”, valueMember: “AuditeeID”, width: 200, height: 20, theme: ‘energyblue’
});
$(“.jqxWidget1″).jqxDropDownList(‘checkIndex’, 0);
}</script>
<body class=’default’>
<div id=’content’ style=”background-color: white; width: 100%; padding: 10px; height: 800px”>
<table style=”width: 100%”>
<tr>
<td>
<h1>Report</h1>
</td>
</tr>
<tr>
<td>
<table style=”border: solid; border-color: darkgrey” width=”90%”>
<tr>
<td>
<br />
</td>
<td>
<br />
</td><td>
<br />
</td><td>
<br />
</td>
</tr>
<tr>
<td width=”25%”><b>YearMonth From:</b></td>
<td width=”25%”>
<div id=’DropDownListFromMonth’ class=”jqxWidget”>
</div>
</td>
<td width=”25%”>
<b>YearMonth Thru:</b>
</td>
<td width=”25%”>
<div id=’DropDownListToMonths’ class=”jqxWidget”>
</div>
</td>
</tr>
<tr>
<td width=”25%”><b>Auditee Name:</b></td>
<td width=”25%”><div id=’AuditeeName’ class=”jqxWidget1″>
</div></td>
<td width=”25%”>
<input type=”button” id=’CheckAll’ value=”Check all” />
<input type=”button” value=”View Report” id=’viewReport’ />
</td>
<td width=”25%”></td>
</tr>
<tr>
<td width=”25%”>
</td>
<td>
<div id=”ddlExport”></div>
</td>
<td width=”25%”>
<input type=”button” value=”Print” id=’print’ />
</td>
<td width=”25%”>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br />
</td>
</tr>
<tr>
<td>
<br />
<table style=”border: solid; border-color: darkgrey” width=”90%”>
<tr>
<td>
<b>
<div id=”ReportTitle”></div>
</b></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<br />
<div id=”jqxgrid”></div>
</td>
</tr></table>
</td>
</tr></table>
</div></body>}
Hi Dimitar,
I have checked by using this code(given in my previous reply),my code hits two times server.with initial value. i can not understand why it is happening.
Hi dimitar,
I think this could be solve by using dynamic parameter(pass with datadapter),please tell me how to pass dynamic parameter.
-
AuthorPosts
You must be logged in to reply to this topic.