AG-Grid (Enterprise) Слушатель меню столбцов - PullRequest
Новая
       20

AG-Grid (Enterprise) Слушатель меню столбцов

3 голосов
/ 24 июня 2019

Есть ли способ установить слушателя в меню столбцов, чтобы при открытии и закрытии меню происходило событие?

Описание функции: https://www.ag -grid.com / javascript-grid-column-menu /

Я уже искал в официальной документации, но не нашел ответа.

Фон: Я хочу сохранить состояние таблицы с отображаемыми столбцами, сортировкой, положением столбцов, фильтром и т. Д. В базе данных. Конечно, я мог бы использовать слушателей как onFilterChanged, onDisplayedColumnsChanged или onSortChanged. Проблема в том, что он будет запускаться каждый раз, когда что-то меняется, и поэтому выдается много нежелательных API-вызовов.

Вот почему я хочу выполнить один вызов при закрытом меню столбца.

Обновление

Как сказал Викас в своем Ответе , официального способа сделать это не существует. я пытался избежать решения с postProcessPopup и пытался найти уборщика Решение моей проблемы - сохранить состояние таблицы.

Для обходного пути с обратным вызовом, когда ColumnMenu закрыто Viqas Ответ более уместно.

Обратите внимание, что это не обходной путь для самого обратного вызова - это просто (возможное) решение для сохранения состояния таблицы и выполнения ОДНОГО вызова API

Я использовал функцию Angular ngOnDestory(). 

ngOnDestory(): void {
  const tableState = {
    columnState: this.gridOptions.columnApi.getColumnState(),
    columnGroupState: this.gridOptions.columnApi.getColumnGroupState(),
    sortState: this.gridOptions.api.getSortModel(),
    filterState: this.gridOptions.api.getFilterModel(),
    displayedColumns: this.gridOptions.columnApi.getAllDisplayedColumns()
  };

  // submit it to API
}

1 Ответ

2 голосов
/ 25 июня 2019

Вы правы, нет официального способа сделать это.Обходным путем может быть обнаружение, когда меню закрывается самостоятельно.Ag-grid предоставляет вам обратный вызов postProcessPopup (см. здесь ), который предоставляет параметр типа PostProcessPopupParams;он содержит всплывающий элемент меню столбца, который отображается, чтобы вы могли проверить, когда меню больше не отображается.

Создание переменной для хранения элемента columnMenu в: 

columnMenu: any = null;

Сохранение columnMenu в этой переменной с использованием события ag-grid postProcessPopup: 

<ag-grid-angular [postProcessPopup]="postProcessPopup"></ag-grid-angular>

this.postProcessPopup = function(params) {
  this.columnMenu = params.ePopup;
}.bind(this);

Затем создайте прослушиватель, чтобы определить, когда меню столбцов больше не видно в домене: 

this.renderer.listen('window', 'click',(e:Event)=>{
      console.log(this.columnMenu)
        const columnMenuIsInDom = document.body.contains(this.columnMenu);

        if (!columnMenuIsInDom && this.columnMenu != null)
        {
          this.columnMenu = null;
        }
    });

Это немного хакерский и обходной путь, но я не могу придумать лучшего способа на данный момент.

Взгляните на этот Плункер для иллюстрации.

...