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

穿精又带淫゛_ 提交于 2020-05-16 08:38:11

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!