Error: jqxGrid: The data is still loading… bindingcomplete

[siegfriedoParticipant]

Hello,

you probably know you made a great library so I come right to my problem. I dynamically fill two grids. The first invocation works fine but with the 2nd one only the first grid is updated because I get the following error:
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.

.sortby()
jqxgrid.sort.js:7
.removesort()
jqxgrid.sort.js:7
.propertyChangedHandler()
jqxgrid.js:7
… and so on

What I don’t understand that the code is working well until I include “jqxgrid.sort.js”. I read a few posts with the same problem but nothing solved it.
Here is an example of my code:

$(document).ready(function () {         
	var sourceverband = [
		{ value: 1, label: "A" },
		{ value: 2, label: "B" },
		{ value: 3, label: "C" },
		{ value: 4, label: "D" },
		{ value: 5, label: "E" },
	];

	var dataverband = new $.jqx.dataAdapter(sourceverband);
	$("#Verband").jqxDropDownList({
		source: dataverband, displayMember: "label", valueMember: "value", width: 120, height: 25, placeHolder : "Verband...",
	});	

	$("#Verband").on('select', function (event) {
		if (event.args) {
			var item = event.args.item;
			if (item) {							
				var sourceklasse =
				{
					datatype: "json",
					datafields: [
					{ name: 'l_id', type: 'int' },
					{ name: 'k_id', type: 'int' },
					{ name: 'bwk_alt_name', type: 'string' },
					{ name: 'anzeigen', type: 'bool' }
					],
					url: "ligenuebersicht_abfragen.php",
				};
				sourceklasse.data = {option: 3, bw_id: item.value};
				var dataklasse = new $.jqx.dataAdapter(sourceklasse);

				$("#Klasse").jqxGrid(
				{
					width: 250,
					height: 200,
					source: dataklasse,
					columnsresize: true,
					editable: true,
					columns: [
					{ text: 'K', dataField: 'k_id', width: 10, cellsalign: 'right', editable: false },
					{ text: 'Bezeichnung', dataField: 'bwk_alt_name', width: 150, editable: false },
					{ text: 'show', columntype: 'checkbox', dataField: 'anzeigen', cellsalign: 'center', width: 50 }
					]
				});														

				var sourceliga =
				{
					datatype: "json",
					datafields: [
					{ name: 'l_id', type: 'int' },
					{ name: 'k_id', type: 'int' },
					{ name: 'l_name', type: 'string' },
					{ name: 'anzeigen', type: 'bool' },
					{ name: 'pin', type: 'string' },
					],
					url: "ligenuebersicht_abfragen.php",
				};
				sourceliga.data = {option: 4, bw_id: item.value};
				var dataliga = new $.jqx.dataAdapter(sourceliga);

				$("#Liga").jqxGrid(
				{
					width: 400,
					height: 200,
					source: dataliga,
					columnsresize: true,
					editable: true,
					columns: [
					{ text: 'K', dataField: 'k_id', width: 10, cellsalign: 'right', editable: false },
					{ text: 'Liga', dataField: 'l_name', width: 250, editable: false },
					{ text: 'Pin', dataField: 'pin', width: 50 },
					{ text: 'show', columntype: 'checkbox', dataField: 'anzeigen', cellsalign: 'center', width: 50 }
					]
				});						
			}						
		}
	});
});

[ChristopherParticipant]

Hi siegfriedo,

You shoudn’t be initializing widgets inside of the “select” event. Instead you can set the sources or reload them to the grids by calling “updatebounddata”. The reason for this error is because you’re making a server operation before the grid data has been fully loaded. Also note that you should set properties, call methods, etc. after the Binding is Completed i.e in the “bindingcomplete” handler or in the Grid’s “ready” callback. If you do it on a different place, then update your code. You read more about it here:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm?search=jqxgrid

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[siegfriedoParticipant]

Hello Christopher,

thank you for your quick response and your advice. I initialize the grids and then just update their data.

$(document).ready(function () {         
	var sourceverband = [
		{ value: 1, label: "A" },
		{ value: 2, label: "B" },
		{ value: 3, label: "C" },
		{ value: 4, label: "D" },
		{ value: 5, label: "E" },
	];

	var dataverband = new $.jqx.dataAdapter(sourceverband);
	$("#Verband").jqxDropDownList({
		source: dataverband, displayMember: "label", valueMember: "value", width: 120, height: 25, placeHolder : "Verband...",
	});	

	$("#Klasse").jqxGrid(
	{
		width: 250,
		height: 200,
		columnsresize: true,
		editable: true,
		columns: [
		{ text: 'K', dataField: 'k_id', width: 10, cellsalign: 'right', editable: false },
		{ text: 'Bezeichnung', dataField: 'bwk_alt_name', width: 150, editable: false },
		{ text: 'show', columntype: 'checkbox', dataField: 'anzeigen', cellsalign: 'center', width: 50 }
		]
	});
	var sourceklasse =
	{
		datatype: "json",
		datafields: [
		{ name: 'l_id', type: 'int' },
		{ name: 'k_id', type: 'int' },
		{ name: 'bwk_alt_name', type: 'string' },
		{ name: 'anzeigen', type: 'bool' }
		],
		url: "ligenuebersicht_abfragen.php",
	};	
	var dataklasse;
	
	$("#Liga").jqxGrid(
	{
		width: 400,
		height: 200,
		columnsresize: true,
		editable: true,
		columns: [
		{ text: 'K', dataField: 'k_id', width: 10, cellsalign: 'right', editable: false },
		{ text: 'Liga', dataField: 'l_name', width: 250, editable: false },
		{ text: 'Pin', dataField: 'pin', width: 50 },
		{ text: 'show', columntype: 'checkbox', dataField: 'anzeigen', cellsalign: 'center', width: 50 }
		]
	});
	var sourceliga =
	{
		datatype: "json",
		datafields: [
		{ name: 'l_id', type: 'int' },
		{ name: 'k_id', type: 'int' },
		{ name: 'l_name', type: 'string' },
		{ name: 'anzeigen', type: 'bool' },
		{ name: 'pin', type: 'string' },
		],
		url: "ligenuebersicht_abfragen.php",
	};
	var dataliga;	

	$("#Verband").on('select', function (event) {
		if (event.args) {
			var item = event.args.item;
			if (item) {							
				sourceklasse.data = {option: 3, bw_id: item.value};
				dataklasse = new $.jqx.dataAdapter(sourceklasse);

				$("#Klasse").jqxGrid( {	source: dataklasse } );

				sourceliga.data = {option: 4, bw_id: item.value};
				dataliga = new $.jqx.dataAdapter(sourceliga);

				$("#Liga").jqxGrid( {source: dataliga} );						
			}						
		}
	});
});

[Author]

Posts