datagridblazorblazor-webassemblyblazorise

Load Blazorise DataGrid DetailRow from server

The "Blazorise DataGrid extension" supports Master/Detail. How does one load detail data, say from a server, when a user click on its parent in master table?

In example of DataGrid extension I can use "selectedEmployee" property to find out what master row selected but the main problem is "how to reload child data from server when master row clicked?"

<DataGrid TItem="Employee"
  Data="@dataModels"
  EditMode="@editMode"
  Editable="@editable"
  Sortable="@sortable"
  Filterable="@filterable"
  ShowPager="@showPager"
  RowInserted="@OnRowInserted"
  RowUpdated="@OnRowUpdated"
  RowRemoved="@OnRowRemoved"
  UseInternalEditing="true"
  @bind-SelectedRow="@selectedEmployee"
  DetailRowTrigger="@((item)=>item.Salaries?.Count > 0 && item.Id == selectedEmployee?.Id)"
  IsStriped="true"
  IsBordered="true"
  IsHoverable="true">
Solution

  • You need to use event ReadData along with TotalItems property on your sub-datagrid. Sample usage can be found on Blazorise documentation.

    <DataGrid TItem="YourSubModel"
    Data="@yourSubModelList"
    ReadData="@OnReadData"
    TotalItems="@totalSubModels">
</DataGrid>