How to hide a row when a row command button clicked

[kalum]

Hi,

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?

Thanks

Kalum

[Pavithra Subramaniyam]

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 =>

{

    .  .  .

    col.HeaderText("Commands").Width("160").Commands(commands).Add();

 

}).AllowPaging().CommandClick("commandClick").Render()

 

<script>

    function commandClick(args) {

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

    }

</script>

 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/editing/command-column-editing#custom-command-column

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?

Regards,

Pavithra S

[kalum]

Hi Pavithra,

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

Kalum

[Suganya Gopinath]

Kalum,

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

We are marking this thread as solved. 

Regards,

Suganya Gopinath. 

[Peter Groft]

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,

Peter