To make it even clearer, I’ve prepared a live example for you to review:
Sample Code on JSFiddle

To handle this in your application, you have two paths:

1. Use This Approach Globally:
   Implement the above solution or another global approach in your event handlers. This way, the logic is centralized and handles both UI and programmatic filtering without requiring changes to every AJAX call.
2. Modify AJAX Calls Individually:
   If global handling doesn’t suit your needs (e.g., if grids behave differently), you can integrate the earlier approach I provided directly into all AJAX calls where dataBind is used.

While the first option is simpler and more scalable, the second can be more precise for grids with unique configurations.

I hope this explanation and sample help clarify the approach and how it addresses your specific scenario. Let me know if you have any questions or need further assistance with implementation.

Regards,

Georgi Anastasov

Associate Software Developer

Infragistics

Hello,

Thank you for providing the detailed explanation and the fiddle to demonstrate the behavior. I noticed that when the igGrid’s dataSource is refreshed, the comboBox selections are not retained as expected.

To address this, I’ve created a solution that ensures all selected filter conditions persist, even after the grid refresh. Here’s what I’ve done:

1. Captured the Current Filters: After refreshing the grid, I retrieve the existing filters from dataSource.settings.filtering.expressions.
2. Combined Filters: Filters with the same fieldName are merged into a single filter object. The expr field is updated to hold an array of all selected conditions.
3. Reapplied the Filters: I use the consolidated filter object with igGridFiltering("filter") to ensure all selected conditions are applied to the grid.

Here’s the code I used:

// Retrieve the current filtering expressions from the igGrid's dataSource
let currentFilters = $("#productsGrid").data("igGrid").dataSource.settings.filtering.expressions;

// Initialize a map to combine filters with the same fieldName
let combinedFiltersMap = {};

currentFilters.forEach(filter => {
    // Check if there is already a combined filter for this fieldName
    if (!combinedFiltersMap[filter.fieldName]) {
        // Initialize a new combined filter object for this fieldName
        combinedFiltersMap[filter.fieldName] = {
            fieldName: filter.fieldName,
            expr: [],                   // Array to store multiple filter expressions
            cond: filter.cond,        
            logic: filter.logic || "OR"
        };
    }
    // Add the current filter's expression to the combined filter's array
    combinedFiltersMap[filter.fieldName].expr.push(filter.expr);
});

// Convert the map of combined filters into an array for use with the filtering method
let combinedFilters = Object.values(combinedFiltersMap);

// Apply the combined filters to the igGrid
$("#productsGrid").igGridFiltering("filter", combinedFilters);

This approach works by consolidating all selected filter conditions for a specific column into a single filter object. The expr property of the filter object becomes an array containing all selected conditions, and the logic property determines how these conditions are combined (e.g., using "OR").

The described scenario could be observed here:

I’ve also created a working example that you can test here: Sample Link.

This approach should resolve the described behavior and allow the grid to retain all selected filters after refreshing. Please let me know if you have any questions or if there’s anything else I can assist you with.

Regards,

Georgi Anastasov

Associate Software Developer

Infragistics