currently I'm working on a grid with group rows (on top). If the user clicks on the first cell of the group row (a - sign) the details rows should slide up with animation. I found this answer, and modified the relevant code like this:
$(`[kendogridlogicalrow][calcrowname=${calcRowName}]`)
.animate({ paddingTop: 0, paddingBottom: 0 }, 500)
.wrapInner('<div />')
.children()
.slideUp(500, function () {
$(this).closest('tr').hide();
});
With this all the td elements get wrapped in a div inside a row. I get the 'almost' desired result (there is a slide effect), but the detail rows don't shrink like in the linked example. See this demo.
How can I achieve, that with the slide effect starting from the last detail row the rows are shrinked and then disapper? Should I maybe use each and delay?
EDIT: here is a sample:
$('#btn').click(function(){
$('[detailrow]')
.animate({ paddingTop: 0, paddingBottom: 0 }, 500)
.wrapInner('<div />')
.children()
.slideUp(500, function () {
$(this).closest('tr').hide();
});
});table {
border-collapse: collapse;
}
tr th, tr td {
border: 1px solid grey;
}
tr.group-row {
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class='group-row'>
<td>
group row
<button id="btn" type="button">collapse</button>
</td>
<td>group row</td>
<td>group row</td>
</tr>
<tr detailrow>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr detailrow>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr detailrow>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr detailrow>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class='group-row'>
<td>
group row
<button type="button">collapse</button>
</td>
<td>group row</td>
<td>group row</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>EDIT 2:
Finally I managed it. I inserted a div below the group row and wrapped to this div the detail rows. This has messed up the layout of course, so I had to set the height of this div to the total height of the detail rows and the width to the total width of the table columns, and also I have to set the width of the td elements of the detail rows to the original width. With this I got back the table layout. And finally I had to animate this div.
Here is an example: https://gifyu.com/image/SD6d3
[kendogridlogicalrow]selector implies the use of kendo. Which means it's likely not a plain<table><tbody><tr>