Значки рендеринга ячеек Ag Grid не нажимаются. Реагировать.

У меня есть простой рендерер ячеек, который возвращает значок:

import React from 'react'
function ActionRenderer(params) {
  const editRedirect = (e) =>{
    console.log("Clicked");
  }
  return (
    <div>
      <span class="actionIcons editIcon">
        <i onClick={editRedirect} class="fas fa-edit" href="/details"></i>
      </span>
    </div>
  )
}
export default ActionRenderer

Когда я создаю свой компонент AgGrid, я также определил событие onRowClicked.

 <AgGridReact
        columnDefs={columnDefs}
        defaultColDef={{ width: 160 }}
        rowData={rowData}
        frameworkComponents={frameworkComponents}
        onRowClicked={rowClicked}
      ></AgGridReact>

В результате на мои значки нельзя нажимать, а на строку под ними -. Как сделать так, чтобы значки можно было нажимать, но если щелкнуть строку за пределами значков, тогда функция rowClicked запускается? Другими словами, щелчок по строке перекрывает мой щелчок по значку, и я должен был это изменить.

const frameworkComponents = {
    //  buttonRenderer: ButtonRenderer,
    progressBarRenderer: ProgressBarRenderer,
    actionRenderer: ActionRenderer,
  }

  const columnDefs = [
    {
      headerName: 'Full Name',
      field: 'name',
      unSortIcon: true,
      sortable: true,
      filter: true,
      lockPosition: true,
    },
    {
      headerName: 'Actions',
      field: 'actions',
      width: 140,
      lockPosition: true,
      cellRenderer: 'actionRenderer',
    },
  ]

reactjs icons onclick ag-grid-react ag-grid
person shurup    schedule 29.04.2020    source источник
comment
вы можете разместить свой columnDef? похоже, что вы не расширяете Component. проверьте пример здесь - ag -grid.com/javascript-grid-cell-rendering-components/   -  person Pratik Bhat    schedule 29.04.2020
comment
@PratikBhat Готово! Спасибо, что заглянули. Я думаю, что вам не нужно расширять Component, когда вы определяете его таким образом, как я (не как класс, а как функцию). Хотя я могу ошибаться.   -  person shurup    schedule 29.04.2020
comment
проверьте мой ответ здесь stackoverflow.com/questions/53327329/. Хоть и для угловых, суть та же. Если вы хотите, чтобы значок был интерактивным, это должен быть специальный компонент.   -  person Pratik Bhat    schedule 29.04.2020
comment
@PratikBhat В своем ответе вы говорите использовать cellRenderer. По сути, это то, что я делаю. Средство визуализации ячеек возвращает простой значок. Я не совсем понимаю, чем мой текущий код отличается от того, что вы предлагаете.   -  person shurup    schedule 29.04.2020
comment
Вы пропустили мелкие детали. Однако, если вы хотите, чтобы ваш значок реагировал на события или выполнял действия, вам следует изучить возможность реализации компонента Cell Renderer ag-grid.com/javascript-grid-cell-rendering-components/   -  person Pratik Bhat    schedule 29.04.2020
comment
@PratikBhat Моя проблема не в том, как я использую средство визуализации ячеек (которое я уже использую, как видно из моего columnDefs). Если я заменю значок на <button></button>, все будет работать нормально. Я не знаю, что делать дальше. Спасибо за попытку помочь!   -  person shurup    schedule 29.04.2020
comment
вы вместо этого пробовали onClick на элементе span?   -  person Pratik Bhat    schedule 29.04.2020
comment
@PratikBhat у меня есть, и это не работает. Работает только на кнопке. Не уверены, почему срабатывает строка под событием значка, а не верхний элемент.   -  person shurup    schedule 29.04.2020

Ответы (2)


arrow_upward
0
arrow_downward

Для меня работает следующее:

 columnDefs=[
    {
          headerName: 'Actions',
          field: 'ACTION',
          sortable: true,
          filter: true,
          resizable: true,
          cellRenderer: function (params) {
            return '<span title="Edit" ><i class="fas fa-pencil-alt edit" data-action-type="edit"></i> <span title="Delete" ><i class="fas fa-trash delete" data-action-type="delete"></i></span>';
          },
    ]


    <ag-grid-angular
                  [pagination]="true"
                  [paginationPageSize]="15"
                  [rowData]="rowDataBlackList"
                  [columnDefs]="columnBlackList"
                  class="ag-theme-material"
                  style="height: 500px"
                  (cellClicked)="onCellClicked($event)"
                  #agGrid
                >
     </ag-grid-angular>

При щелчке по ячейке выполните следующие действия:

    onCellClicked($event) {
     if($event.column.getColId()=='ACTION')
      {
        let actionType = $event.event.target.getAttribute("data-action-type");
        switch(actionType) {
          case "edit":  
             {  
               console.log("Edit action clicked");  
               break;
             }  
          case "delete":  
             {  
               console.log("Delete action clicked"); 
               break; 
             }  
         }
   
      }
     }
person Nivil Boban    schedule 09.03.2021

arrow_upward
0
arrow_downward

Попробуйте вместо этого использовать тег кнопки для диапазона и значка внутри кнопки, вы можете удалить фон с помощью css.

person Koustubh Kittur    schedule 15.03.2021