Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
vpoharkar opened this issue May 7, 2024 · 11 comments · Fixed by #14328

Comments

@vpoharkar
Copy link

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"
image

Result:
image

@hanastasov
Copy link
Contributor

hanastasov commented May 30, 2024

@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:

image

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

@hanastasov hanastasov added status: not-a-bug and removed 🐛 bug Any issue that describes a bug 🆕 status: new labels May 30, 2024
@kdinev
Copy link
Member

kdinev commented May 30, 2024

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

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

@hanastasov
Copy link
Contributor

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

image

@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
Copy link
Member

damyanpetev commented May 30, 2024

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:
image
Certainly not clear what is active. For comparison the same scenario in Excel:
image
Also a secondary open of the Contains option the dialog doesn't reflect the active filter:
image
Again against the same state in Excel:
image

@kdinev
Copy link
Member

kdinev commented May 31, 2024

@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
Copy link

@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)
Screenshot 2024-06-04 at 13 35 23

Also this dialog should reflect the active filter

Screenshot 2024-06-04 at 13 33 18

@sdimchevski
Copy link

@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

Screenshot 2024-06-05 at 16 16 15

@kdinev
Copy link
Member

kdinev commented Jun 6, 2024

@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) Screenshot 2024-06-04 at 13 35 23

Also this dialog should reflect the active filter

Screenshot 2024-06-04 at 13 33 18

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
Copy link

@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

Screenshot 2024-06-06 at 14 16 14

@deyvidnenchev
Copy link
Contributor

deyvidnenchev commented Jun 12, 2024

@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

Screenshot 2024-06-06 at 14 16 14

@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.

@hanastasov
Copy link
Contributor

@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
Screenshot 2024-06-06 at 14 16 14

@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:

image

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

hanastasov added a commit that referenced this issue Jul 2, 2024
* feat(ESF): show the current filtering conditions in esf dialog

* fix(ESF): return correctly if filtering is applied on a column #14188

* feat(esf): selected style on filter condition & number of filter operands #14188

* feat(*): show already applied filter operands in filter dialog #14188

* feat(*): no emitted event on dd when change selected through API #14188

* chore(*): fix linting error

* chore(*): select drop down item without throwing selectionChanging event

* feat(*): set bttn label from unique columns inst of num of filtering operands

* chore(*): recalc the number of filtered columns only when filtering is changed

* chore(*): change fit to it for field names extraction test

* chore(*): address the review comments and remove the redundant code

* chore(*): fix tests due to method signature change

* Update projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

Co-authored-by: Damyan Petev <damyanpetev@users.noreply.github.com>

* Update projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts

Co-authored-by: Damyan Petev <damyanpetev@users.noreply.github.com>

* Update projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts

Co-authored-by: Damyan Petev <damyanpetev@users.noreply.github.com>

* chore(*): return the order of params for selectItem method

* Update projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts

Co-authored-by: Damyan Petev <damyanpetev@users.noreply.github.com>

* Update projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts

Co-authored-by: Damyan Petev <damyanpetev@users.noreply.github.com>

* Update projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

Co-authored-by: Damyan Petev <damyanpetev@users.noreply.github.com>

* chore(*): add some ui test that verify number of filtered columns

* chore(*): use set instead of array to remove repeating records

* chore(*): add test for selected state of filtered operand applied

* chore(*): add more test to verify previous value is shown in esf dialog

* chore(*): remove unnecessary test

* chore(*): fix failing test

* Update projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

Co-authored-by: Hristo <hanastasov@infragistics.com>

* Update projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

Co-authored-by: Hristo <hanastasov@infragistics.com>

* chore(*): address the styling changes regarding avd filter button border

* chore(*): fix test expect

* fix(*): optimize the logic around esf filtering show previous expr #14188

* test(*): add more test when esf dialog is open from other filterOperand #14188

---------

Co-authored-by: Hristo <hanastasov@infragistics.com>
Co-authored-by: Deyvid Nenchev <DNenchev@infragistics.com>
Co-authored-by: Damyan Petev <damyanpetev@users.noreply.github.com>
hanastasov added a commit that referenced this issue Jul 2, 2024
…#14437)

* feat(ESF): show the current filtering conditions in esf dialog

* fix(ESF): return correctly if filtering is applied on a column #14188

* feat(esf): selected style on filter condition & number of filter operands #14188

* feat(*): show already applied filter operands in filter dialog #14188

* feat(*): no emitted event on dd when change selected through API #14188

* chore(*): fix linting error

* chore(*): select drop down item without throwing selectionChanging event

* feat(*): set bttn label from unique columns inst of num of filtering operands

* chore(*): recalc the number of filtered columns only when filtering is changed

* chore(*): address the review comments and remove the redundant code

* chore(*): fix tests due to method signature change

* chore(dropDown): return back the order of params for selectItem method

* chore(*): remove unnecessary param from the tests

* chore(*): address all the review comments

* chore(*): add some ui test that verify number of filtered columns

* chore(*): add test for selected state of filtered operand applied

* chore(*): add more test to verify previous value is shown in esf dialog

* chore(*): remove debugger from tests

* chore(*): remove unnecessary test

* chore(*): fix failing test

* chore(*): set the name of the test properly

* chore(*): address the styling changes regarding avd filter button border

* fix(*): optimize the logic around esf filtering show previous expr #14188

* test(*): add more test when esf dialog is open from other filterOperand #14188

---------

Co-authored-by: Deyvid Nenchev <DNenchev@infragistics.com>
Co-authored-by: Hristo <hanastasov@infragistics.com>
hanastasov added a commit that referenced this issue Jul 2, 2024
….x (#14436)

* feat(ESF): show the current filtering conditions in esf dialog

* fix(ESF): return correctly if filtering is applied on a column #14188

* feat(esf): selected style on filter condition & number of filter operands #14188

* feat(*): show already applied filter operands in filter dialog #14188

* feat(*): no emitted event on dd when change selected through API #14188

* chore(*): fix linting error

* chore(*): select drop down item without throwing selectionChanging event

* feat(*): set bttn label from unique columns inst of num of filtering operands

* chore(*): recalc the number of filtered columns only when filtering is changed

* chore(*): address the review comments and remove the redundant code

* chore(*): fix tests due to method signature change

* chore(dropDown): return back the order of params for selectItem method

* chore(*): remove unnecessary param from the tests

* chore(*): address all the review comments

* chore(*): add some ui test that verify number of filtered columns

* chore(*): add test for selected state of filtered operand applied

* chore(*): add more test to verify previous value is shown in esf dialog

* chore(*): remove unnecessary test

* chore(*): fix failing test

* chore(*): remove leftover debugger

* chore(*): set the name of the test properly

* chore(*): address the styling changes regarding avd filter button border

* chore(*): fix test expect

* fix(*): optimize the logic around esf filtering show previous expr #14188

* test(*): add more test when esf dialog is open from other filterOperand #14188

---------

Co-authored-by: Deyvid Nenchev <DNenchev@infragistics.com>
Co-authored-by: Hristo <hanastasov@infragistics.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants