问题
I am using ag-grid with angular 6. For a particular column the cell is supposed to be editable. Please find the below image.
How can i add this icon, on click of which the cell is made editable.
回答1:
You need to use the cellRenderer
field in the objects that are in the columnDefs array. Basically, you take what would normally be displayed, and the icon you want to display and place them both in one <span>
.
something.component.ts
columnDefs = [
/* ... */
{ headerName: 'Notes', field: 'notes', editable: true,
cellRenderer: function(params) {
return '<span><i class="material-icons">edit</i>' + params.value + '</span>'
} }
];
回答2:
Check official demo
Modified plnkr sample
Instead of getRenderer()
function
you can create custom cellRenderer component and inject it to gridOptions components
or frameworkComponents
回答3:
You can also do it via css class
/* ---- conditional : only some cell are editable based on cell data type/field -----*/
cellClass: function(params) { return (params.data && params.data.sale ? 'editable-grid-cell':''); },
/* ------ if all are editable ----------*/
cellClass: 'editable-grid-cell',
Then add css
.editable-grid-cell::after {
content: "\F303";
font-family: "Font Awesome 5 Free";
position: absolute;
top: 0;
right: 0;
font-size: 15px;
font-weight: 900;
z-index: -1; /* this will set it in background so when user click onit you will get cell-click event as if user would normally click on cell */
}
if you are using it in angular then you might need to use ::ng-deep to prevent style isolation and apply the style to the class regardless of component level. like
::ng-deep ..editable-grid-cell::after { .... }
回答4:
try this for your cellRenderer method of aggrid cell
cellRenderer: params => {
let eIconGui = document.createElement('span');
return eIconGui.innerHTML = '<em class="material-icons">edit</em>' + ' ' + params.data.value;
}
来源:https://stackoverflow.com/questions/52468485/how-to-use-and-add-icon-to-a-cell-in-ag-grid-to-indicate-the-cell-is-editable