[Elements] Grid column actions indicators are not updated when column state changes

[viktorkombov]

Description

In the Ignite UI Web Components examples, some Grid column actions indicators are not updated when the underlying column state changes.

This can be reproduced with both Advanced Filtering and Column Pinning.

For Advanced Filtering, after applying a filter through the Advanced Filtering dialog, the toolbar button does not indicate that a filter is active. The indicator is updated only after opening the Advanced Filtering dialog again.

A similar issue occurs with Column Pinning. If a column is initially hidden, then pinned through the Column Pinning action and later made visible through Column Hiding, the number of pinned columns displayed by the Column Pinning toolbar button is not updated. It is refreshed only after opening the Column Pinning dropdown again.

The same scenarios can also be reproduced in the Elements demos in igniteui-angular. In that case, the UI state changes also trigger ExpressionChangedAfterItHasBeenCheckedError errors.

Framework

Angular Elements

Angular Version

22.1.x

Ignite UI for Angular Version

22.2.x

Component / Area

Grid

Browser

Chrome

Operating System

Windows

Command Not Working

Steps to Reproduce

The issue can be reproduced either in the igniteui-wc-examples repository or in the Angular Elements demos from igniteui-angular.

Option 1: igniteui-wc-examples

Run the Grid toolbar samples and use the first Grid containing the relevant column actions.

Advanced Filtering

1. Open Advanced Filtering from the Grid toolbar.
2. Apply a filter and close the dialog.
3. Observe the Advanced Filtering toolbar button.
4. Open the Advanced Filtering dialog again.

Column Pinning

1. Hide a column using Column Hiding.
2. Open Column Pinning and pin the hidden column.
3. Close the Column Pinning dropdown.
4. Open Column Hiding and make the pinned column visible again.
5. Observe the pinned-column count in the Column Pinning toolbar button.
6. Open the Column Pinning dropdown again.

Option 2: igniteui-angular Elements demo

1. Run the Elements demos:

npm run start:elements

2. Open the Grid toolbar demo and use the first Grid.
3. Repeat the same Advanced Filtering and Column Pinning scenarios described above.
4. Keep the browser DevTools Console open while performing the actions.

Actual Result

In the Web Components examples:

• The Advanced Filtering button does not immediately indicate that a filter has been applied.
• The Column Pinning button does not immediately update the number of pinned columns after a hidden pinned column is made visible.
• In both cases, the indicator is refreshed only after reopening the corresponding action UI.

In the Elements demos from igniteui-angular, the same interactions also result in ExpressionChangedAfterItHasBeenCheckedError errors in the corresponding Angular components, including:

ExpressionChangedAfterItHasBeenCheckedError
Expression location: _IgxColumnActionsComponent component.

ExpressionChangedAfterItHasBeenCheckedError
Expression location: _IgxGridToolbarPinningComponent component.

ExpressionChangedAfterItHasBeenCheckedError
Expression location: _IgxGridToolbarAdvancedFilteringComponent component.

Expected Result

Grid toolbar column action indicators should react immediately when the corresponding grid state changes.

• Applying or removing an advanced filter should immediately update the Advanced Filtering indicator.
• Pinning, unpinning, hiding, or showing columns should immediately update the Column Pinning count.
• The Elements demos should not produce ExpressionChangedAfterItHasBeenCheckedError errors for these interactions.

Reproduction URL

No response

Attachments