Disable CommandButton by Parameter

[Julio Cezar Mendonca]

Good Morning,

I need to know how to disable and enable a 'CommandButton' in GRID.

Here is the code snippet below:

    // grid commands

     this.commands = [

       {title: 'Delete', buttonOption: {content: '<i class = "fas fa-trash-alt"> </ i>', cssClass: 'e-flat e-danger', click: this.onDelete.bind (this)}},

       {title: 'Edit', buttonOption: {content: '<i class = "fas fa-pencil-alt"> </ i>', cssClass: 'e-flat e-success', click: this.onEdit.bind (this)}},

       {title: 'Add', buttonOption: {content: '<i class = "fas fa-plus"> </ i>', cssClass: 'e-flat e-info', click: this.onAddChildren.bind (this (I.e.

     ];

I would need the Add button to be disabled, or invisible, when a parameter is true.

Could I do this?

[Thavasianand Sankaranarayanan]

Hi Julio, 

Greetings from Syncfusion support 

We have validated your requirement. You can achieve your requirement using queryCellInfo event of the Grid. Please refer the below code snippet to achieve your requirement. Like the below code snippet we can render icons and using QueryCellInfo event we can remove the icon. 

App.component.ts 

ngOnInit(): void { 

        this.childGrid = { 

            queryCellInfo: function (args) { 

              if(args.column.headerText == 'Commands' && args.data.Freight > 30){   //add your condition 

              args.cell.getElementsByTagName('button')[0].remove();                             //remove the element 

            }}, 

            columns: [ 

                   { headerText: 'Commands', width: 120, commands: [ 

{ buttonOption: {cssClass:'e-flat',iconCss: 'fa fa-pencil', click: this.onClick } },     //add the icons in custom Command 

{ buttonOption: {cssClass:'e-flat',iconCss: 'fa fa-random', click: this.onClick } }] 

}, 

            ], 

        }; 

    } 

We have prepared a  sample based on your requirement. Please refer the below sample and documentation link for more information: 

Sample: https://stackblitz.com/edit/angular-custom-cmd-233275?file=app.component.ts 

Documentation Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S.