DataGrid Row expansion behavior not as expected

Radzen.Blazor Components
1

Hello,
I have a DataGrid set up by the self referencing hierarchy example where a row gets expanded when you click it on it. I am using Single mode (Multiple mode has no effect on this issue).

Problem 1:

When I click on an expandable row, the row gets expanded but it doesn't seem to want to collapse unless I expand another row. How can I make the row collapse again on click?

Problem 2:

After switching to another page and then going back to the page where the DataGrid is, the Grid completely disappears and doesn't return until I restart the project. Is this maybe linked to the first problem?

I am binding to the RowRender event where I set the expandable rows (with Expandable property) and to the LoadChildData event to set the data source for the child elements (with the Data property).

What I have also noticed is that the RowRender event gets invoked around 10 times even though I have 2 rows of child data to display.

Thanks in advance!

2

I’m unable to reproduce such behavior on our demo:

You can check it for reference to see what ate the differences with your implementation.

3

I couldn't find anything different which could impact the result in my implementation. (maybe you can find sth)

Here is my markup:

  <RadzenDataGrid Data="@mappings" AllowVirtualization="true"
                          RowRender="@RowRender" LoadChildData="@LoadChildData"  TItem="Mapping" ExpandMode="DataGridExpandMode.Single" Style="margin-top:8vh; margin-left: 10vw;">
                          <Columns>
                              <RadzenDataGridColumn Width="150px" TItem="Mapping" Property="Operator" Title="Operator"></RadzenDataGridColumn>
                              <RadzenDataGridColumn Width="200px" TItem="Mapping" Property="Route" Title="Route"></RadzenDataGridColumn>
                              <RadzenDataGridColumn Width="100px" TItem="Mapping" Property="Handler" Title="Handler"></RadzenDataGridColumn>
                              <RadzenDataGridColumn Width="100px" TItem="Mapping" Property="Timezone" Title="Timezone"></RadzenDataGridColumn>
                              <RadzenDataGridColumn Width="50px"  TItem="Mapping" Property="Inherited" Title="Inherited"></RadzenDataGridColumn>
                              <RadzenDataGridColumn Width="50px"  TItem="Mapping" Property="Options" Title="Options">
                                  <Template Context="data">   
                                      @if (data.Operator == null)
                                      {
                                           <RadzenButton Icon="edit_square"></RadzenButton>
                                           <RadzenButton Icon="delete"></RadzenButton>
                                      }
                                      else
                                      {
                                           <RadzenButton Icon="note_add"></RadzenButton>
                                      }
                                     
                                  </Template>
                              </RadzenDataGridColumn>
                          </Column>
</RadzenDataGrid>

Here is the C# code:

 void RowRender(RowRenderEventArgs<Mapping> args)
    {
        args.Expandable = args.Data.people.Count != 0 ? true : false;
    }
   
    void LoadChildData(DataGridLoadChildDataEventArgs<Mapping> args)
    {
        args.Data = args.Item.people.Select(e => (Mapping)e).ToList();
    }

EDIT: I have fixed Problem 1 (disallowing virtualization) but the datagrid only renders on startup

4

INFO: I have fixed all problems. The 2nd problem was related to C# code.

5

@GoogleUser247-1 I have 2 data grids like a master-detail. When I add a new row to the detail and save, the parent row collapses. After saving data, I keep focus on the current page but couldn't figure it out how to make is stay expanded.