Grid with Details Template

[vikingvinayweb]

It would be better if we have a support for expanding a row to show details something like DetailsTemplate.

similar to this.

Thanks!

[MaMon1963]

You can achieve this easily by applying the Collapse component to a row field.

[matbishop]

Could you kindly provide an example code snippet of this?

I am unsure as to how you would do this with a Grid.

[MaMon1963]

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; } } ```

[MaMon1963]

I can't do it better than this, in any case, I also replied to you via email.

[MaMon1963]

[vikingvinayweb]

@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

@matbishop @gvreddy04

[MaMon1963]

I agree, this is not true line expansion. Based on your initial image I thought you could resolve the list of titles with this method, perhaps by concatenating the year of edition, since in that case it is the only variable information shown.