We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to hide a row when a row command button clicked


I have a requirement to hide (not delete) a row when clicked on a command button in the same row.  Is there a way to do it?



4 Replies 1 reply marked as answer

PS Pavithra Subramaniyam Syncfusion Team December 21, 2022 05:39 AM UTC

Hi kalum,

Thanks for contacting Syncfusion support.

You can achieve your requirement by adding a custom command button and inside the “CommandClick” event you can hide the clicked rows. Please refer to the below code example and documentation link for more information.


    List<object> commands = new List<object>();

    commands.Add(new { type = "userstatus", buttonOption = new { content = "Hide", cssClass = "e-flat" } });



@Html.EJS().Grid("CustomCommand").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>


    .  .  .






    function commandClick(args) {

         args.target.closest('tr').style.display = 'none';





In our Grid component, during every data action like paging, sorting, filtering, etc. new row elements will be rendered. So, the style changes added to the rows will be removed after the data actions. If you want to persist the changes, please share the below details based on which we can check the feasibility and provide a solution as early as possible.

  1. Is there any primary key column in your Grid which has unique values?
  2. Or is there any common key to identify the hidden rows?


Pavithra S

Marked as answer

KA kalum December 22, 2022 03:05 AM UTC

Hi Pavithra,

Your code example was much sufficient for achieving my requirement and thanking you very much for your kind support.


SG Suganya Gopinath Syncfusion Team December 22, 2022 06:06 AM UTC


We are glad that the provided solution helped to solve the issue. 

We are marking this thread as solved. 


Suganya Gopinath. 

PG Peter Groft January 13, 2023 09:00 AM UTC

Tips and tricks for hiding and unhiding rows in Excel

Select the range that contains empty cells you want to hide.

On the Home tab, in the Editing group, click Find & Select > Go To Special.

In the Go To Special dialog box, select the Blanks radio button, and click OK. ...

Press Ctrl + 9 to hide the corresponding rows.

Hope You Find This Useful,


Live Chat Icon For mobile
Up arrow icon