Grid Row details not working after server side filtering

[RobWarningParticipant]

Hi,
I try to use Row details in my jqxgrid. I encounter the strange behavior that initially the Row-details are opening and closing as they should.
but then,after an initial opening and closing of a row detail, I apply a filter to the grid or clear the filter, then the row details opening is not working any more. I see no error messages in the console.
I put an break point in my initrowdetails function, but it is never called after this filter change call.

for your information this is my code:

 var initrowdetails = function (index, parentElement, gridElement, datarecord) {
        var details = $($(parentElement).children()[0]);
        details.html('Under construction');
        details.addClass('details');
    };

    //initialize the grid.
    $('#grid').jqxGrid({
        width: 1200,
        source: dataAdapter,
        showtoolbar: true,
        rendertoolbar: function (statusbar) {
            // appends buttons to the status bar.
            var container = $("<div class='container' style='overflow: hidden; position: relative; margin: 5px;'></div>");
            var reloadButton = $("<div class='reloadButton' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'/><span class='fa fa-sync-alt'></span><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
            var searchButton = $("<div class='searchButton' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'/><span class='fa fa-search'></span><span style='margin-left: 4px; position: relative; top: -3px;'>Find</span></div>");
            var clearFilterButton = $("<div class='clearButton' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'/><span class='fa fa-reply-all'></span><span style='margin-left: 4px; position: relative; top: -3px;'>clear filter</span></div>");
            var filter1Button = $("<div class='filter1Button' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'><span class='fa fa-filter'></span><span style='margin-left: 4px; position: relative; top: -3px;'>Process Filter</span></div>");
            var filter2Button = $("<div class='filter1Button' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'/><span class='fa fa-filter'></span><span style='margin-left: 4px; position: relative; top: -3px;'>approuve Filter</span></div>");
            container.append(reloadButton);
            container.append(searchButton);
            container.append(clearFilterButton);
            container.append(filter1Button);
            container.append(filter2Button);
            statusbar.append(container);
            reloadButton.jqxButton({ width: 70, height: 20 });
            searchButton.jqxButton({ width: 50, height: 20 });
            clearFilterButton.jqxButton({ width: 100, height: 20 });
            filter1Button.jqxButton({ width: 120, height: 20 });
            filter2Button.jqxButton({ width: 120, height: 20 });
            // reload grid data.
            reloadButton.click(function (event) {
                $("#grid").jqxGrid('updatebounddata', 'filter');
            });
            // search for a record.
            searchButton.click(function (event) {
                //alert('Search function not implimented yet');
                var searchId = prompt("please enter the mutation Id to search for: ");
                // Check if searchId is a interger.
                if ($.isNumeric(searchId) && searchId > 0 && Math.floor(searchId) == searchId) {
                    searchFilter(searchId);
                } else { alert('Invalid input');}
            });
            clearFilterButton.click(function (event) {
                $('#grid').jqxGrid('clearfilters');
            });
            filter1Button.click(function (event) {
                initialFilter();
            });
            filter2Button.click(function (events) {
                approuveFliter();
            });
        },
        virtualmode: true,
        pageable: true,
        autoheight: true,
        sortable: true,
        filterable: true,
        editable: true,
        editmode: 'click',
        ready: function () {
            initialFilter();
        },
        rendergridrows: function (obj) {
            return obj.data;
        },
        autoshowfiltericon: true,
        rowdetails: true,
        rowdetailstemplate: {
            rowdetails: "<div>Under Construction!</div>",
            reowdetailsheight:200
            },
        initrowdetails: initrowdetails,
        Columns: [
            { text: 'Mut. Id', cellclassname: SetCellClass, datafield: 'mutId',  width: 80, pinned: true, editable: false },
            { text: 'Afdeling', cellclassname: SetCellClass, datafield: 'departement', width: 80, editable: false},
            { text: 'Naam', cellclassname: SetCellClass, datafield: 'naam', width: 120, editable: false },
            { text: 'User Id', cellclassname: SetCellClass, datafield: 'userId', width: 80, editable: false},
            { text: 'verlof type', cellclassname: SetCellClass, datafield: 'mutationType', width: 120, editable: false },
            { text: 'verlof group', datafield: 'mutationGroup', hidden: true },
            { text: 'Van', cellclassname: SetCellClass, datafield: 'dateVan', cellsformat: 'ddd dd-MM-yyyy', width: 120, editable: false }, 
            { text: 'Tot', cellclassname: SetCellClass, datafield: 'dateTot', cellsformat: 'ddd dd-MM-yyyy', width: 120, editable: false }, 
            {
                text: 'Tijd Van', cellclassname: SetCellClass, datafield: 'tijdVan', filterable: false, sortable: false, cellsformat: 'HH:mm', cellsrenderer: function (row, datafield, value, defaultvalue, column, rowdata) {
                    if ((rowdata.mutationGroup === 'OnDuty') || (rowdata.mutationGroup === 'offDuty')) {
                        return "<div style='margin: 4px;''class='jqx-right-align'></div>";
                    } else {
                        return "<div style='margin: 4px;''class='jqx-right-align'>" + defaultvalue + "</div>";
                    }
                }, width: 100, editable: false
            },
            {
                text: 'Tijd Tot', cellclassname: SetCellClass, datafield: 'tijdTot', filterable: false, sortable: false, cellsformat: 'HH:mm', cellsrenderer: function (row, datafield, value, defaultvalue, column, rowdata) {
                    if ((rowdata.mutationGroup === 'OnDuty') || (rowdata.mutationGroup === 'offDuty')) {
                        return "<div style='margin: 4px;''class='jqx-right-align'></div>";
                    } else {
                        return "<div style='margin: 4px;''class='jqx-right-align'>" + defaultvalue + "</div>";
                    }
                }, width: 100, editable: false },
            {
                text: '#Delta', editable: false, datafield: 'Diff', width: 80, filterable: false, sortable: false,
                cellclassname: SetCellClass,
                cellsrenderer: function (row, datafield, value, defaultvalue, column, rowdata) {
                    var van = rowdata.dateVan;
                    var tot = rowdata.dateTot;
                    var Diff = CreateDiff(van, tot);
                    return "<div style='margin: 4px;''class='jqx-right-align'>" + Diff + "</div>";
                }
            },
            {
                text: 'Status', datafield: 'status', width: 120, columntype: 'dropdownlist', cellbeginedit: function (row, datafield, columntype, value) {
                    if (value === 'Deleted'||value ==='Canceled') {
                        return false; //Disable Editing if status is Deleted or canceled
                    }
                },
                createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                    var dataSource;
                    dataSource = [ 'Tentative', 'Nieuw', 'Approved','Deleted', 'Processed' ];
                    editor.jqxDropDownList({ source: dataSource });
                    editor.jqxDropDownList.on('close', function () {
                        alert('closing');
                    });
                }
                
            }
        ]
    });

do you have a solution for this?

regards

Rob Warning

[RobWarningParticipant]

some additional information I just noticed:
– if I open the console window after the page has loaded. I can set and clear filters to my grid without problems.
– I open and close some grid details, still nothing shows in the console window.
– but when I set or clear a filter now. the filter seems to work fine but in my console window I get the fault message:
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.
And the grid details stop working.

[HristoParticipant]

Hello RobWarning,

The error message shows you what need to do.
It happens when some operation as sorting or filtering is not finished yet and at the same time trying to do something with the jqxGrid.
I think this is not full source code and I would like to ask you to try to provide us with one simplified example in https://www.jseditor.io/ or https://fiddle.jshell.net/
Meanwhile, please, take a look at this approach below which demonstrate one possible solution:

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);

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[JenkeNgParticipant]

I also encountered this problem, but I couldn’t find a solution. One problem I found is that when I set “async” to “false”, everything is normal, and when I set it to “true”, the above-mentioned error will be reported.

[HristoParticipant]

Hello JenkeNg,

Could you clarify your case?
Also, I would like to ask you did you try the suggestion above?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts