Inline editing in multiple different datagrids

Radzen.Blazor Components
1

Hi,

I'm running into an issue when adding a row to an inline editing radzendatagrid, when having multiple of those grids on the page.

  @foreach (var group in Groups)
  {
    <div>
      <RadzenFieldset AllowCollapse="true" Collapsed="@group.IsCollapsed" 
                      Collapse="@(() => SetCollapseState(group.GroupId, true))" 
                      Expand="@(() => SetCollapseState(group.GroupId, false))">
        <HeaderTemplate>
          <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center"
                       JustifyContent="JustifyContent.Start" Gap="0.50rem">
            <b>@($"{group.GroupCode} - {group.GroupName}")</b>
            @if (!group.IsCollapsed)
            {
              <RadzenButton title="@_editGroupText" Click="@(() => UpdateGroup(group))" Icon="edit"
                            Style="color: inherit" Id="IconOnlyButton" @onclick:stopPropagation="true"/>
              <RadzenButton title="@_removeGroupText" Click="@(() => DeleteGroup(group))"
                            Icon="delete" Style="color: inherit" Id="IconOnlyButton" @onclick:stopPropagation="true"/>
            }
          </RadzenStack>
        </HeaderTemplate>
        <ChildContent>
          <RadzenDataGrid id="grouptable" @ref="grid" Data="@group.Clubs" TItem="ClubOverviewModel"  AllowSorting="true" Sort="@Reset" AllowFiltering="true" 
                          FilterMode="FilterMode.Advanced" LogicalFilterOperator="LogicalFilterOperator.Or" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                          Filter="@Reset" AllowPaging="true" Page="@Reset" PageSize="10" PagerHorizontalAlign="HorizontalAlign.Center" ShowPagingSummary="true"Density="Density.Compact" AllowColumnResize="true" 
                          AllowAlternatingRows="true" GridLines="DataGridGridLines.Default">
            <HeaderTemplate>
              <RadzenButton ButtonStyle="ButtonStyle.Primary" Icon="add_circle" Text="@_addClubText" Click="@(() => InsertRow(group.GroupId))" Disabled="@(clubsToInsert.Count > 1)" />
            </HeaderTemplate>

@code {

  private RadzenDataGrid<ClubOverviewModel> grid;
  
  IEnumerable<ClubGroupOverViewModel> Groups;
  
  List<ClubOverviewModel> clubsToInsert = new();
  
  private ClubGroupOverViewModel _groupModel = new();

  private bool _isLoading = true;
 
  protected override async Task OnInitializedAsync()
  {

    await SetData();
    _isLoading = false;
  }

  private async Task SetData()
  {
    var result = await GetClubGroups.QueryAsync();
    if (result == null)
    {
      throw new Exception("This group does not exist");
    }
    
    Groups = result
      .GroupBy(item => new {item.GroupId, item.GroupCode, item.GroupName})
      .Select(group => new ClubGroupOverViewModel
    {
      GroupId = group.Key.GroupId,
      GroupCode = group.Key.GroupCode,
      GroupName = group.Key.GroupName,
      IsCollapsed = true,
      Clubs = group
        .Where(club => club.ClubId != Guid.Empty)
        .Select(club => new ClubOverviewModel
        {
          ClubId = club.ClubId!.Value,
          ClubCode = club.ClubCode,
          ClubName = club.ClubName,
          UserName = club.Username
        }).ToList(),
    });
  }
  
  private Task DeleteGroup(ClubGroupOverViewModel uniqueGroupCode)
  {
    throw new NotImplementedException();
  }

  private Task InsertRow(Guid groupId)
  {
        if (!grid.IsValid) return;
        Reset();

        var club= new ClubOverviewModel();
        clubsToInsert .Add(club);
        await grid.InsertRow(order);
  }

  private void Reset()
  {
    clubsToInsert.Clear();
  }
  
  void Reset(ClubOverviewModel club)
  {
    clubsToInsert.Remove(club);
  }

  private void SetCollapseState(Guid groupId, bool collapsed)
  {
    Groups = Groups.Select(g =>
    {
      if (g.GroupId == groupId)
      {
        g.IsCollapsed = collapsed;
      }
      return g;
    }).ToList();

    StateHasChanged();
  }

}

If I have 2 groups and click add club in the first fieldset and thus first group it inserts a row in the second fieldset and thus second group.

I know it has to do with the @ref but how do I make that unique so that clicking add club in the first group will eventually add a line to the first datagrid?

Kind regards,
Tino

2

This way you will have reference to only the last rendered DataGrid - you need something like:

@foreach(MyDataType myDataType in MyDataTypes)
{
    <MyComponent MyProperty="@myDataType" @ref="@Ref"/>
}

@code{
    private List<MyComponent> _refs  = new();
    public MyComponent Ref {set => _refs.Add(value); }
}