seeing html on hover for command

[vin]

I have added an ellipse image,on hover i am seeing the html tag

How to avoid it?

<e-column width=50 [commands]='commands'></e-column>

 this.commands = [{ buttonOption: { content: '<img class="" src="assets/img/ellipsis.svg"/>', cssClass: 'e-flat ellipse' } }];

[Vignesh Sivagnanam]

Hi vin  

Greetings from Syncfusion support 

Based on your query, we understand that you have faced issue that the image tag is displayed as the tooltip of command button. To resolve the issue at your end, we suggest you to use the title property to provide custom tooltip to the EJ2 Grid command column buttons.  

Please refer the below Code example and Documentation for your reference, 

this.commands = [ 

      { 

        title: 'Image', 

        buttonOption: { 

          content: 

            '<img style="width:30px;height:30px"  src="https://user-images.githubusercontent.com/263237/36633897-d3237f2e-19ad-11e8-960a-daaf5ca3088a.png">', 

          cssClass: 'e-flat ellipse' 

        } 

      } 

    ]; 

 

Documentation : https://ej2.syncfusion.com/angular/documentation/api/grid/commandColumnModel/#title 

Please get back to us for further assistance, 

Regards 

Vignesh Sivagnanam 

[vin]

Is there a way to disable the click and show the icon as disabled?

I am using the command button

 { type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },

[Vignesh Sivagnanam]

Hi vin 

Thanks for the update 

Based on your query, you want to disable the button and click event of the button. To achieve your requirement, we suggest you to use the external css to disable the button and click event. You can use the below code example to achieve your requirement at your end. 

Please refer the below code example and Sample for your reference, 

Sample : https://stackblitz.com/edit/angular-3gwh8h?file=index.html 

this.commands = [ 

      { 

        type: 'Delete', 

        buttonOption: { 

          iconCss: 'e-icons e-delete', 

          cssClass: 'e-flat disable' 

        } 

      } 

    ]; 

 

<style> 

    .disable { 

      pointer-events: none; 

      opacity: 0.5; 

    } 

  </style> 

Please get back to us for further assistance, 

Regards 

Vignesh Sivagnanam