DataGrid behaviour collapse and filtering behaviour

Radzen Studio Blazor Server
1

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?

2

Hi @steveski,

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

3

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?

4

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?

5

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>
6

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

7

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.

8

Hello,

I have NuGet package version 3.2.3 and using the ExpandMode="DataGridExpandMode.Single" on my datagrid. When I click the carrot the row expands. When I click the carrot again, the row is not collapsing. Is this a bug or am I doing something wrong?

Here is the code for the pertinent section:
<RadzenGrid @ref="portfolioGrid" AllowFiltering="true" AllowPaging="true" AllowSorting="true" PageSize="10" ExpandMode="DataGridExpandMode.Single"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@filteredLoans" TItem="LenderPortfolio" ColumnWidth="100px">



                                </RadzenTabsItem>
                                <RadzenTabsItem Text="Loan Activity">
                                    <LoanHistory RecId=@data.RecID/>
                                </RadzenTabsItem>
                                <RadzenTabsItem Text="Call Logs">
                                    <LoanConversation Loan=@data />
                                </RadzenTabsItem>
                                <RadzenTabsItem Text="Loan Charges">
                                    <LoanCharges RecId=@data.RecID />
                                </RadzenTabsItem>
                                <RadzenTabsItem Text="Loan Attachments">
                                    <LoanDocuments RecId=@data.RecID />
                                </RadzenTabsItem>
                            </Tabs>
                        </RadzenTabs>
                    </Template>
9

I'm having the same problem on 3.2.6.
I ended up having to bind to the RowExpand and RowCollapse events. The RowCollapse gets raised if a row gets open (the same row or a different row)
When you click the same row that is already expanded

  1. Collapsed gets raised
    then
  2. Expand gets raised
    Once expand gets raised, you check to see if
    --. A collapse was just called and
    -- If it was the same row. If so, then reset the grid ( gridObj.Reset(false, true) )
    int expandedTeamId = 0;
    bool recentCollapse = false;

    void RowSelect(Team team)
    {
        //workaround to close row, as there is a current bug in radzen
        //If we did not select the same row, continue as normal
        if (!recentCollapse || team.Id != expandedTeamId)
        {
           //fetch data
           //.........
           expandedTeamId = team.Id
        }
        else
        {
            teamsGrid.Reset(false, true);
            recentCollapse = false;
        }
    }
void RowCollapse(Team team)
{
    recentCollapse = true;
}

Might be an easier way... but this works for me until a fix is in place