Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
IgGrid - ComboBox filter reset after dataSource update
posted

Hi,

We are using an igGrid with a comboBox to filter one column.
We also have a searchBar outside igGrid to fetch and refreh the dataSource from a SQL query.
We fetch the data in Ajax and then update the igGrid("option", "dataSource", data) in jquery

Here is the problem : after checking a few comboxBox, we noticed that changing the dataSource will reset the comboBox and keep only the last one.
Here is a fiddle to test it, forked from your Excel-style Filtering fiddle : jsfiddle.net/.../

Step to reproduce :
- Select 2 or 3 checkboxes from Category column

- click the refresh button at the bottom

The igGrid will refresh the dataSource but the combobox will unchek except the last one.

As you can see the dataSource.settings.filtering.expressions contains multiple objects for the same FieldName and i assume the igGridFiltering('filter') function look up only for the last object instead of adding them.

I try to concatenate them into one object with multiple Expression but it doesnt works either.

Parents
  • 520
    Verified Answer
    Offline posted

    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

Reply Children
No Data