Row details when filtering grid

[magostoniParticipant]

Hello,
I have a problem with grid details when I use filtering option.

I will try to explain:
I have a page with a jqxGrid; on this grid I’m implementing “Row details”.

The data are loaded from backend php controller.

This is an extract of my code:

	$(document).ready(function ()
	{
		var theme = 'bootstrap';

		var source =
		{
			datatype: "json",
			datafields: [
				{ name: 'codart',type: 'string'},
				{ name: 'descrizione', type: 'string'},
				{ name: 'UIrow', type: 'number'}
			],
			id: 'UIrow',
			url: '<?php echo site_url("/Produzione_schedebase/get_elenco_schedebase") ?>',
			root: 'Rows',

            beforeprocessing: function (data) {
				source.totalrecords = data[0].TotalRows;
			},
			sort: function () {
			// update the grid and send a request to the server.
				$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
			},
			filter: function ()
			{
			// update the grid and send a request to the server.
				$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
            }
		};

        var initrowdetails = function (index, parentElement, gridElement, datarecord)
        {
            var tabsdiv = null;
            var Anagrafica 		= null;
            var Dettagli 		= null;
            var Galvanica 	= null;
            var datiCI = null;

            tabsdiv = $($(parentElement).children()[0]);

            if (tabsdiv != null)
            {
                Anagrafica 		= tabsdiv.find('.Anagrafica');
                Dettagli 		= tabsdiv.find('.Dettagli');
                Galvanica    	= tabsdiv.find('.Galvanica');
                datiCI	        = tabsdiv.find('.Costo industriale');

                //-----Anagrafica---------------------
                var container = $('<div style="margin: 5px;"></div>')
                container.appendTo($(Anagrafica));
                var leftcolumn 	= $('<div style="float: left; width: 50%;"></div>');
                var rightcolumn = $('<div style="float: right; width: 50%;"></div>');
                container.append(leftcolumn);
                container.append(rightcolumn);

                var codarticolo = "<div style='margin: 10px;'><b>Codice:</b> " + datarecord.codart + "</div>";
                var descrizione = "<div style='margin: 10px;'><b>Descrizione:</b> " + datarecord.descrizione + "</div>";

                $(leftcolumn).append(codarticolo);
                $(leftcolumn).append(descrizione);

                //-----------------------------------------------------------------------------------------------------
                $(tabsdiv).jqxTabs({ width: 'auto', height: 170});
            }
        }

        var dataAdapter = new $.jqx.dataAdapter(source);
        		
	// initialize jqxGrid
		$("#jqxgrid").jqxGrid(
		{
			width: '100%',
			filterable: true,
			source: dataAdapter,
			theme: theme,
			autoheight: true,
			autorowheight: true,
			pageable: true,
            //pagesizeoptions: ['10', '20', '50', '100'],
            pagesize: 20,
            virtualmode: true,
            rowdetails: true,
            rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li>Anagrafica</li><li>Dettagli</li><li>Galvanica</li><li>Costo Industriale</li></ul><div class='Anagrafica'></div><div class='Dettagli'></div><div class='Galvanica'></div><div class='Costo_industriale'></div></div>" },
            initrowdetails: initrowdetails,
			editable: false,
			editmode: 'dblclick',
            selectionmode: 'singlerow',
            altrows: true,
            sortable: true,
            enabletooltips: true,
            showfilterrow: true,
            columnsresize: true,
            localization: {
                addrowstring: "Aggiungi",
                udpaterowstring: "Aggiorna",
                deleterowstring: "Elimina",
                resetrowstring: "Reimposta",
                everpresentrowplaceholder: "Digita: "
            },
			rendergridrows: function () {
				return dataAdapter.records;
			},

			//
			columns: [
				{ text: 'Codice', editable:false, datafield: 'codart', width: '25%', cellsalign: 'left', columntype: 'textbox', filtertype: 'input',
					initeditor: function (row, column, editor) {
						editor.attr('maxlength', 32);
                    }
				},
				{ text: 'Descrizione', editable:false, filterable:false, datafield: 'descrizione', width: '75%', cellsalign: 'left', columntype: 'textbox', filtertype: 'input',
					initeditor: function (row, column, editor) {
						editor.attr('maxlength', 64);
                    }
				}]
		});
	});

When I first load the page, it works: the grid is loaded and showed correctly, and if I expand a row I can see the details.

Then, if I filter the grid content, it filter the grid, but it shows this error:
jqxgrid.js:7 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 discovered that the issue is in the initrowdetails function; in particular the issue is due to the datarecord.codart and datarecord.descrizione pieces of code; infact if I comment out or sobstitute them for a test with static strings (like “test value”) it works even when I filter the grid.

How can avoid this issue. Following the error description I thought on a way to move this behaviour on bindingcomplete event but I was not able to find a solution.

Could anyone help me?

With thanks,
Matt

[HristoParticipant]

Hello Matt,

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.
Please, take a look this topic, it is similar:
http://www.jqwidgets.com/community/topic/rowdetails-and-applyfilters/
If you do not resolve this issue please provide us an example in a jsfiddle/jseditor.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts