Devextreme-angular: DxDataGrid Column Chooser

[Angelminster]

Hi,

In ngOnDestroy ColumnChooser should be destroyed too. If it is visible when you destroy an element (changing a route) the column chooser overlay still displaying.

Regards.

[dxvladislavvolkov]

Hello

Could you please provide a code example to help us reproduce this behavior?

[Angelminster]

Hello,

Sorry, i can't provide a code example at this moment. It's easy to reproduce i think:

Route 1 -> With dxDataGrid
Route 2 -> Another Route

Step1 -> Go to Route 1 and Open column chooser select popup. Dont close it, keep it open.
Step2 -> Go to Route 2. (The column chooser select popup does not hide.)

Expected result -> When you change the route the column chooser does not have a grid instance so it should hide itself.

[dxvladislavvolkov]

Hello!
Default popups are rendered in the body.
You need to set columnChooser.container option as follows:

[columnChooser] = "{
    enabled: true,
    container: '.dx-datagrid'
}"

[Angelminster]

Hi,

This option doesn't work as expected. If there isn't enough space in the grid, the panel does not render properly. The option not exists in dx.all.d.ts.

I think that it should be something that the component do. ngOnDestroy -> Destroy all my popups.

Thank You

[dxvladislavvolkov]

You can try to use the hideColumnChooser() method.

@ViewChild(DxDataGrid) dataGrid:DxDataGrid

ngOnDestroy() {
    this.dataGrid.instance.hideColumnChooser();
}

[Angelminster]

Thank you.

It is just a sugestion that the component should do this automatically.