Отображение интерактивной кнопки внутри визуализированной ячейки - PullRequest
Новая
       4

Отображение интерактивной кнопки внутри визуализированной ячейки

0 голосов
/ 05 апреля 2019

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

Как включить рендеринг Angular в ag-grid?

Это связано с моей проблемой всплывающих окон, которую я поднял, но имеюне имел успеха.

Ранее я использовал: 

  angularCompileRows: true,

в параметрах сетки, но сейчас это не работает. 

columnDefs = [
    { headerName: 'ID', field: 'id' },
    { headerName: 'Name', field: 'customer.name' },
    { headerName: 'Email', field: 'customer.email' },
    { headerName: 'Actions', field: '', cellRenderer: this.actionCellRenderer }
  ];

.....


  actionCellRenderer(cell: any) {
    const view =
      '<span class="grid-action" (click)="openModal(content)"><a><i class="fa fa-search" style="color:white"></i></a></span>';
    const edit = '<span class="grid-action"><a (click)="clickbait()"><i class="fa fa-pencil-alt" style="color:white"></i></a></span>';
    const del = '<span class="grid-action"><a (click)="open(content)"><i class="fas fa-trash-alt"></i></a></span>';

    const start = '<div class="">';
    const end = '</div>';

    let result = start + view + edit + del + end;

    if (cell.value === null) {
      // result = start + cross + end;
    }
    return result;
  }

openModal(content: any) {
    console.log('openModal hit');
    this.modalService.open(AddEditCustomerComponent).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

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

PLUNKER: https://plnkr.co/edit/cUQaAGStLn0Hs3SS6acF

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

См .: HTML DOM метод createElement ()

См .: HTML DOM метод addEventListener ()

См .: Что означает JavaScript Void (0)? 

private actionCellRenderer(cell: any) {
    const eDiv = document.createElement('div');
    eDiv.innerHTML = '<span class="grid-action pointer"  href="javascript:void(0)"><a><i class="fa fa-search" style="color:black"></i></a></span>';
    eDiv.addEventListener('click', () => {
        alert('Your button is clickable');
    });
    return eDiv;
    }

    private createColumnDefs() {
        return [{
                headerName: "Full Name",
                field: "full_name"
            },
            {
                headerName: "actions",
                field: "full_name",
                cellRenderer: this.actionCellRenderer
            }
        ];
    }

Попробуйте использовать одно и то же для разных iocns в качестве кнопки.

0 голосов
/ 10 апреля 2019

Я тоже не смог заставить его работать, но в качестве обходного пути вы можете попробовать следующее

Получить событие щелчка строки 

<ag-grid-angular style="width: 100%; height: 450px;" class="ag-theme-material"
                 [gridOptions]="gridOptions" (rowClicked)="onClick($event)">
</ag-grid-angular>

и из класса целевого события выясните, какая кнопка была нажата 

public onClick(e) {
    let button = e.event.target.getAttribute("class");
    console.log(button)
    switch(button) {
        case "fa fa-search":
            alert("clicked on search")
            return;
        case "fa fa-pencil-alt":
            alert("clicked on edit")
            return;
        case "fas fa-trash-alt":
            alert("clicked on delete")
            return;
    }
}

Демо

...