DataGrid behaviour collapse and filtering behaviour

I have a DataGrid setup as per the Hierarchy example where drilling down with the arrowhead on the left side expands beneath the row. This detail sections also contains a DataGrid with filtering using a drop down list.

  1. Once I click the expand arrow it's locked and doesn't compress unless I expand another row. Is it possible to make it collapsible by clicking it again?

  2. Every time I select an option on the nested grid it resets the view of the whole pages compressing everything and I have to re-expand the outer grid's row again.Can it be set to not collapse?

Hi @steveski,

Thanks for the report! It will be fixed in our next update later today.

I’m not sure what you mean, I didn’t raise a bug. Have you raised a bug based on my question?

Are both of my questions indicating defects?

The first question was actually a bug (item cannot be collapsed in single ExpandMode) - already fixed. I’m not sure about your second question. Can you provide more info, screenshot, code example?

Here a video showing the behaviour. I want to leave the expanded row open when filtering the inner table. https://youtu.be/mVJf7cZ3f0Y

This is the template generating that page:

@if (_resourceResultsModel == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="resource-results-table">
        <RadzenGrid AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowPaging="true" PageSize="50"
                    AllowSorting="true" TItem="ResourceViewModel" ColumnWidth="100px" ExpandMode="DataGridExpandMode.Single"
                    Data="@(_resourceResultsModel.Where(e => _currentResourceType > 0 ? e.ResourceType == _currentResourceType : true))">
            <Template Context="resource">
                <RadzenCard Style="margin-bottom: 20px;">
                    <b>Results - @resource.Results.Count() rules evaluated</b>
                </RadzenCard>
                <RadzenGrid AllowFiltering="true" AllowSorting="true" TItem="ResultViewModel" Style="margin-left: 30px; margin-right: 30px;"
                            Data="@(resource.Results.Where(e => _currentRuleResult > 0 ? e.Result == _currentRuleResult : true))">
                    <Columns>
                        <RadzenGridColumn TItem="ResultViewModel" Property="RuleName" Title="Rule Name" Width="30%">
                            <Template Context="data">
                                <div style="white-space: normal;">
                                    <RadzenLink Path="@data.RuleDocumentationUri?.ToString()" Text="@data.RuleName" />
                                </div>
                            </Template>
                        </RadzenGridColumn>
                        <RadzenGridColumn TItem="ResultViewModel" Property="Message" Title="Message">
                            <FilterTemplate>
                                <RadzenDropDown @bind-Value="@_currentRuleResult" TextProperty="Text" ValueProperty="Value" Style="width:100%"
                                                     Data="@(Enum.GetValues(typeof(RuleResultType)).Cast<RuleResultType>().Select(t => new { Text = t, Value = t }))" />

                            </FilterTemplate>
                            <Template Context="data">
                                <div>
                                    @if (data.Result == RuleResultType.Success)
                                    {
                                        <span class="badge badge-success">Success</span>
                                    }
                                    @if (data.Result == RuleResultType.Warning)
                                    {
                                        <span class="badge badge-warning">Warning</span>
                                    }
                                    @if (data.Result == RuleResultType.Failure)
                                    {
                                        <span class="badge badge-danger">Failure</span>
                                    }
                                    @if (data.Result == RuleResultType.Ignore)
                                    {
                                        <span class="badge badge-secondary">Ignore</span>
                                    }
                                </div>
                                <div style="white-space: normal;">
                                    @data.Message
                                </div>
                            </Template>
                        </RadzenGridColumn>
                        @if (resource.UserIsAdmin)
                        {
                            <RadzenGridColumn TItem="ResultViewModel" Title="Actions" Width="150px">
                                <Template Context="data">

                                    <RadzenSplitButton Click="@((args) => ActionsClick(args, data.RuleId, data.RuleIdentifier, data.ResourceType, data.Resource))" Icon="account_circle" Style="margin-bottom: 20px;">
                                        <ChildContent>
                                            <RadzenSplitButtonItem Text="Evaluate" Value="ev" Icon="repeat" />
                                            @if (data.CanApplyRule)
                                            {
                                                <RadzenSplitButtonItem Text="Apply" Value="ap" Icon="play_arrow" />
                                            }
                                            <RadzenSplitButtonItem Text="Ignore" Value="ig" Icon="stop" />
                                        </ChildContent>
                                    </RadzenSplitButton>

                                </Template>
                            </RadzenGridColumn>
                        }
                    </Columns>
                </RadzenGrid>
            </Template>
            <Columns>
                <RadzenGridColumn TItem="ResourceViewModel" Property="Resource" Title="Resource" Width="400px">
                    <Template Context="data">
                        <div style="white-space: normal;">
                            <span style="margin-right: 10px;">
                                <img src="images/@(data.IconName).svg"
                                     alt="triangle with all three sides equal"
                                     width="24"
                                     height="21" />
                            </span>
                            <RadzenLink Path="@data.ResourceUri?.ToString()" Text="@data.Resource" />
                            <span class="badge badge-success resource-badge">@data.SuccessCount</span>
                            <span class="badge badge-warning resource-badge">@data.WarningCount</span>
                            <span class="badge badge-danger resource-badge">@data.FailureCount</span>
                            <span class="badge badge-secondary resource-badge">@data.IgnoreCount</span>
                        </div>
                    </Template>
                </RadzenGridColumn>
                <RadzenGridColumn TItem="ResourceViewModel" Property="ResourceType" Title="Resource Type">
                    <FilterTemplate>
                        <RadzenDropDown @bind-Value="@_currentResourceType" TextProperty="Text" ValueProperty="Value" Style="width:100%"
                                        Data="@(Enum.GetValues(typeof(ResourceType)).Cast<ResourceType>().Select(t => new { Text = t, Value = t }))" />

                    </FilterTemplate>
                </RadzenGridColumn>
            </Columns>
        </RadzenGrid>
    </div>

Any thoughts on why my inner grid drop down filtering is collapsing the parent grid row?

Figured I'd add my own affirmation of a bug/issue with the grid behavior since it appears to be a similar problem.

I am having a similar issue with the DataGrid. I am using a hierarchy model as well. The main grid, when it expands a row, templates a RadzenCard followed immediately by a RadzenTabs containing 3 RadzenTabItems. One of the RadzenTabItems contains another DataGrid, and expanding a row in this grid templates another card and set of tabs.

Both grids are set up for inline editing and the elements in the tabs when rows are expanded are editable as well when the corresponding grid row is edited. Everything works fine on the outer grid, the row remains open during editing, however, the inner subgrid collapses the row when any edit is done to controls either in the grid row or in the tabs which are present in the expanded row.

I need the grids to keep their rows open during edit as well.

Please note, I did get the 2.11.17 NuGet package update which corrected the first issue you listed, but I see now that there is an update for version 2.12.1. I intend to update and see if the issue has been corrected.

UPDATE:

I downloaded the 2.12.1 NuGet package and, from my initial testing, it appears that the behavior has been corrected. You might wish to upgrade to the latest version to see if this handles your particular issue as well.