How to collapse/expand all subgrids of same level when clicking on first column

Question

I would like to expand or collapse all subgrids when I click on the first column (yellow) under the selected row.

Plz see pictures below :

and I would like to add some icon in this column.

I've tried with this code in onSelectRow event :

jQuery(this).closest("tr.ui-subgrid").find("td.ui-widget-content:first").append('<span class="ui-icon ui-icon-plus"></span>');

but without success.

Many thanks for anybody who could help me.

Have a nice day

Cheers Jihel

Answer 1

Many thanks Oleg for your kind help.

Therefore, I think I have not fine explained my trouble.

So, I have updated pictures for focusing my wish.

Your old answer allows to expand/collapse all rows in a grid, but that I would want is to expand/collapse all subgrids from one row at a time, and set a plus/minus icon in the first column under the selected row which trigger click event for expanding/collapsing subgrids.

If my request is not clear, plz let me know.

And many thanks to helpers.

Regards

Jihel