Set a delay before remote data load on filter selection

[jplevene]

On my filter bar when it is "range" (like in the image attached), I want to set a slight delay to give the user time to select another option before the grid refreshes remotely, like 250ms.  How do I do this?

Code: [Select]

{
crules: [{condition:"range", value:[]}],
style:"text-align:"+dir,
selectGridObj: function(ui) {
// Change the label render
ui.obj.colModel[0].renderLabel = "Name" };
ui.obj.colModel[0].sortable = false;
},
options: [{"FIELD":"opt1", "NAME":"Option 1"}, {"FIELD":"opt2", "NAME":"Option 2"}, ...],
gridOptions: {
stripeRows: false, // No stripey rows
numberCell: {show: false}, // Hide the number column
filterModel: {header: false},// Hide search box in the dropdown
focusModel: { focusable: false, onTab:""}, // Prevent the focus box
selectionModel: {type:null, column:false} // Disable row selection
}
}

[paramvir]

To implement a delay for your range filter and prevent the grid from refreshing instantly, you can intercept the check event within the gridOptions and wrap the filter logic in a debounce timer.

Code: [Select]

check: function(evt, ui) {
    var filterGrid = this;
    // Reference the main grid (adjust selector as needed)
    var mainGrid = $("#grid_filter").pqGrid('instance');
    // Clear existing timer to debounce
    clearTimeout(mainGrid.rangeTimer);
    mainGrid.rangeTimer = setTimeout(function() {

        var dataIndx = ui.dataIndx;
        // Get all checked values from the dropdown grid
        var checkedRows = filterGrid.Checkbox( dataIndx ).getCheckedNodes()
        var values = checkedRows.map(function(rd) {
            return rd[ dataIndx ];
        });
        // Manually trigger the remote filter on the main grid
        mainGrid.filter({                           
            rules: [{
                dataIndx,
                condition: 'range',
                value: values
            }]
        });
mainGrid.refreshHeaderFilter({dataIndx});

    }, 1000);
}


[jplevene]

Thanks, however mainGrid.refreshHeaderFilter({dataIndx}); causes the dropdown to hide instead of staying visible like it currently does.

[paramvir]

you can also add a complete event listener in the gridOptions to refresh the filter header only when the popup window is hidden / destroyed.

Code: [Select]

complete() {
    let interval = setInterval(() => {
        var filterGridElement = this.widget()[0];

        if (!filterGridElement || filterGridElement.offsetHeight == 0) {
            //debugger;
var mainGrid = $("#grid_filter").pqGrid('instance');
            clearInterval(interval);
            mainGrid && mainGrid.refreshHeaderFilter({
                dataIndx: 'ShipCountry' //replace with your dataIndx.
            });
        }
    }, 200);
},