How to control the visibility of command button or disable/enable it based on the value of other columns

[Jumpei Yamauchi]

We are thinking to use custom command column that populates the value of another column.

What we'd like to do is once it is populated, the button in the custom command column to be either hidden or disabled.

Are there any ways to control the visibility of the command button or enable/disable based on the value of other columns in the row?

[Pavithra Subramaniyam]

Hi Jumpei Yamauchi,

You can hide the command buttons based on the row data values by using the “rowDataBound” event. Please refer to the code example, documentation, and sample link for more information.

const commands = [

  {

    buttonOption: {

      content: 'Details',

      cssClass: 'e-custombtn',

    },

  },

];

const rowDataBound = (args) => {

  if (args.row) {

    if (args.data['OrderID'] % 2 == 0) {

      args.row.querySelector('.e-custombtn').style.display = 'none';

    }

  }

};

 

Documentation: https://helpej2.syncfusion.com/react/documentation/grid/row/row#using-event

Sample                 : https://stackblitz.com/edit/react-yfzccb-k1vd1y?file=index.js

Regards,

Pavithra S