Удалите Фокус из AgGrid, если щелкнуть за пределами сетки - PullRequest
Новая
       7

Удалите Фокус из AgGrid, если щелкнуть за пределами сетки

0 голосов
/ 17 февраля 2020

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

const body = document.body;
body.addEventListener('mouseup', (e) => {
    const container = this.commonAgGrid.nativeElement;
    if (!container.contains(e.target)) {
        this.gridApi.clearFocusedCell();
    }
 });

Но это не работает, когда я использую компонент выбора матов в ag-grid. Пример - plunker

Пожалуйста, измените раскрывающееся значение, значение не изменится из-за этого.

1 Ответ

1 голос
/ 17 февраля 2020

Хорошо, вот что вам нужно понять:

  1. клики listener должны быть реализованы внутри вашего пользовательского компонента, потому что только с этим компонентом вы можете привязать слушателя для отслеживания кликов снаружи. событие
  2. listener должно быть реализовано внутри ngAfterViewInit метода cuz из @ViewChild жизненного цикла рендеринга
  3. @ViewChild требуется для получения element и его scope - для возможность отслеживания внешних кликов

Таким образом, вам необходимо ViewChild - привязать к вашему шаблону (внутри пользовательского компонента) 

@ViewChild('yourElementRef') public yourElementRef:ElementRef

Затем привязать это свойство yourElementRef к шаблон (тег (div, форма, что угодно) должен быть основан на HTML - не указание сторонних библиотек - ссылка может быть пропущена) 

template: `
    <mat-card>
    <form #yourElementRef class="container" tabindex="0" (keydown)="onKeyDown($event)">
    ...

снова, если вы поставите #yourElementRef в <mat-cad> - ссылка на собственный элемент будет пропущена

И последнее отслеживает себя 

ngAfterViewInit() {
    ...
    let body = document.body;
        body.addEventListener("mouseup", (e) => {
        let container = this.yourElementRef.nativeElement;
        if (!container.contains(e.target)){   
            this.params.api.clearFocusedCell();
        }
    })
}

DEMO

PS: это решение для selection сброса * 10 48 * ONLY , точно в этом примере - значения (модели) не обновляются должным образом (потому что это просто неправильно реализовано)

...