How to use and add icon to a cell in ag-grid to indicate the cell is editable

问题

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

标签

typescript

angular6

ag-grid