0
494
ViewsAbra el menú Opciones al hacer clic en el evento del icono en ag-grid en angular
Tengo un ícono dentro de la celda ag-grid y al hacer clic en el ícono estoy tratando de abrir una ventana emergente cerca del ícono que se editará y eliminará como se muestra a continuación:
Tengo el código de la siguiente manera:
<ag-grid-angular style="padding-top: 10px;" [rowData]="rowData" [columnDefs]="columnDefs" (gridReady)="onGridReady($event)" [pagination]="true" [paginationPageSize]="5" [defaultColDef]="defaultColDef" domLayout="autoHeight" > </ag-grid-angular> public columnDefs: ColDef[] = [{ { headerName: 'Options', field: 'propId', cellRenderer: function (params: any) { let propId = params.value; const eDiv = document.createElement('div'); var optionsOnHtml = '<i class="icon-options" style="color:#0672CB; margin-right: 10px;padding-right:10px" aria-hidden="true"></i>'; eDiv.innerHTML = optionsOnHtml; const optionsIcon = eDiv.querySelectorAll('.icon-options')[0]; optionsIcon.addEventListener('click', () => { // Code here }); return eDiv; }, cellStyle: { borderRightColor: '#e1e1e1', borderRightWidth: '1px', borderRightStyle: 'solid', }, },];Quería saber cómo puedo agregar estas dos opciones junto con propId para poder editar/eliminar el registro con propId.
·
Juan Pablo Isaza
1 answers
Answer question0
Deberá agregar getContextMenuItems en su ag-grid-angular.
<ag-grid-angular .. [getContextMenuItems]="getContextMenuItems" ></ag-grid-angular>Luego agrega algo como:
getContextMenuItems(params) { let result = [ { name: "Edit", action: () => { this.openEdit(params) } }, { name: "Delete", action: () => { this.openDelete(params) } } ]; }); return result; }Y finalmente vincule esto donde está inicializando la cuadrícula.
this.getContextMenuItems = this.getContextMenuItems.bind(this);Este enlace debería ayudar
·
Juan Pablo Isaza
Report
Answer question