A few issues using DropDownDataGrid

Radzen.Blazor Components
1

Items 1, 2b, and 3 are shown in the gif below.

Item 1 is specifically using DropDownDataGrid in a DataGrid FilterTemplate

  1. Unchecking the last checked item generates a DataGrid SQL Where of "0 = 1" and returns zero rows. After that, the only way to return all rows again is to check another item, then click the "X" to Clear them all.
    Is there any way to reset the filter upon unchecking the last item so it instead defaults back to show all like on load?
  2. a. Attempting to reset the filter by setting the @bind-Value property to new List<string>():
    This has the same behavior as item 1 and returns zero rows
    b. Attempting to reset the filter by setting the @bind-Value property to null:
    This does reset the filter (temporarily), but it leaves the Label and the Search box with text still. Is there anyway to clear the Label and Search box programmatically? I've been able to workaround this by clearing the Label with jQuery, but am unable to clear the Search box.
  3. Also related to setting the @bind-Value property to null, even though it did temporarily reset the filter, after clicking another Item it will re-check the original item as well.

Untitled_ Jun 21, 2022 7_41 PM (1)

<h1>DataGrid <strong>LoadData</strong></h1>

<p>The <code>LoadData</code> event allows you to perform custom paging, sorting and filtering.</p>
<div class="row">
    <div class="col-md-8">
        <RadzenButton Text="Reset" Click="@Reset" Style="margin-bottom: 20px;" />
        <RadzenDataGrid style="height: 335px" @ref="grid" IsLoading=@isLoading Count="@count" Data="@staff" LoadData="@LoadData" FilterMode="FilterMode.Advanced"
                        AllowSorting="true" AllowFiltering="true" AllowPaging="true" PageSize="10" PagerHorizontalAlign="HorizontalAlign.Justify"
                        PagerPosition="PagerPosition.Top" TItem="StaffSearchView" ColumnWidth="200px" ShowPagingSummary="true">
            <Columns>
                <RadzenDataGridColumn TItem="StaffSearchView" Property="StaffNumber" Filterable="false" Title="ID" Frozen="true" Width="70px" TextAlign="TextAlign.Center" />
                <RadzenDataGridColumn TItem="StaffSearchView" Property="GroupName" Title="Group"
                                      Type="typeof(IEnumerable<string>)" FilterValue="@selectedGroups" FilterOperator="FilterOperator.Contains" Width="200px">
                    <FilterTemplate>
                        <RadzenDropDownDataGrid @ref="gridGroups" AllowRowSelectOnRowClick="false" AllowFiltering="true" PageSize="10"
                                                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowClear="true" @bind-Value=@selectedGroups
                                                Multiple="true" Placeholder="Select..." Data=@groups TextProperty="GroupName" ValueProperty="GroupName"
                                                Style="width: 300px">
                            <Columns>
                                <RadzenDropDownDataGridColumn Width="40px" Sortable="false">
                                    <Template Context="groupData">
                                        <RadzenCheckBox TriState="false" Value="@(selectedGroups != null && selectedGroups.Contains(((GroupSetting) groupData).GroupName))"
                                                        TValue="bool" Change=@(args => { gridGroups.SelectItem(groupData); }) />
                                    </Template>
                                </RadzenDropDownDataGridColumn>
                                <RadzenDropDownDataGridColumn Property="GroupName" Title="Group" Width="200px" />
                            </Columns>
                        </RadzenDropDownDataGrid>
                    </FilterTemplate>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="StaffSearchView" Property="AccessLevel" Filterable="false" Title="Active" Width="70px" TextAlign="TextAlign.Center" />
            </Columns>
        </RadzenDataGrid>
    </div>
</div>

@code {
    RadzenDataGrid<StaffSearchView> grid;
    int count;
    IEnumerable<StaffSearchView> staff;
    bool isLoading = false;

    IEnumerable<string> selectedGroups;

    private RadzenDropDownDataGrid<IEnumerable<string>> gridGroups;
    IEnumerable<GroupSetting> groups;


    protected override async Task OnInitializedAsync()
    {
        groups = await GroupSettingRepository.GetAllAsync(s => s.GroupStatus == true, s => s.OrderBy(x => x.GroupName));
    }

    void OnSelectedTitlesChange(object value)
    {
        if (selectedGroups != null && !selectedGroups.Any())
        {
            selectedGroups = null;
        }
    }

    async Task Reset()
    {
        selectedGroups = null;
        grid.Reset(true);
        await grid.FirstPage(true);
    }

    async Task LoadData(LoadDataArgs args)
    {
        isLoading = true;
        await Task.Yield();

        var query = StaffRepository.GetStaffSearchQuery(orderBy: s => s.OrderBy(x => x.LastName));

        if (!string.IsNullOrEmpty(args.Filter))
        {
            query = query.Where(args.Filter);
        }
        if (!string.IsNullOrEmpty(args.OrderBy))
        {
            query = query.OrderBy(args.OrderBy);
        }

        count = query.Count();
        staff = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();

        isLoading = false;
    }
}
2

Unfortunately we cannot run your code since there are missing stuff. If you have Radzen subscription you can send us runnable application demonstrating your case. We will debug it and we will let you know our findings.

3

Reset selection with null fix will be part of our next update before the end of the week.

1 Like
4

@enchev

Thank you.

Here is the complete code that will show all the issues above using the NorthwindContext so it will run as is.

Gif:
https://imgur.com/a/YkLgkDZ

@page "/test"

@using System.Linq.Dynamic.Core
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind

@inject NorthwindContext dbContext

<h1>DataGrid <strong>LoadData</strong></h1>

<p>The <code>LoadData</code> event allows you to perform custom paging, sorting and filtering.</p>
<div class="row">
    <div class="col-md-8">
        <RadzenButton Text="Reset" Click="@Reset" Style="margin-bottom: 20px;" />
        <RadzenDataGrid style="height: 335px" @ref="grid" IsLoading=@isLoading Count="@count" Data="@employees" LoadData="@LoadData" FilterMode="FilterMode.Advanced"
                        AllowSorting="true" AllowFiltering="true" AllowPaging="true" PageSize="10" PagerHorizontalAlign="HorizontalAlign.Justify"
                        PagerPosition="PagerPosition.Top" TItem="Employee" ColumnWidth="200px" ShowPagingSummary="true">
            <Columns>
                <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="70px" TextAlign="TextAlign.Center" />
                <RadzenDataGridColumn TItem="Employee" Title="Photo" Frozen="true" Sortable="false" Filterable="false" Width="60px">
                    <Template Context="data">
                        <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                    </Template>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" Frozen="true" Width="140px" />
                <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="140px" />
                <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title"
                                      Type="typeof(IEnumerable<string>)" FilterValue="@selectedTitles" FilterOperator="FilterOperator.Contains" Width="200px">
                    <FilterTemplate>
                        <RadzenDropDownDataGrid @ref="gridTitles" AllowRowSelectOnRowClick="@allowRowSelectOnRowClick" AllowFiltering="true"
                                                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowClear="true" @bind-Value=@selectedTitles
                                                Multiple="true" Placeholder="Select..." Data=@employeeTitles TextProperty="Title" ValueProperty="Title"
                                                Style="width: 300px">
                            <Columns>
                                <RadzenDropDownDataGridColumn Width="40px" Sortable="false">
                                    <Template Context="data">
                                            <RadzenCheckBox TriState="false" Value="@(selectedTitles != null && selectedTitles.Contains(((Employee) data).Title))"
                                                TValue="bool" Change=@(args => { if(!allowRowSelectOnRowClick) { gridTitles.SelectItem(data); }}) />
                                    </Template>
                                </RadzenDropDownDataGridColumn>
                                <RadzenDropDownDataGridColumn Property="Title" Title="Title" Width="200px" />
                            </Columns>
                        </RadzenDropDownDataGrid>
                    </FilterTemplate>
                </RadzenDataGridColumn>
            </Columns>
        </RadzenDataGrid>
    </div>
</div>

@code {
    RadzenDataGrid<Employee> grid;
    int count;
    IEnumerable<Employee> employees;
    IEnumerable<Employee> employeeTitles;
    bool isLoading = false;

    IEnumerable<string> selectedTitles;

    bool allowRowSelectOnRowClick = true;
    RadzenDropDownDataGrid<IEnumerable<string>> gridTitles;

    private List<int> distinctTitles = new List<int> { 1, 2, 5, 8 };
    protected override void OnInitialized()
    {
        // quick filtering just for a distinct list of Titles
        employeeTitles = dbContext.Employees.Where(x => distinctTitles.Contains(x.EmployeeID)).ToList();
    }

    void OnSelectedTitlesChange(object value)
    {
        if (selectedTitles != null && !selectedTitles.Any())
        {
            selectedTitles = null;
        }
    }

    async Task Reset()
    {
        selectedTitles = null;
        grid.Reset(true);
        await grid.FirstPage(true);
    }

    async Task LoadData(LoadDataArgs args)
    {
        isLoading = true;
        await Task.Yield();

        var query = dbContext.Employees.AsQueryable();

        if (!string.IsNullOrEmpty(args.Filter))
        {
            query = query.Where(args.Filter);
        }
        if (!string.IsNullOrEmpty(args.OrderBy))
        {
            query = query.OrderBy(args.OrderBy);
        }

        count = query.Count();

        employees = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();

        isLoading = false;
    }
}
5

Your code will start to work properly if you just attach the event as shown in our demo:

image
image1920×1080 441 KB

dddg-filter

1 Like
6