CODEWITHSUNDEEP
html.net-coreblazor
MTomys
MTomys

Reputation: 97

How to add collapsing rows in blazor

I have a problem with setting up collapsable rows in Blazor.

I need the table to look something like this: unexpandedTable

After clicking expand, it would add additional info:expanded

So far i have this solution

<button @onclick=Toggle>    
@(!this._show ? "+" : "-")
</button>
    <tr>
    @if(_show)
    {
        @ChildContent
    }
    </tr>
@code {
    [Parameter] public RenderFragment ChildContent{ get; set; }
    private bool _show { get; set; } = false;

    private void Toggle()
    {
        _show = !_show;
    }
}

And in table

<table>
    <thead>
        <tr>
            <th>Unique Seller Id</th>
            <th>Seller Nickname</th>
        </tr>
    </thead>
    <tbody>
            @foreach (var seller in sellers)
            {
                <tr>
                    <td>@seller.UniqueSellerIdentificator</td>
                    <td>@seller.SellerNickname</td>
                    <CollapsableRow>
                        <td>First Name: </td>
                        <td>@seller.FirstName</td>
                    </CollapsableRow>
                </tr>
            }
    </tbody>
</table>

I find it really hard to find a solution that can seperate the button from the table row and simultaneously give the ability for each table row to be expanded separately.

Please help

Upvotes: 1

Views: 1181

Answers (2)

LYass
LYass

Reputation: 624

You can use MudTable from MudBlazor (Grouping (Basic) - Initially collapsed) : https://mudblazor.com/components/table#grouping-(basic)---initially-collapsed

To use MudBlazor go check : https://mudblazor.com/getting-started/installation#prerequisites

Upvotes: 1

Mitch Storrie
Mitch Storrie

Reputation: 181

try something like this.

<tbody>
        @foreach (var seller in sellers)
        {
            <tr>
                <td>@seller.UniqueSellerIdentificator</td>
                <td>@seller.SellerNickname</td>
                <td><button type="button" @onclick="@(() => seller.IsEditing = !seller.IsEditing)">Expand</button></td>
            </tr>
                        
            @if(seller.IsEditing){
            <tr>
                <td>@seller.IsAdmin</td>
                <td>@seller.IsSeller</td>
            </tr>
        }
</tbody>

you add the following attribute to your view model class for sellers.

 public class sellerViewModel 
    {

        //Add additional attribute

        [JsonIgnore]//Ensures this is not reflected on the database when validating model. 
        public bool ViewFullModel { get; set; } = false;
    }

Upvotes: 1

Related Questions