Devexpress ColumnChooser отслеживает выбранный столбец при навигации в Angular

Question

У меня есть сценарий, в котором пользователь может скрыть / показать столбцы с помощью средства выбора столбцов, уйти, а затем, когда он / она вернется на страницу с сеткой, столбцы, которые были скрыты в точке навигации, все еще скрыты.

Я подумал о сервисе, который для каждого столбца устанавливает видимость этого столбца. Моя проблема в том, что я не могу определить, какой столбец был скрыт, когда пользователь устанавливает флажок в окне выбора столбца.

Просто чтобы привести пример. У меня есть таблица с 3 столбцами: Id, FirstName, LastName. В таблице есть columnChooser, настроенный в режиме «выбор». Когда пользователь нажимает на флажок идентификатора, мне нужно обнаружить это «событие проверки» и прочитать, какой флажок активировал его и с каким столбцом оно было связано. В данном случае что-то вроде «Идентификатор столбца вызвал событие».

Есть ли способ этого достичь? Какие-нибудь советы или решения?

Answer 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, а не из вашего сохраненного состояния.