действие элемента agRrid cellRenderer не работает

Question

Я пытаюсь заставить мою кнопку удаления работать в моей таблице Ag-Grid. Но когда я нажимаю на кнопку удаления, событие не запускается.

Вот мои коды:

columnDefs = [
  {headerName: 'Language Name', field: 'language_name' },
  {headerName: 'Options', field: 'options', cellRenderer: this.optionsRendererFunc, autoHeight: true, width: 100}
];

deleteBtnClicked(id) {
  console.log(id);
}

optionsRendererFunc(params) {
   return '<button class="btn btn-sm btn-danger" (click)="deleteBtnClicked(params.id)"><i class="fa fa-trash"></i></button>';
}

Что я здесь не так делаю?

Заранее спасибо

Answer 1

Попробуйте это:

optionsRendererFunc(params) {
    var button= document.createElement('button');
    console.log(params);
    button.innerHTML = 'Del';
    button.addEventListener('click', () => {
       // Write your code here
    });
    return button;
}

Также обновите cellRenderer: this.optionsRendererFunc до cellRenderer: this.optionsRendererFunc.bind (this)

Answer 2

Попробуйте этот код:

Определите GridOptions, как это,

columnDefs: [
        {headerName: 'Language Name', field: 'language_name' },
        {headerName: 'Options'
         template: `<button data-action-type="delete" type="button" >Delete</button>`
        }
    ]

И для RowClickEvent Используйте следующий код:

     onGridRowClicked(e: any) {
        if (e.event.target !== undefined) {
        let actionType = e.event.target.getAttribute("data-action-type");
        switch (actionType) {
            case "edit":
                {
                   // code to Edit
                }
            case "delete":
                {
                  // code to Delete
                }
        }
    }
}

при нажатии кнопки «Редактировать / Удалить» e.event.target.getAttribute («data-action-type») в случае переключателя будет перенаправлять на соответствующую часть кода.

Answer 3

Так не работает. Строка, которую вы возвращаете из своей функции, не скомпилирована с Angular. ag-grid просто отображает это в сетке как средство визуализации ячеек.

Вы можете обработать это событие rowClicked, как показано ниже.

// 1. Update your grid markup with row click event handler
(rowClicked)="_onRowClicked($event)"


// 2.handle the event in the component

_onRowClicked(e: RowClickedEvent) {
  if (e.event.srcElement !== undefined && e.event.srcElement.getAttribute('class') &&
         e.event.srcElement.getAttribute('class').indexOf('btn-danger') > -1) {

    const id = e.data.id;
    this.deleteBtnClicked(id);
  }
}