DataGrid expansion odd behavior

Radzen.Blazor Components
1

Hi,

I am using 4.10.3 of the Blazor components. I have a datagrid with expandable rows. Within a column I have a Radzen switch for toggling a value. The switch is in the 'master', not in the children/expansion template. When the row is expanded and I toggle the switch then the row collapses. The toggle in front of the row is still showing it is expanded. Furthermore, clicking on the toggle makes no difference, I can't expand the row again.

2

This is probably a click event propagation issue and @onclick:stopPropagation would fix it. We could tell more if you provide some code that reproduces the problem.

3 
 <RadzenDataGrid @ref=DataGridRef Data="@SortedAgents" TItem="Agent" AllowColumnResize="true" AllowFiltering="true" ExpandMode="DataGridExpandMode.Single" GridLines="DataGridGridLines.None"  Responsive="true">
        <Template Context="agent">
            <div class="table-responsive-md">
                <table class="table table-bordered">
                </table>
            </div>
        </Template>
    <Columns>
        <RadzenDataGridColumn TItem="Agent" Title="Name" Resizable="true" Filterable="true" Property="Name" >
                <Template Context="data">
                    <RadzenTextBox  @bind-Value="@data.Name"  MaxLength="40"/>
                </Template>
        </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="Agent" Resizable="true" Title="Enabled" Width="80px" Filterable="false">
            <Template Context="data">
                    <RadzenSwitch @bind-Value="@data.Enabled" Placeholder="Enable agent" @onclick:stopPropagation />
            </Template>
         </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

This shows the behavior. When you open a row and then click on the Radzen switch. The stopPropagation did not fix the issue. All I can tell is that clicking the switch, or modifying the text in the textbox, triggers a render event. This appears to result in the row being partially rendered as expanded (the toggle is still pointing downward) and partially rendered as collapsed (the template content is not shown).

4

Anything else I can do to pinpoint this issue? At this point my best alternative is resorting to bootstrap but the point of using UI components is that more complex grid use cases are quicker and easier to build.

6

Did you ever figure this out? I noticed it happens due to the component rerendering while expanded and can't seem to figure out how to fix it...

7

No, I actually did end up using bootstrap accordion instead.