rowdetails and applyfilters

[RedantJParticipant]

I really need some help with this. The following error is still showing up:

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.

I made this fiddle, which is based from this fiddle. The fiddle that I made does not have the required data.asp to run.

This is the expanded error message:

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.
b.extend.hiderowdetails @ jqx-all.js:7
b.extend._postrender @ jqx-all.js:7
a.extend.applyfilters @ jqx-all.js:7
a.extend._applyfilterfromfilterrow @ jqx-all.js:7
(anonymous function) @ jqx-all.js:7

What function do I call in the ‘bindingcomplete’ event handler? Is it hiderowdetails or is it applyfilters? Is there a better way to write this code?

[DimitarParticipant]

Hi RedantJ,

Your code seems fine. This error can be thrown when server-side processing is enabled and you are trying to initiate one operation (sorting/filtering) before another (sorting/filtering) has been completed. The bindingcomplete event allows you to register when the first operation has been completed so that you can start another.

Best Regards,
Dimitar

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

[RedantJParticipant]

I have one working solution for the bindingcomplete event: After hiding the row details bar, have the web browser refresh itself, such as location.reload(), then re-apply the filter somehow. (or, simply just have a button to refresh the window).

Is there a better way?

[DimitarParticipant]

Hi RedantJ,

I do not think this is necessary and I do not see how you are making use of bindingcomplete. If you could better explain how the issue is reproduced step by step (we cannot run your fiddle), we may be able to come up with a better solution.

Best Regards,
Dimitar

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

[RedantJParticipant]

….or, if I understand you correctly, Dimitar, I could figure out the correct way to use bindingcomplete. It takes a while for coffee to start working in the morning. 🙂

[RedantJParticipant]

I will explain the issue step-by-step:

* The application page comes up.
* The user opens up details (for example, the second row in the grid)
* The user applies a filter (for example, choosing “FRANCE” for Country)
* The user is unable to open details for any row in the grid

The following also produces the same issue:

* The application page comes up.
* The user opens up details (for example, the second row in the grid)
* The user goes to the next page.
* The user applies a filter (for example, choosing “FRANCE” for Country)
* The user is unable to open details for any row in the grid

[RedantJParticipant]

I’ve added in this code in the same program after jqxGrid has been initialized:

$('#jqxgrid').on('rowcollapse', function (event) 
{ 
	$('#jqxgrid').jqxGrid({ rowdetails: false});
	$('#jqxgrid').jqxGrid('refresh');
	$('#jqxgrid').jqxGrid({ rowdetails: true});
	
});

Step by step:
* The application page comes up
* The user opens up details (for example, the second row in the grid)
* The user closes details row
* The user applies a filter (for example, choosing “FRANCE” for Country)
* The user clicks on details twice (for example, the second row in the grid)
* Note: all arrows in the details column disappear

[RedantJParticipant]

I’ve made the following changes to the code and the “data binding” error is no longer appearing:

var boolDetails = [];

// initialize jqxGrid
		
$("#jqxgrid").jqxGrid(
{		
	source: dataadapter,
	width: wide,
	width: 850,
	height: 250,
	showrowdetailscolumn: false,
	selectionmode: 'multiplecellsadvanced',
	editable: true,
	rowdetails: true,
	autoheight: true,
	pageable: true,
	showfilterrow: true,
	sortable: true,	
	virtualmode: true,
	rendergridrows: function(obj)
	{
		return dataAdapter.records;
	},
	rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 200 },
	initrowdetails: initrowdetails,
	pagesize: 20,
	pagesizeoptions: ['20', '50', '100'],
	rendergridrows: function(obj)
	{
		return obj.data;    
	},
	columns: [
		{ text: 'Details', datafield: 'Show', columntype: 'button', width: 80, filterable: false,
			cellsrenderer: function (row) {
				return "Show";
			}, buttonclick: function (row) {
				if (!boolDetails[row]) {
					$('#jqxgrid').jqxGrid({ rowdetails: true}); 
					$('#jqxgrid').jqxGrid('showrowdetails', row);
					$('#jqxgrid').jqxGrid({ rowdetails: false});
				} else {
					$('#jqxgrid').jqxGrid({ rowdetails: true}); 
					$('#jqxgrid').jqxGrid('hiderowdetails', row);
					$('#jqxgrid').jqxGrid({ rowdetails: false});
					boolDetails[row] = null;
				}
			}
		},
		{ text: 'First Name', datafield: 'firstname', width: 200 },
		{ text: 'Last Name', datafield: 'lastname', width: 200 },
		{ text: 'Title', datafield: 'title', width: 180 },
		{ text: 'City', datafield: 'city', width: 100 },
		{ text: 'Country', datafield: 'country'}
	]				

});

$('#jqxgrid').on('rowexpand', function (event) 
{
	// event arguments.
	var args = event.args;
	// row's bound index.
	var rowBoundIndex = args.rowindex;
	boolDetails[rowBoundIndex] = true;
});

This replaced the built-in rowdetails column with a column of buttons. This is not the best fix in the world, but I’m not encountering the “data binding” issue as I have in the past.

[pieczarkazsoltParticipant]

I have same problem with server-side filter and rowdetails combo:

http://jsfiddle.net/pieczarkazsolt/89bL7bz8/ server-side (not working)

http://jsfiddle.net/pieczarkazsolt/62wp12g9/ localdata (working)

[DimitarParticipant]

Hello pieczarkazsolt,

Have you implemented code in your back end that handles server-side filtering? You can find an example here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-filtering.htm. Please also note my previous comments in this topic, especially this one: http://www.jqwidgets.com/community/topic/rowdetails-and-applyfilters/#post-81698.

Best Regards,
Dimitar

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

[JenkeNgParticipant]

How was this problem solved in the end? It’s 2020 now.

[HristoParticipant]

Hello JenkeNg,

Could you clarify your issue?
Also, I would like to ask you did you try the suggestions (example and topic) above?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[JenkeNgParticipant]

Yes, I encountered the same problem as the guy above, I will quote his original words:
“
I will explain the issue step-by-step:

* The application page comes up.
* The user opens up details (for example, the second row in the grid)
* The user applies a filter (for example, choosing “FRANCE” for Country)
* The user is unable to open details for any row in the grid

The following also produces the same issue:

* The application page comes up.
* The user opens up details (for example, the second row in the grid)
* The user goes to the next page.
* The user applies a filter (for example, choosing “FRANCE” for Country)
* The user is unable to open details for any row in the grid
”
and

“
I have same problem with server-side filter and rowdetails combo:

http://jsfiddle.net/pieczarkazsolt/89bL7bz8/ server-side (not working)

http://jsfiddle.net/pieczarkazsolt/62wp12g9/ localdata (working)
”
（But the server-side demo he gave did not seem to get the data）

In a word：
If the data is obtained “async:true” from the server, after expanded “rowdetail” and then performing the “filter” operation, an error will be reported

jqxgrid.js:2891 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.<computed>.hiderowdetails (jqxgrid.js:2891)
at b.<computed>._postrender (jqxgrid.js:4512)
at b.<computed>.applyfilters (jqxgrid.filter.js:1785)
at b.<computed>.addfilter (jqxgrid.filter.js:1706)
at b.<computed>._buildfilter (jqxgrid.filter.js:1615)
at HTMLSpanElement.<anonymous> (jqxgrid.filter.js:2011)
at HTMLSpanElement.dispatch (jquery-1.8.0.min.js:2)
at HTMLSpanElement.h (jquery-1.8.0.min.js:2)

end：
I strongly hope that you can make a demonstration on the server-side with “rowdetail” and “filtering” functions, I wasted too much time on this question

[JenkeNgParticipant]

I checked all other people’s topics on this issue, but didn’t find a useful solution, maybe I’m missing something

[HristoParticipant]

Hello JenkeNg,

The mentioned issue is related to the case mentioned by my colleague Dimitar above.
I would like to suggest you look at this topic.
The data seems is not loaded at the moment when you try to do something else.
Please, take a look at this code snippet below which suggest you how you could handle it:

var isFiltering = false; 
var source =
{
      datafields: [
            ...
      ],
      ...
      filter: function () {
            if (!isFiltering) {
                  isFiltering = true;
                  $("#jqxGrid").jqxGrid("updatebounddata", "filter");
            }
      },
      url: url
};
...

$("#jqxGrid").bind("bindingcomplete", function (event) {
      isFiltering = false;
});

// Grid Initialization
$("#jqxGrid").jqxGrid(settings);

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts