I have used Nested table View into my Project up to 2nd level it works well, but the problem is while i am adding 3rd level sub child. When I click the 2nd level sub child button to expand the 3rd level sub child view, it just collapse the table. Basically, the idea is each customer has some sales ID which is showing in the 2nd level sub child nested table and under each sales ID there are some items which I want to show in 3rd level sub child nested table. Please, help me to fix this problem. What I am doing wrong here? In the picture you can see the nested table view up to 2nd level sub child
<script type="text/javascript">
$(document).ready(function () {
$('.parentTable.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
$('.subTable.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
$('.bb').on('click', function (e) {
$('.bb').toggleClass("bb glyphicon glyphicon-minus"); //you can list several class names
e.preventDefault();
});
$('.subbutton').on('click', function (e) {
$('.subbutton').toggleClass("bb glyphicon glyphicon-minus"); //you can list several class names
e.preventDefault();
});
});
</script><style>
.hiddenRow {
padding: 0 !important;
}
</style>@model IEnumerable<DEtelecom.ViewModel.VmCustomerModel>
@{
ViewBag.Title = "Customer Sales Information";
WebGrid grid = new WebGrid(source: Model, canSort: false);
}
<div class="panel-body table-responsive">
<table class="customTable table table-hover parentTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Customer Name
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Total Amount
</th>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="bb glyphicon glyphicon-chevron-down" id="togglerow" type="button">
</button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(item.CustomerName)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:C}", item.TotalAmount))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=3>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Sales Number
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Bstnr
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Creation Date
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Due Dtae
</th>
<tbody>
@foreach (var sales in item.SalesList)
{
<tr class="accordion-toggle d-flex" data-toggle="collapse" data-target="#AA_@(item.ID)">
<td class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button class="subbutton glyphicon glyphicon-chevron-down" id="subtogglerow" type="button"></button>
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.SalesID)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(sales.Bstnr)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:d}", sales.CreationDate))
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(string.Format("{0:d}", sales.DueDate))
</td>
</tr>
<tr>
<td class="hiddenRow t" colspan=5>
<div class="accordian-body collapse table-responsive" id="AA_@(item.ID)">
<table class="table table-hover subTable">
<thead class="thead-light">
<tr class="d-flex">
<th scope="col" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
Item Description
</th>
<th scope="col" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
Quantity
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Unit Price
</th>
<th scope="col" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Amount
</th>
<tbody>
@foreach (var items in sales.ItemList)
{
<tr class="d-flex">
<td scope="row" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
@Html.Raw(items.Description)
</td>
<td scope="row" class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
@Html.Raw(items.Quantity)
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", items.UnitPrice))
</td>
<td scope="row" class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
@Html.Raw(string.Format("{0:C}", items.Amount))
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
3
Answers
Mistakenly I put same ID in both 'data-target' row. It should be two different ID that belongs to the child row. I am sharing the fully functional code bellow:
It seems like you have added a new
<tr>for third level child table. So please add a nested child table to the<td>that is supposed to expand it.Fix the Ids, you have bind wrong ids.