Grid with Details Template #586
Replies: 3 comments 4 replies
-
You can achieve this easily by applying the Collapse component to a row field. |
Beta Was this translation helpful? Give feedback.
-
With pleasure, I have extracted the essential part, I hope it is understandable.
**On Grid:**
```
<GridColumn TItem="OrdineDTO" HeaderText="Prodotti" PropertyName="Descrizione"
HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center"
Filterable="false" Sortable="false">
<DettaglioProdotto ***@***.***" ***@***.***"></DettaglioProdotto>
</GridColumn>
```
**In nested Blazor component “DettaglioProdotto”:**
```
@using MySolution.Shared.Models
@foreach (var item in ProdottiOrdine!)
{
<div class="row">
<div ***@***.***("#0")</b></div>
<div class="col col-8 text-start">
<btn class="btn btn-sm btn-outline-dark" data-bs-toggle="collapse" data-bs-target="#MostraIngredienti@(item.Id)">@(Gruppi!.Where(x => x.Id == item.IdGruppo).Select(x => x.Nome).FirstOrDefault()) - ***@***.***</b></btn>
@if ***@***.***)
{
<br>
<b>Speciale</b>
}
@if ***@***.***)
{
<br>
<b>Doppia Proteina</b>
}
<div id="MostraIngredienti@(item.Id)" class="collapse">
<p>
<ul>
@foreach (var ingr in item.IngredientiProdottiOrdine)
{
<li>
- @ingr.Descrizione
</li>
}
</ul>
</p>
</div>
</div>
<div class="col-3 ***@***.***().ToString("##0.00")€</div>
</div>
}
@code {
[Parameter]
public List<ProdottiOrdine>? ProdottiOrdine { get; set; }
[Parameter]
public List<Gruppo>? Gruppi { get; set; }
}
```
|
Beta Was this translation helpful? Give feedback.
-
@MaMon1963 - Thanks for sharing this idea. But, my intention was to expand a row not a cell. So, I were expecting the source code to be changed to allow a detail template to be added just after the clicked row(). That way if we expand a row by clicking a + button in a cell, then there will be a row next to the current row with what we added in the Detailed Template. Please review this source code for better understanding of what I intended. Thanks! https://github.com/IvanJosipovic/BlazorTable/blob/master/src/BlazorTable/Components/Table.razor |
Beta Was this translation helpful? Give feedback.
-
It would be better if we have a support for expanding a row to show details something like DetailsTemplate.
similar to this.
Thanks!
Beta Was this translation helpful? Give feedback.
All reactions