CODEWITHSUNDEEP
blazormudblazor
BankMan101
BankMan101

Reputation: 281

Mudblazor Fetch data for MudDataGrid when ChildRowContent expanded

I have the following code which uses MudBlazor v6.11.0

    <MudDataGrid T="UserDetails">
       
        <Columns>
            <HierarchyColumn T="UserDetails" />
            <PropertyColumn HeaderStyle="font-weight:bold;width:2%;" Property="x => x.Id" Title="Id" Resizable="true" Filterable="false" />  
        </Columns>
        <ChildRowContent>
            <MudCard>
                <MudCardHeader>
                    <CardHeaderContent>
                        <MudText Style="font-weight:bold" Typo="Typo.h6">Comments</MudText>
                    </CardHeaderContent>
                </MudCardHeader>
               
                <MudCardContent>
                    @foreach(var comment in _rowComments)
                    {
                        <MudText>@comment.Comments </MudText>
                    }    
                </MudCardContent>                    
           </MudCard>
        </ChildRowContent>
    </MudDataGrid>

@code {
    private List<Comments> _rowComments = new();
    
     private async Task<GridData<UserDetails>> LoadData(GridState<UserDetails> state)
    {
        var data = await Service.GetUserData();
        return new GridData<UserDetails>() { TotalItems = total, Items = data };
    }
    

    private async Task<List<Comments>> GetComments(int id)
    {
       return await Service.GetComments(id);
    }
}

What I would like to do is when the Icon that the Grid Provider to expand the ChildRowContent is clicked, I want to call the GetComments method and pass the Id from the row. Which in turn populates the comments. Is this possible?

Upvotes: 2

Views: 877

Answers (1)

eeemanueeeleee
eeemanueeeleee

Reputation: 176

You can create a new component that contains the comments list and pass the ID as parameter. For Example "RowComments.razor":

@if (_rowComments is null)
{
    <h3>Loading..</h3>
}
else
{
    @foreach(var comment in _rowComments)
    {
         <MudText>@comment.Comments </MudText>
    }    
}

@code {

[Parameter]
public int Id{ get; set; }

private List<Comments> _rowComments;

protected async override Task OnInitializedAsync()
{
    _rowComments = await Service.GetComments(id);
}

}

And then, in ChildRowContent:

<ChildRowContent>
    <RowComments Id="@context.Item.Id"/>
</ChildRowContent>

Upvotes: 3

Related Questions