I want to implement bootstrap accordion in my application. Currently, If I click on any rows, it gives me first #Html.Raw(item.D) and #Html.Raw(item.B).
What i want is that, if i click on 2nd row then its respective #Html.Raw(item.D) and #Html.Raw(item.B) should displayed and so on.
Please suggest me where I am going wrong.
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores">
<td align="left">
#Html.Raw(item.H)
</td>
<td align="right">
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="accordion-body collapse" id="12345-cores">
<table>
<tbody>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td></td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</tbody>
</table>
</td>
</tr>
}
</table>
You need to specify id uniquely, to do so you need to append raw id(or something unique for each row) to id and data-target attributes,
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores#(item.id)">
<td align="left">
#Html.Raw(item.H)
</td>
<td align="right">
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="accordion-body collapse" id="12345-cores#(item.id)">
<table>
<tbody>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td></td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</tbody>
</table>
</td>
</tr>
}
</table>
updated : data-target="#12345-cores#(item.id) & id="12345-cores#(item.id)"
Related
I am trying to show product items when button order detail is pressed, but its not working in any way I tried, it's possible to make it work with bootstrap 5 or I have to do it with javascript ?
Useless information for "It looks like your post is mostly code; please add some more details." : In the first foreach I am displaying information from the order, then the second foreach is retrieving product id and quantity from a different table that contain order id and the third foreach is getting product where id from the second foreach in order to display product details
<table class="table border">
<thead>
<tr>
<th class="h4" style="width: 18%">Order Number</th>
<th class="h4">Date</th>
<th class="h4">Total</th>
<th class="h4">Status</th>
<th class="h4"></th>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<?php
foreach ($order as $row_order) {
$order_status = intval($row_order->status);
?>
<td class="fw-bold">{{ $row_order->id }}</td>
<td class="fw-bold">{{ $row_order->added_on }}</td>
<td class="fw-bold">{{ $row_order->order_total }} $</td>
<td class="fw-bold"><?php if($order_status == 0){ ?>
Not Paid
<?php }elseif ($order_status == 1) { ?>
Paid
<?php }elseif ($order_status == 2) { ?>
Shipped
<?php }elseif ($order_status == 3) { ?>
Delivered
<?php } ?>
</td>
<td></td>
{{-- <td><a class="btn btn-primary" href="">Order Detail</a></td> --}}
<div class="btn-group">
<td>
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Order Detail
</button>
</td>
#foreach (\App\Models\Order_product_size_color::where('order_id', '=', $row_order->id)->get() as $order_variant)
#foreach (\App\Models\Product_size_color::where('id', '=', $order_variant->product_size_color_id)->get() as $variant)
<div class="dropdown-menu">
<td class="border-0 p-0 dropdown-item">
<tr>
<td class="border-0"><img class="rounded" src="{{ asset('storage/'. $variant->image1->product_image) }}" alt="" style="width: 80px; height: 90px;"></td>
<td class="fw-bold border-0">{{ $variant->product->product_name }}</td>
<td class="border-0">{{ $order_variant->count }} products</td>
<td class="fw-bold border-0">Size: {{ $variant->size->size_name }}</td>
<td class="fw-bold border-0">Color: {{ $variant->color->color_name }}</td>
<td class="fw-bold border-0">${{ $variant->product->price }}</td>
</tr>
</td>
</div>
#endforeach
#endforeach
</div>
<tr>
<td class="fw-bold">Delivery Address:</td>
<td class="fw-bold">{{ $row_order->address }}</td>
</tr>
</tr>
<?php }//end foreach ?>
</tbody>
</table>
I want to expand and collapse table row using Bootstrap Accordion.
Currently, if I click on any row, it expands and collapse. But what I want is that, if I click on second row then first row should collapse if it is expanded then and so on.
<div class=" panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr>
<td class="accordion-toggle" data-toggle="collapse" data-target="#AA_#(item.Id)">
<button class="bb" type="button">
#Html.Raw(item.H)
</button>
</td>
<td>
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td id="AA_#(item.Id)" class="accordion-body collapse">
<table>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</table>
</td>
</tr>
}
</table>
</div>
I researched my problem on SO and found one solution provided by #tmg on here. Many thanks to #tmg. I followed the same in my scenario and it worked for me.
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#AA_#(item.Id)">
<td>
<button class="bb" type="button">
#Html.Raw(item.H)
</button>
</td>
<td>
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="hiddenRow">
<div class="accordian-body collapse" id="AA_#(item.Id)">
<table>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</table>
</div>
</td>
</tr>
}
</table>
</div>
And added JQuery to collapse and toggle table row
$('.table .accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
Added Style for hiddenRow
.hiddenRow {
padding: 0 !important;
}
I want to display terms attribute using thymeleaf. I tried like
<table>
<tr th:each="term: ${contractMap.contractTerms}">
<td><table>
<tr th:each="termRow: ${term.rows}">
<td><table>
<tr th:each="atr: ${termRow.attributes}">
<td th:text="${atr.value}"></td>
</tr ></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
But it is not working.
This is what my highchart looks like atm
I kinda want the chart to be on the right side while the table to be on the left
this is my html:
<div id="words" style="width:70%;float:left;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
<thead>
<tr>
<th>Word</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>icon</td>
<td>12</td>
</tr>
<tr>
<td>text</td>
<td>12</td>
</tr>
<tr>
<td>your</td>
<td>9</td>
</tr>
<tr>
<td>post</td>
<td>6</td>
</tr>
<tr>
<td>document</td>
<td>5</td>
</tr>
<tr>
<td>with</td>
<td>5</td>
</tr>
<tr>
<td>parentNode</td>
<td>4</td>
</tr>
<tr>
<td>email</td>
<td>4</td>
</tr>
<tr>
<td>com"</td>
<td>4</td>
</tr>
<tr>
<td>googletag</td>
<td>3</td>
</tr>
</tbody>
</table>
What should i do to achieve such output?
If you can change HTML, then simply put table before Highcharts container and set proper styles (float, width). For example you can also use two divs: http://jsfiddle.net/68qdew8g/
<div style="float: left; width: 30%;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
...
</table>
</div>
<div id="words" style="width:70%;float:left;"></div>
It does not seem to like #{index++;} , I have tried
#{int index++}, #(index++), #(int index++;)
This code didn't throw errors when used with MVC 2.
Here's it's giving me
ambiguity warnings about index.
#model CartTest.Models.Cart
#{
ViewBag.Title = "Index";
}
<h2>Cart Index</h2>
<table width="80%" align="center">
<thead><tr>
<th align="center">Quantity</th>
<th align="left">Item</th>
<th align="right">Price</th>
<th align="right">Subtotal</th>
</tr></thead>
<tbody>
#{int index = 0;}
#foreach (var line in Model.Lines)
{
<tr>
#Html.Hidden("Lines.Index", index);
<td align="center">#Html.TextBox("Lines[" + index + "].Quantity",line.Quantity)</td>
<td align="left">#line.Product.Name</td>
<td align="right">#line.Product.Price</td>
<td align="right">#(line.Quantity * line.Product.Price)</td>
<td align="right">#Html.ActionLink("Remove", "RemoveItem", new { productId = line.Product.ProductID }, null)</td>
</tr>
#{index++;}
}
</tbody>
<tfoot>
</tfoot>
</table>
Try like this:
#{int index = 0;}
#foreach (var line in Model.Lines)
{
<tr>
...
</tr>
index++;
}
Now that's just to make the Razor compiler happy. It's not a solution I recommend. The real solution I would recommend you is to use editor templates:
<table width="80%" align="center">
<thead>
<tr>
<th align="center">Quantity</th>
<th align="left">Item</th>
<th align="right">Price</th>
<th align="right">Subtotal</th>
</tr>
</thead>
<tbody>
#Html.EditorFor(x => x.Lines)
</tbody>
<tfoot>
</tfoot>
</table>
and inside the corresponding editor template of a Line (~/Views/Shared/EditorTemplates/LineViewModel.cshtml) which will be rendered for each element of the Line collection:
#model LineViewModel
<td align="center">
#Html.TextBoxFor(x => x.Quantity)
</td>
<td align="left">
#Html.DisplayFor(x => x.Product.Name)
</td>
<td align="right">
#Html.DisplayFor(x => x.Product.Price)
</td>
<td align="right">
#Html.DisplayFor(x => x.CalculatedTotalPrice)
</td>
<td align="right">
#Html.ActionLink("Remove", "RemoveItem", new { productId = Model.Product.ProductID }, null)
</td>
See, no more ugly loops, weakly typed helpers, dealing with some indexes, etc... Everything works by conventions.