Data grid filtering:Programatic filtering on data-grid does not reflect selection in filter dialog

[vpoharkar]

Description

When data filtered programatically with Data-grid-excel-style-filtering although the actual filtering operation performs as expected, however the filter representation/selection in filter dialog is absent

• igniteui-angular version: "^17.0.11"
• browser: Edge

Steps to reproduce

Here is stackblitz where the issue can be reproducible: stackblitz

1. Step 1: Click any link displayed in first column of the grid => 'ProductName'. This should filter the grid by whichever value the user clicked on.
2. Step 2: The filtering indicator(dots) for the productName column will be highlighted to indicate that this column has same filter present.
3. Step 3: Click on the indicated filter to check if the dialog reflects the applied filtered condition.

Result

Once the filter dialog is opened although the actual filtering operation performs as expected however there is no indication/selection in the filter dialog to indicate that a programatic filter was applied to the grid

Expected result

There should be some indication/selection in the filter dialog that displays that a filter was applied to this grid programatically.

Attachments

Expected"

Result:

[hanastasov]

@vpoharkar, Excel Style Filtering is meant to work with unique values, which determines the usage of strict comparison filter - equals, instead of non strict one (like contains). When you select an item in the ESF list, the actual operation performed is filtering by "equals", not "contains". See example:

Only the strict match record has passed the filtering and is displayed in the grid.

So, if you would like your custom filter to be "respected" by the Excel Style Filtering, use "equals" filter instead:

    public filterByval(val: string): void {
        this.grid2.filter(
        'CompanyName',
        val,
        IgxStringFilteringOperand.instance().condition('equals'),
        true
        );
    }

[kdinev]

@hanastasov I think that it would still be good if the text filter indicates there's a text filter applied:

I missed this part , thanks for pointing it out. this shall be addressed.

[hanastasov]

Story - user chooses a filtering condition, e.g. Contains, and applies some filter. User gets back to this UI:

@sdimchevski shall both the Text Filter item and the corresponding filter item in the dropdown menu be highlighted and if so, please provide the correct styles.

[damyanpetev]

The UI reflects some filtering is active, except it falls under the text filter category and the indication that's the case isn't really there. From the Result image: Certainly not clear what is active. For comparison the same scenario in Excel: Also a secondary open of the Contains option the dialog doesn't reflect the active filter: Again against the same state in Excel:

[kdinev]

@hanastasov I also want to add the story with advanced filtering not applying any visual states to the grid - neither in the advanced filtering prompt (button), nor in any of the columns that have been filtered.

[sdimchevski]

@hanastasov Why don't we do something like this and use the active state of the Text Filter list item and the selected state for the dropdown menu items (filter items)

Also this dialog should reflect the active filter

[sdimchevski]

@kdinev for the advanced filtering we can also color the icon in the grid column and add a number to the prompt (button) showing how many columns are being filtered

[kdinev]

@hanastasov Why don't we do something like this and use the active state of the Text Filter list item and the selected state for the dropdown menu items (filter items)

Also this dialog should reflect the active filter

Also, the prompt (list item) for the text filter should somehow indicate there's one applied before you click on it to see a condition highlighted.

[sdimchevski]

@kdinev for the Text Filter list item we can apply the same logic and add a number to show how many filter items are selected

[deyvidnenchev]

@kdinev for the Text Filter list item we can apply the same logic and add a number to show how many filter items are selected

@kdinev @hanastasov Currently on the development branch of this issue https://github.com/IgniteUI/igniteui-angular/pull/14328 if we add excel style filter through the dropdown and then add another one via the dropdown the first one is overridden. If we add two or more filters via Custom auto-filter dialog the custom filter option will be highlighted in the dropdown and the two or more added filters will be only visible in Custom auto-filter dialog when we click on Custom Filter in the dropdown. If we click on any other filter type in the dropdown the initial Custom auto-filter dialog will be shown. This behavior is not in accordance with the comment I quoted and is not mentioned anywhere in the specifications.

[hanastasov]

@kdinev for the Text Filter list item we can apply the same logic and add a number to show how many filter items are selected

@kdinev @hanastasov Currently on the development branch of this issue #14328 if we add excel style filter through the dropdown and then add another one via the dropdown the first one is overridden. If we add two or more filters via Custom auto-filter dialog the custom filter option will be highlighted in the dropdown and the two or more added filters will be only visible in Custom auto-filter dialog when we click on Custom Filter in the dropdown. If we click on any other filter type in the dropdown the initial Custom auto-filter dialog will be shown. This behavior is not in accordance with the comment I quoted and is not mentioned anywhere in the specifications.

I agree with Deyvid. The behavior he describes (it is like that from beginning) is that choosing A filter Condition from the fly out menu overrides the existing condition. This is the default in Excel, too.

If a user wants to add more than one filter conditon ,he is expected to do this in the dialog, where Add filter action is available:

Let's have the dialog height bigger of course, to see the whole button.