Сетка Ag: автоматическое изменение размера столбцов во время выполнения не работает в Chrome / IE 11 - PullRequest
Новая
       28

Сетка Ag: автоматическое изменение размера столбцов во время выполнения не работает в Chrome / IE 11

1 голос
/ 07 ноября 2019

У меня есть сетка Ag в угловой структуре, в которой после начальной загрузки данных я динамически применяю группировку (группирование строк), после чего я пытаюсь развернуть все группы, и как только сетка сгруппирована и строки расширены, я хочу автоматически изменить размерстолбцы, чтобы избежать отображения эллипсов (значение ...).

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

Автоматически изменять размер столбца, используя hack setTimeout, проверить файл app.component.ts

Я не хочу использовать этот хакерский подход, потому что я не знаю точное количество строк (данных), поэтому в некоторых случаях setTimeout не будет работать.

Кроме того, он очень медленный в IE11 и там может потребоваться большезначение тайм-аута. 

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      )
      .subscribe(data => {
        data[0].athlete = 'very very very long text very very very long text very very very long text very very very long text'
        this.rowData = data;
         this.gridColumnApi.addRowGroupColumns(["sport", "year", "country", "athlete"]);

        // This will not work
        // this.setDefaultExpanded();

        // This will work (hacky solution)
        setTimeout(() => {
          this.setDefaultExpanded();
        }, 1000);

        // This will not work
        // this.autoSizeAll();

        // This will work (hacky solution) 
        setTimeout(() => {
           this.autoSizeAll();
        }, 2000);

      });
  }



 setDefaultExpanded() {
    this.gridApi.forEachNode(node => {
        if (node.group) {
            node.expanded = true;
          }
        });
        this.gridApi.onGroupExpandedOrCollapsed();
  }


  autoSizeAll() {
      const allColumnIds = [];
      if (this.gridColumnApi) {
        this.gridColumnApi.getAllDisplayedColumns().forEach(column => {
          allColumnIds.push(column.colId);
        });
        this.gridColumnApi.autoSizeColumns(allColumnIds);
      }

  }

Любая помощь приветствуется !!!

Спасибо

1 Ответ

0 голосов
/ 07 ноября 2019

Пожалуйста, используйте onFirstDataRendered событие. Это сработает после загрузки данных в сетку. 

var gridOptions = {
    defaultColDef: {
        resizable: true
    },
    columnDefs: columnDefs,
    rowData: null,
    onFirstDataRendered: onFirstDataRendered
};

function onFirstDataRendered(params) {
    const allColumnIds = [];
  if (this.gridColumnApi) {
    this.gridColumnApi.getAllDisplayedColumns().forEach(column => {
      allColumnIds.push(column.colId);
    });
    this.gridColumnApi.autoSizeColumns(allColumnIds);
  }
}
...