Icon in jqxgrid Angular

Question

I am having hard time to implement icon in jqxgrid. Here is my code https://jseditor.io/?key=gqgrid-angular

I am trying to show "Edit" and "Delete" icon instead of text / button. If i use following code, icon is displaying but its in box and no action is performing after clicking on it. If i use "return del" its performing action.

      {
    text: '', datafield: 'Delete',
    width: 33, columnType: 'button',
    cellsRenderer: (row: number, column: any, value: any, defaulthtml: string, columnproperties: any, rowdata: any) => {
       return '<i class="fa fa-trash deleteButton"></i>';
     // return 'del';
    },
    buttonClick: (row: number): void => {
        console.log("*********");
        this.deleteRow(row);
    }
  }

Please can you suggest what i am doing wrong? How i show icon and it perform action upon click.

Answer 1

You can add this to your component

.jqx-grid-cell input[type='button'] {
  cursor: pointer;
  opacity: 0.01 !important;
  z-index: 9999 !important;
  display: block !important;
}

For more info:

• Normally, with text, the column type button will render an input element.
• Whenever you have a < character in the cell (via cellsRenderer), such as <img, <i. It will try to render both input and image. To display the image, it will need to hide the input => the code make the input display: none.

What interesting is the code that attach click handler is still using firstchild selector, which will eventually apply to the invisible input.
All the logic above could be found in jqxgrid.js: _renderbuttoncell function.

Took me 2 hours to scrutinize the document and debug the issue. Then this answer came to me https://www.jqwidgets.com/community/topic/jqxgrid-column-button-not-firing-event-after-adding-icon-over-there/