How to hide commands column's buttons if the rows are empty

Question

Hi,I have a grid with 7 empty rows, the user can edit each one of these rows and save them one by one, and I want to hide the buttons from commands column when the page is loaded first and all of these 7 rows are empty. When any data is filled in any of the cells of the row, the buttons shows up for that row. I tried with RowDataBound but I can't figure it out how to get the buttons and hide them conditionally on page load. Could you please provide a solution for this?Thank you!

Pavithra Subramaniyam · Answer

Hi Ciprian, 
 
Thanks for contacting Syncfusion support. 
 
You can achieve your requirement by setting “display:none” to the unbound cell div element inside the “rowDataBound” event. Please refer to the below code example and sample link for more information 
 




rowDataBound(args) { 
   // here you can add your condition based on the “args.data” 
  if (isNullOrUndefined(args.data.CustomerID) || args.data.CustomerID == '') { 
    args.row.querySelector('.e-unboundcelldiv').style.display = 'none'; 
  } 
} 
 
 
Sample: https://stackblitz.com/edit/angular-cwpxt8?file=app.component.ts 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S