(ag-grid) Анимация динамически добавляемых столбцов

Как мы видим на https://www.ag-grid.com/javascript-grid-column-menu/, когда пользователь устанавливает / снимает отметку с столбца в меню, сетка анимирует другие столбцы.

Я представляю некоторые столбцы динамически, используя columnDefs:

this.columnDefs = [
  { headerName: 'Name', field: 'name', width: 200 },
  { headerName: 'S01F01', hide: this.solver !== 'solver1', field: 'age', width: 90, suppressToolPanel: true },
  ...
];

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

Есть ли способ отображать эти столбцы одним нажатием кнопки и одновременно запускать анимацию?


ag-grid ag-grid-ng2
person maiona    schedule 23.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если у вас нет этого свойства сетки suppressColumnMoveAnimation=true, по умолчанию для столбцов должна быть включена анимация.
Согласно документы

По умолчанию анимация столбцов включена, по умолчанию анимация строк отключена. Это сделано для того, чтобы сохранить наиболее распространенную конфигурацию по умолчанию.

person Pratik Bhat    schedule 24.10.2018
comment
В этом есть смысл, но в моем случае этого не происходит. Вы можете увидеть конкретный код, который я использую для обновления столбцов ниже: toggleChange(event) { const toggle = event.source; if (toggle) { const groupbutton = toggle.buttonToggleGroup; if (event.value.some(item => item === toggle.value)) { groupbutton.value = [toggle.value]; } } this.solver = toggle ? toggle.value : ''; this.setColumnDefs(); } setColumnDefs = () => { this.columnDefs = [ { headerName: 'Name', field: 'name', width: 200 }, ... ]} - person maiona; 25.10.2018