ag-grid не будет прокручиваться после рендеринга - PullRequest
Новая
       14

ag-grid не будет прокручиваться после рендеринга

0 голосов
/ 16 января 2019

решено: оказалось, что я импортировал неправильный CSS, который вызывает довольно серьезные проблемы, читайте ответ для более подробной информации

После внедрения ag-grid отображаются данные, но я не могу прокрутить их вообще.

Я сделал стек стлиц здесь: https://stackblitz.com/edit/angular-ytr1jj. Stabblitz работает как положено, но по какой-то причине в моем приложении не удается прокрутить точно такой же код. enter image description here

Я пробовал несколько способов рендеринга строк. Я попытался возиться с CSS, чтобы увидеть, есть ли что-то, что вызывает наложение в полосе прокрутки. bar is inaccesible

пока не повезло. Я думаю, что это может иметь какое-то отношение к "событиям указателя" ...

Обновление: я думаю, что виртуальная прокрутка требует, чтобы событие мыши было зафиксировано в строке, и по какой-то причине событие мыши не захватывается и поэтому не может прокручиваться 

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 600px;"
  class="ag-theme-balham"
  [rowData]="rowData" 
  [columnDefs]="columnDefs"
  >
</ag-grid-angular>


columnDefs = [
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' }
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 }
  ];

ОБНОВЛЕНИЕ 2: я могу получить полосу прокрутки для прокрутки, если я установлю pointer-events: none на .ag-center-cols-viewport. HTML, кажется, обновляется при прокрутке, а id строки-индекса строки и т. д. обновляется при прокрутке, однако в табличном представлении не отображаются текущие строки, вставляемые в ref = "ag-center-cols-viewport "(они появляются в html, но они не видны)

1 Ответ

0 голосов
/ 18 января 2019

ОТВЕТ

Ладно, это немного смешно, но тут дело доходит 

BAD
@import "~ag-grid/dist/styles/ag-grid.css";
@import "~ag-grid/dist/styles/ag-theme-material.css";

GOOD
@import 'ag-grid-community/dist/styles/ag-grid.css';
@import 'ag-grid-community/dist/styles/ag-theme-material.css';

После проверки моего package.json я снова заметил, что у меня есть 3 элемента ag-grid под зависимостями 

"ag-grid",
"ag-grid-angular",
"ag-grid-community"

CSS, который я импортировал, был из старой версии "ag-grid". После удаления "ag-grid" из package.json я импортировал соответствующий CSS и все сразу заработало ...

Окончательный добрый код 

// package.json
    "ag-grid-angular": "^20.0.0",
    "ag-grid-community": "^20.0.0",

// _vendor.scss where I import most my node_modules css

    // @import "~ag-grid/dist/styles/ag-grid.css";
    // @import "~ag-grid/dist/styles/ag-theme-material.css";
    @import 'ag-grid-community/dist/styles/ag-grid.css';
    @import 'ag-grid-community/dist/styles/ag-theme-material.css';
...