Devexpress ColumnChooser 在 Angular 中导航时跟踪所选列答案

【问题标题】：Devexpress ColumnChooser keep track of chosen column when navigating in AngularDevexpress ColumnChooser 在 Angular 中导航时跟踪所选列
【发布时间】：2021-01-14 08:18:19
【问题描述】：

我有一个场景，用户可以使用列选择器隐藏/显示列，导航离开，然后当他/她返回到带有网格的页面时，在导航点隐藏的列仍然隐藏.

我想到了一种服务，它为每一列设置该列的可见性。我的问题是当用户选中列选择器的框时，我无法检测到哪个列被隐藏。

只是举个例子。我有一个包含 3 列的表：Id、FirstName、LastName。该表在“选择”模式下配置了 columnChooser。当用户单击 Id 的复选框时，我需要检测该“检查事件”并读取触发它的复选框以及关联的列。在这种情况下，类似于“列 ID 触发了事件”。

有没有办法做到这一点？任何提示或解决方案？

【问题讨论】：

标签： angular datagrid devexpress column-chooser

【解决方案1】：

在 DxDataGrid 中，您不需要跟踪列，您可以跟踪整个网格。有StateStoring 的可能性。这是存储列可见性，如果有任何分组，排序，列宽度，来自的值搜索面板等。如果您使用默认保存和加载，您可以将其存储在浏览器本地存储中，或者您可以通过 customSave 和 customLoad 覆盖它，然后可以使用自己的服务并将其存储在例如数据库中.

HTML 的样子：

<dx-data-grid [dataSource]="friends" [allowColumnReordering]="true" 
      showRowLines="true" height="100%" [allowColumnResizing]="true" 
      [hoverStateEnabled]="false" [width]="'100%'"
      [(selectedRowKeys)]="selectedRowKeys">

      <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
      <dxo-state-storing [enabled]="true" type="custom" [customSave]="saveGridState" 
             [customLoad]="loadGridState">
      </dxo-state-storing>

      <dxi-column dataField="Id" dataType="number" [visible]="true">          
      </dxi-column>
      <dxi-column dataField="FirstName" dataType="string" [visible]="true">
      </dxi-column>
      <dxi-column dataField="LastName" dataType="string" [visible]="true">          
      </dxi-column>
      <dxi-column dataField="Age" dataType="number" [visible]="false">
      </dxi-column>
</dx-data-grid>

还有类似的：

export class FriendsGridsComponent
friends: any[] = [];
stateKey = 'friendsGrid';

constructor(pageConfigService: PageConfigService){}

 saveGridState(state) {
    console.log('saving grid state');
    this.pageConfigService.saveState(this.stateKey, state);
  }

  async loadGridState(): Promise<Object> {
    return this.pageConfigService.restoreState(this.stateKey);
    
    }
  }

PageConfigService 的实现由您来完成。在我的项目中很大，所以我不想在这里全部添加它，它也非常适合我的项目。保存状态非常简单，只需将其保存在某处即可。恢复有点复杂，因为你需要等到状态被加载回来。如果您不等待，它将从 HTML 中获得默认设置，而不是您保存的状态。

【讨论】：