DataFilter with LoadData

Radzen.Blazor Components
1

I would like to use a DataFilter in combination of a DataGrid's LoadData event.

Your Demo with LoadData is using Odata which I do not need.

I'm not seeing an extension method or a built-in way to convert the DataFilter's Filters collection into a string for the IQueryable Where function.

Am I missing something obvious or is that code protected away within the components?

2

You can check this demo for reference:
https://blazor.radzen.com/datagrid-loaddata

3

Sorry but I feel like I'm still missing the obvious connection somewhere. I've included your DataFilter demo page modified to use LoadData, with my comment at the place where I'm missing something.

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

@inherits DbContextPage

<RadzenStack Gap="2rem">
    <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center" Class="rz-p-4 rz-border-radius-1" Style="border: var(--rz-grid-cell-border);">
        <RadzenCheckBox @bind-Value="@auto" Name="auto" />
        <RadzenLabel Text="Auto filter" Component="auto" Class="rz-me-6" />
        <RadzenButton Text="Apply Filter" Click="@(args => dataFilter.Filter())" Disabled="@auto" Size="ButtonSize.Small" />
    </RadzenStack>

    <RadzenDataFilter @ref="dataFilter" Auto=auto Data="@orders" TItem="Order" ViewChanged=@(view => ordersGrid.Reload())>
        <Properties>
            <RadzenDataFilterProperty TItem="Order" Property="OrderID" Title="Order ID" FilterValue="@selectedIds" 
                Type="typeof(IEnumerable<int>)" FilterOperator="FilterOperator.Contains">
                <FilterTemplate>
                        <RadzenDropDown @bind-Value=@selectedIds Style="width:100%;"
                        Change=@OnSelectedIdsChange Data="@(orderIds)" AllowClear="true" Multiple="true" />
                </FilterTemplate>
            </RadzenDataFilterProperty>
            <RadzenDataFilterProperty TItem="Order" Property="Employee.LastName" Title="Employee Last Name" />
            <MyCustomDataFilterProperty TItem="Order" Property="OrderDate" Title="Order Date" />
            <RadzenDataFilterProperty TItem="Order" Property="Freight" Title="Freight" />
        </Properties>
    </RadzenDataFilter>

    <RadzenDataGrid @ref="ordersGrid" AllowPaging="true" AllowSorting="true" Data="@(filteredOrders)" TItem="Order"
        ColumnWidth="200px" PageSize="20" Style="height: 500px" LoadData="@LoadData" Count="@count" IsLoading="@isLoading">
        <Columns>
            <RadzenDataGridColumn Width="200px" TItem="Order" Property="OrderID" Title="Order ID" />
            <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
            <RadzenDataGridColumn TItem="Order" Property="Employee.LastName" Title="Employee">
                <Template Context="order">
                    @order.Employee?.FirstName @order.Employee?.LastName
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date" FormatString="{0:d}" />
            <RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight">
                <Template Context="order">
                    @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
                </Template>
            </RadzenDataGridColumn>
            <RadzenDataGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
        </Columns>
    </RadzenDataGrid>
</RadzenStack>

@code {
    bool auto = true;
    RadzenDataFilter<Order> dataFilter;

    IEnumerable<Order> filteredOrders;
    IEnumerable<Order> orders;
    RadzenDataGrid<Order> ordersGrid;

    IEnumerable<int> selectedIds;
    IEnumerable<int> orderIds;

    bool isLoading;
    int count;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        orders = Enumerable.Empty<Order>();
    }

    void OnSelectedIdsChange(object value)
    {
        if (selectedIds != null && !selectedIds.Any())
        {
            selectedIds = null;
        }
    }

    void LoadData(LoadDataArgs args)
    {
        isLoading = true;

        var query = dbContext.Orders.Include("Customer").Include("Employee").AsQueryable();

        if (dataFilter.Filters.Any())
        {
            // here is where I am stuck
            query = query.Where("How do I pass in the DataFilter Filters here?");
        }

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

        count = query.Count();

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

        orderIds = filteredOrders.Select(o => o.OrderID).Distinct();

        isLoading = false;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            await dataFilter.AddFilter(new CompositeFilterDescriptor() 
            { 
                Property = "Employee.LastName", 
                FilterValue = "Buchanan", 
                FilterOperator = FilterOperator.Contains 
            });
        }
    }
}
4

I've just added new demo on how to use DataGrid LoadData together with DataFilter filtering:
https://blazor.radzen.com/datafilter-loaddata

1 Like
5

Of course the obvious piece I was missing was just literally passing in the reference to the DataFilter :laughing:

Thank you!

I was able to pull from the repo to see your source code, however FYI it looks like the source on the Blazor data filter with LoadData page is still pointing to the OData code.

6

Thanks! Should be OK now!

7

I did find one more missing piece.
The includes: .Include("Customer").Include("Employee")

var query = dbContext.Orders.Include("Customer").Include("Employee").AsQueryable();