Data loading error when using jqxgrid

[maximus2014Participant]

Hi All,

I am using Jqxgrid 3.1.0 with server-ide filtering,sorting and pagination. I am also using a third party query builder to query the grid content. When run a query using querybuilder, the data is fetched from the server and populated in the grid. The data is successfully populated but an error is displayed in the browser:
“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 code used in the grid is as given below:

$(jqxgrid).on("bindingcomplete", function (event) {
                $("#jqxgrid").jqxGrid('focus');
            });

$("#jqxgrid").jqxGrid(
            { 
                source: dataAdapter,
                filterable: true,
	        sortable: true,
                pageable: true,
                pagesizeoptions:['500', '1000', '1500'],
                pagesize:1000,
                columnsresize:true,
                columnsreorder:true,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'><li>Description</li><li>Report Notes</li><div class='information'></div><div class='description'></div><div class='reportnotes'></div></div>", rowdetailsheight: 260 },
                virtualmode:true, //should be true for server-side pagination
                rendergridrows: function (obj) { 
                    return obj.data;
                }, 
                initrowdetails: initrowdetails,
                selectionmode: 'multiplerowsextended',
                groupable:true,
                width:'99.7%',
                height:600,
                pagerrenderer: pagerrenderer,
                columns: [
                  { text: 'Field1', datafield: 'field1', width: '9%', filtertype:'date', 
                      cellformat:'yyyy-MM-dd',cellsrenderer:cellsrenderer},
                  { text: 'Field2', datafield: 'field2', width: '7%', cellsrenderer:cellsrenderer, hidden:true},
                  { text: 'Field3', datafield: 'field3', width: '4%', cellsrenderer:cellsrenderer},
                  { text: 'Field4', datafield: 'field4', width: '4%', cellsrenderer:cellsrenderer},
                ],
               
                // Column header right-click
                ready: function () {
                    $(".jqx-grid-column-header").mousedown(function (event) {
                        var button = event.which;
                        if (button == 3) {
                            $("#Menu").jqxMenu('open', parseInt(event.pageX) + 5, parseInt(event.pageY) + 5);
                        }
                    });
                },
            });

Thanks in advance

[Peter StoevKeymaster]

Hi maximus2014,

The error is raised when you try to set a property or call a method while the Grid’s data is still not loaded and the Grid is not rendered.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[maximus2014Participant]

Hi Stoev,

When I run the query, all I am doing is to call the function in which jqxgrid is initialized and pass the query in the ‘url’ parameter of the grid.

Thanks in advance.

[Peter StoevKeymaster]

Hi maximus2014,

From the provided details and code, I cannot tell more about this error. The suggestion which I can make you is to use the latest version of the Grid. May be there was something in an old version which is already resolved.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[maximus2014Participant]

Thank you Stoev, I’ll test using the latest version

[maximus2014Participant]

Hi Stoev,

I installed the version 3.4.0 and tested. The error still exists. Thanks in advance.

[Peter StoevKeymaster]

Hi maximus2014,

The error message “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.” is raised by us when the developer tries to set a property or call a method while the Grid’s data is still not loaded and the Grid is not rendered. Please, prepare and share a full example(preferably using jsfiddle.net/) which reproduces your issue so we would be able to test it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[maximus2014Participant]

Hi Stoev, My code with some more detail is as given below :

var url = “/log2timeline_data/?start_date=”+start_date+”&end_date=”+end_date+
“&datafield=”+field+”&datavals=”+fieldvals+”&qb=”+query+”&qbargs=”+queryArgs;
}
var source =
{
datatype: “json”,
datafields: [
{name:’field1′},{name: ‘field2’ },{ name: ‘field3’ },{ name: ‘field4’ },
],
updaterow: function (rowid, rowdata, commit) {
$.post(“/updatereport/”, {‘row_id’:rowdata.id, ‘report_notes’:rowdata.report_notes})
.done(function(data){
console.log(‘success’);
$(“#popupDiv”).find(‘[id=”id”]’).val(”);
$(“#popupDiv”).find(‘[id=”reportnotes”]’).val(”);
$(“#jqxgrid”).jqxGrid({ source: source });
});
},
filter: function() {
loaded_via = “GF”
// 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’);
},
root: ‘Rows’,
cache: false,
beforeprocessing: function(data) {
if (data != ”) {
source.totalrecords = data[0].TotalRows;
}
},
url: url,
processdata: function(data) {
data.featureClass = “P”;
data.style = “full”;
},
};
var initrowdetails = function (index, parentElement, gridElement, datarecord) {
var tabsdiv = null;
var information = null;
var notes = null;
tabsdiv = $($(parentElement).children()[0]);
if (tabsdiv != null) {
information = tabsdiv.find(‘.information’);
reportnotes = tabsdiv.find(‘.reportnotes’);
description = tabsdiv.find(‘.description’);
var title = tabsdiv.find(‘.title’);
title.text(datarecord.datetime);
var container = $(‘<div style=”margin: 2px;”></div>’)
container.appendTo($(information));
var leftcolumn = $(‘<div style=”float: left; width: 35%;”></div>’);
var middlecolumn = $(‘<div style=”float: left; width: 35%;”></div>’);
var rightcolumn = $(‘<div style=”float: left; width: 30%;”></div>’);
container.append(leftcolumn);
container.append(middlecolumn);
container.append(rightcolumn);

var datetime = “<div style=’margin: 5px;overflow:hidden;’><b>Date:</b> ” + datarecord.datetime + “</div>”;
var timezone = “<div style=’margin: 5px;overflow:hidden;’><b>Timezone:</b> ” + datarecord.timezone + “</div>”;
var source = “<div style=’margin: 5px;overflow:hidden;’><b>Source:</b> ” + datarecord.source + “</div>”;
var macb = “<div style=’margin: 5px;overflow:hidden;’><b>Macb:</b> ” + datarecord.macb + “</div>”;
var sourcetype = “<div style=’margin: 5px;overflow:hidden;’><b>Source type:</b> ” + datarecord.sourcetype + “</div>”;
var type = “<div style=’margin: 5px;overflow:hidden;’><b>Type:</b> ” + datarecord.type + “</div>”;
var user = “<div style=’margin: 5px;overflow:hidden;’><b>User:</b> ” + datarecord.user + “</div>”;
var host = “<div style=’margin: 5px;overflow:hidden;’><b>Host:</b> ” + datarecord.host + “</div>”;
var filename = “<div style=’margin: 5px;overflow:hidden;’><b>File:</b> ” + datarecord.filename + “</div>”;
var inode = “<div style=’margin: 5px;overflow:hidden;’><b>Inode:</b> ” + datarecord.inode + “</div>”;
$(leftcolumn).append(datetime);
$(leftcolumn).append(timezone);
$(leftcolumn).append(source);
$(leftcolumn).append(macb);
$(leftcolumn).append(sourcetype);
$(leftcolumn).append(type);
$(leftcolumn).append(user);
$(leftcolumn).append(host);
$(leftcolumn).append(filename);
$(leftcolumn).append(inode);

var notes = “<div style=’margin: 5px;overflow:hidden;’><b>Notes:</b> ” + datarecord.notes + “</div>”;
var format = “<div style=’margin: 5px;overflow:hidden;’><b>Format:</b> ” + datarecord.format + “</div>”;
var extra = “<div style=’margin: 5px;overflow:hidden;’><b>Extra:</b> ” + datarecord.extra + “</div>”;
var inreport = “<div style=’margin: 5px;overflow:hidden;’><b>In Report:</b> ” + datarecord.inreport + “</div>”;
var tag = “<div style=’margin: 5px;overflow:hidden;’><b>Tag:</b> ” + datarecord.tag + “</div>”;
var color = “<div style=’margin: 5px;overflow:hidden;’><b>Color:</b> ” + datarecord.color + “</div>”;
var offset = “<div style=’margin: 5px;overflow:hidden;’><b>Offset:</b> ” + datarecord.offset + “</div>”;
var store_number = “<div style=’margin: 5px;overflow:hidden;’><b>Store number:</b> ” + datarecord.store_number + “</div>”;
var store_index = “<div style=’margin: 5px;overflow:hidden;’><b>Store index:</b> ” + datarecord.store_index + “</div>”;
var vss_store_number = “<div style=’margin: 5px;overflow:hidden;’><b>VSS Store Number:</b> ” + datarecord.vss_store_number + “</div>”;
$(middlecolumn).append(notes);
$(middlecolumn).append(format);
$(middlecolumn).append(extra);
$(middlecolumn).append(inreport);
$(middlecolumn).append(tag);
$(middlecolumn).append(color);
$(middlecolumn).append(offset);
$(middlecolumn).append(store_number);
$(middlecolumn).append(store_index);
$(middlecolumn).append(vss_store_number);

var url = “<div style=’margin: 5px;overflow:hidden;’><b>Url:</b> ” + datarecord.url + “</div>”;
var record_number = “<div style=’margin: 5px;overflow:hidden;’><b>Record Number:</b> ” + datarecord.record_number + “</div>”;
var event_identifier = “<div style=’margin: 5px;overflow:hidden;’><b>Event Identifier:</b> ” + datarecord.event_identifier + “</div>”;
var event_type = “<div style=’margin: 5px;overflow:hidden;’><b>Event Type:</b> ” + datarecord.event_type + “</div>”;
var source_name = “<div style=’margin: 5px;overflow:hidden;’><b>Source Name:</b> ” + datarecord.source_name + “</div>”;
var user_sid = “<div style=’margin: 5px;overflow:hidden;’><b>User SId:</b> ” + datarecord.user_sid + “</div>”;
var computer_name = “<div style=’margin: 5px;overflow:hidden;’><b>Computer Name:</b> ” + datarecord.computer_name + “</div>”;
var evidence = “<div style=’margin: 5px;overflow:hidden;’><b>Evidence:</b> ” + datarecord.evidence + “</div>”;
$(rightcolumn).append(url);
$(rightcolumn).append(record_number);
$(rightcolumn).append(event_identifier);
$(rightcolumn).append(event_type);
$(rightcolumn).append(source_name);
$(rightcolumn).append(user_sid);
$(rightcolumn).append(computer_name);
$(rightcolumn).append(event_identifier);

var reportescontainer = $(‘<div style=”white-space: normal; margin: 5px;”><span>’ + datarecord.reportnotes + ‘</span></div>’);
var descriptioncontainer = $(‘<div style=”white-space: normal; margin: 5px;”><span>’ + datarecord.description + ‘</span></div>’);
$(reportnotes).append(reportescontainer);
$(description).append(descriptioncontainer);
$(tabsdiv).jqxTabs({ width: ‘95%’, height: 240});
}
};

var cellsrenderer = function (row, column, value, defaultHtml, columnSettings, rowData) {
var element = $(defaultHtml);
if (rowData.color != ”) {
element.css({ ‘background-color’: rowData.color, ‘width’: ‘100%’, ‘height’: ‘100%’, ‘margin’:’0px’, ‘padding’:’7px 5px 5px 5px’});
// return element[0].outerHTML;
}
else {
element.css({‘background-color’: rowData.color, ‘width’: ‘100%’, ‘height’: ‘100%’, ‘margin’:’0px’, ‘padding’:’7px 5px 5px 5px’});
}
if(column == ‘inreport’){
if (value != ”) {
element.html(‘‘);
}
}
else if(column == ‘source’){
element.html(‘‘+value);
}
return element[0].outerHTML;
};

//Custom pager

var pagerrenderer = function () {
var element = $(“<div style=’margin-top: 5px; width: 100%; height: 100%;’></div>”);
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
// create navigation buttons.
var rightButton = $(“<div style=’padding: 1px; margin: 0px 3px; float: right;’><div style=’margin-left: 9px; width: 14px; height: 16px;’></div></div>”);
rightButton.find(‘div’).addClass(‘jqx-icon-arrow-right’);
rightButton.width(36);
rightButton.jqxButton();
// append the navigation buttons to the container DIV tag.
rightButton.appendTo(element);

var leftButton = $(“<div style=’padding: 1px; float: right;’><div style=’margin-left: 9px; width: 14px; height: 16px;’></div></div>”);
leftButton.find(‘div’).addClass(‘jqx-icon-arrow-left’);
leftButton.width(36);
leftButton.jqxButton();
leftButton.appendTo(element);
// create a page information label and append it to the container DIV tag.
var label = $(“<div style=’margin: 2px 3px; float: right;’></div>”);
var start_row_count = 1 + (paginginfo.pagenum * paginginfo.pagesize)
var end_row_count = (paginginfo.pagenum + 1) * paginginfo.pagesize
//label.text(Math.min(1,datainfo.rowscount) + “-” + Math.min(paginginfo.pagesize,datainfo.rowscount) + ‘ of ‘ + datainfo.rowscount);
label.text( start_row_count+ “-” + Math.min(datainfo.rowscount, end_row_count) + ‘ of ‘ + datainfo.rowscount);
label.appendTo(element);
self.label = label;
// records per page option
var recordsPerPageDropDown = $(“<div style=’padding: 0px; margin: 0px 3px; float: right;’></div>”);

var sizes = new Array(500, 1000, 1500);
var size_index = sizes.indexOf($(‘#jqxgrid’).jqxGrid(‘pagesize’));
recordsPerPageDropDown.jqxDropDownList({ width: 55, height: 17, dropDownHeight: 80, source: sizes,selectedIndex: size_index });
recordsPerPageDropDown.on(‘select’, function (event) {
var args = event.args;
if (args) {
var item = args.item;
var label = item.label;
$(‘#jqxgrid’).jqxGrid({ pagesize: parseInt(label) });
recordsPerPageDropDown.jqxDropDownList({ selectedIndex: 0});
}
});
recordsPerPageDropDown.appendTo(element);
var recordsPerPageLabel = $(“<div style=’padding: 0px; margin: 0px 3px; float: right;’>Show Rows:</div>”);
recordsPerPageLabel.appendTo(element);

// navigate to the next page when the right navigation button is clicked.
rightButton.click(function (event) {
$(“#jqxgrid”).jqxGrid(‘gotonextpage’);
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + “-” + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ‘ of ‘ + datainfo.rowscount);

});
// navigate to the previous page when the left navigation button is clicked.
leftButton.click(function () {
$(“#jqxgrid”).jqxGrid(‘gotoprevpage’);
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + “-” + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ‘ of ‘ + datainfo.rowscount);

});
//Refresh Button
var refreshButton = $(“<div style=’float: left;width:30px;’></div>”);
refreshButton.append(‘‘)
//refreshButton.jqxButton();
refreshButton.appendTo(element);
refreshButton.click(function() {
stdate = ”;
endate = ”;
field = ”;
fieldvals = ”;
qb = ”;
args = ”;
$(“#jqxgrid”).jqxGrid(‘clear’);
renderChart(stdate, endate,field, fieldvals, qb, args);
$(“#stats_wrapper table tbody”).find(“tr:gt(0)”).remove();
location.reload();
});
//Search Button
var searchButton = $(“<div style=’float: left;width:30px;’></div>”);
searchButton.append(‘‘);
searchButton.appendTo(element);

searchButton.click(function(){
var offset = $(“#jqxgrid”).offset();
$(“#finddiv”).jqxWindow(‘open’);
$(“#finddiv”).jqxWindow(‘move’, offset.left + 30, offset.top + 30);
filterList.splice(0, 0, ‘(Select)’);
$(“#searchcolumns”).jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0,
width: 100, height: 15,
source:filterList,
});
$(“#searchconditions”).jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0,
width: 100, height: 15,
source:stringFilters,
});
$(“#searchvalues”).jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0,
width: 100, height: 15,
source:[‘(All)’],
});
$(“#searchcolumns”).on(‘select’, function (event) {
if(event.args.item.index != 0) {
updateFilterBox(event.args.item.value);
}
else {
var initialArray = new Array();
initialArray.splice(0,0,'(Select)’)
$(“#searchconditions”).jqxDropDownList({selectedIndex: 0});
$(“#searchvalues”).jqxDropDownList({ source:initialArray });
initialArray.length = 0;
}
});
filterList.splice(0,1);
});
// return the new pager element.
return element;
}

$(“#jqxgrid”).on(‘pagechanged’, function () {
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + “-” + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ‘ of ‘ + datainfo.rowscount);
});
if ($(‘#hdn_activerows’).val() != ‘0’){
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {
var dbtotal = formatStatsValue(data[0].dbtotal);
var dbevidence = formatStatsValue(data[0].dbevidence);
var dbsources = formatStatsValue(data[0].dbsources);
var selectedRows = formatStatsValue(data[0].TotalRows);
$(“#total”).html(dbtotal);
$(“#total_evidence”).html(dbevidence);
$(“#total_sources”).html(dbsources);
$(“#min_date”).html(data[0].start_date);
$(“#max_date”).html(data[0].end_date);
$(“#rowscount”).html(data[0].TotalRows);
},
loadError: function (xhr, status, error) { console.log(‘error’); }
});
}
$(jqxgrid).on(“bindingcomplete”, function (event) {
$(“#jqxgrid”).jqxGrid(‘focus’);
});

$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
filterable: true,
sortable: true,
pageable: true,
pagesizeoptions:[‘500’, ‘1000’, ‘1500’],
pagesize:1000,
columnsresize:true,
columnsreorder:true,
rowdetails: true,
rowdetailstemplate: { rowdetails: “<div style=’margin: 10px;’><ul style=’margin-left: 30px;’><li class=’title’>

Description

Report Notes

<div class=’information’></div><div class=’description’></div><div class=’reportnotes’></div></div>”, rowdetailsheight: 260 },
virtualmode:true, //should be true for server-side pagination
rendergridrows: function (obj) {
return obj.data;
},
initrowdetails: initrowdetails,
selectionmode: ‘multiplerowsextended’,
groupable:true,
width:’99.7%’,
height:600,
pagerrenderer: pagerrenderer,
columns: [
{ text: ‘Field1’, datafield: ‘field1’, width: ‘9%’, filtertype:’date’,
cellformat:’yyyy-MM-dd’,cellsrenderer:cellsrenderer},
{ text: ‘Field2’, datafield: ‘field2’, width: ‘7%’, cellsrenderer:cellsrenderer, hidden:true},
{ text: ‘Field3’, datafield: ‘field3’, width: ‘4%’, cellsrenderer:cellsrenderer},
{ text: ‘Field4’, datafield: ‘field4’, width: ‘4%’, cellsrenderer:cellsrenderer},
],

// Column header right-click
ready: function () {
$(“.jqx-grid-column-header”).mousedown(function (event) {
var button = event.which;
if (button == 3) {
$(“#Menu”).jqxMenu(‘open’, parseInt(event.pageX) + 5, parseInt(event.pageY) + 5);
}
});
},
});

[Peter StoevKeymaster]

Hi maximus2014,

Please, prepare and share a jsfiddle.net example which illustrates the described behavior. Sorry, but from this code I don’t understand anything about your issue and logic.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[maximus2014Participant]

Hi Stoev,

The application that I am doing has some third party softwares which have a number of files(most of them are customised) to be included in the script tag. So it would be hard to add my code in js fiddle. Thank you for your advice.

[maximus2014Participant]

Hi Stoev,

I searched the issue in the web and found that the parameter ‘pagesizeoptions‘ in the jqxgrid initialization was the culprit. I removed this option and found that the error was missing. But in my application, the client needs 3 ‘pagesizeoptions’ values 500, 1000 and 1500 from which he could choose. So the ‘pagesizeoptions’ can’t be removed. Also, when the pagesizeoptions is removed, when query builder filtering is done, the grid loads with ‘rowdetails‘ value visible for each row, which is normally hidden. Thanks in advance.

[maximus2014Participant]

Hi Stoev,

I’ve solved the issue. I am using a custom pagerrenderer. I added an array listing the paging options and commented the ‘pagesizeoptions‘ in the jqxgrid initialization code. That did the trick. Thanks a lot for your support.

[maximus2014Participant]

Hi Stoev,

Today I just tested the changes that were made regarding the commenting ‘pagesizeoptions‘ in jqxgrid initialization. I found a weird issue. When I load the grid using query builder output, the grid gets called ‘twice’. Thanks in advance.

[maximus2014Participant]

Hi Stoev
In my application, ‘loadComplete‘ parameter is somehow called twice. Could you please tell me how this error occurs. I am loading data to jqxgrid using a third party query builder as I have mentioned in my previous posts. When I do grid filtering this issue is not found.
Thanks in advance.

[Author]

Posts