DataGrid FilterTemplate Question

Hello workaholic people,

I am using a data grid and want to use a custom Column FilterTemplate like in your sample. (Blazor DataGrid custom filtering)
I want to use a filter template in my data grid for the VendorName column. Unlike your example, I pull data from a database.

Here is my data grid:

<RadzenTabsItem Text="Order Details">
            <RadzenDataGrid @ref="_grid" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@_orders" TItem="ReportViewModel"
                            PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" AllowColumnResize="true" FilterMode="FilterMode.Simple"
                            AllowVirtualization="true" Style="width: calc(100vw - 120px);" ColumnWidth="170px" PageSize="5" >

                <Columns>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderId" Title="Order ID" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerName" Title="Customer"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" Width="100px">
                        <Template Context="ReportViewModel">
                            @($"{ReportViewModel.OrderDateTime:dd/MM/yyyy}")
                        </Template>

                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Status" Title="Status" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="DoneBy" Title="Employee"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailId" Title="Product Number"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ProductCode" Title="Code" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ProductName" Title="Product" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="VendorName" Title="Vendor" >
                    <FilterTemplate>
                        <RadzenDropDown @bind-Value=@selectedVendors Style="width:100%;"
                                        Change=@OnSelectedVendorsChange Data="@(_vendors)" AllowClear="true" Multiple="true" />
                    </FilterTemplate>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Quantity" Title="Quantity" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="BuyUnitPrice" Title="Buy Unit Price"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="CostRatio" Title="Cost Ratio" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" >
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.UnitCost)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.UnitCost)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.UnitCost)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TotalBuyPrice" Title="Total Buy" Width="100px">
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="SellUnitPrice" Title="Sell Unit" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell" >
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ShippingNumber" Title="Shipping Number" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailStatus" Title="Status" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TrackingNumber" Title="Tracking" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Currency" Title="Currency" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px">
                        <Template Context="order">
                            <RadzenButton Icon="print" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => OpenOrder(order))">
                            </RadzenButton>
                        </Template>
                    </RadzenDataGridColumn>

                </Columns>
            </RadzenDataGrid>

Here is the related code:

IEnumerable<ReportViewModel?> _orders = new List<ReportViewModel?>();
    IEnumerable<Vendor?> _vendors = new List<Vendor?>();
    IEnumerable<Customer?> _customers;
    ClaimsPrincipal user;
    IEnumerable<Vendor?> selectedVendors;

    protected override async Task OnInitializedAsync()
    {
        user = (await _authenticationStateProvider.GetAuthenticationStateAsync()).User;

    
        if (!user.Identity.IsAuthenticated)
        {
            NavigationManager.NavigateTo("/Identity/Account/Login", false);
        }
        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);
        _vendors = await ViewAllVendorsUseCase.ExecuteAsync();
        _customers = await ViewAllCustomersUseCase.ExecuteAsync();
        //_grid.OrderBy("OrderId");
    }

Here is sample vendors:

How can I filter template by vendor names in my data grid? I kindly request your support in this matter.

There are at least two more examples with custom filtering using FilterTemplate that are pulling data from database using DbContext and even OData service:

Thank you @enchev. I tried to do it as per the LoadData example but was unable to select it from the list. Why could it be this way? Can i ask for support?

Here is the page:

@page "/report"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Customer
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Interfaces.Vendor
@using Microsoft.AspNetCore.Components
@using System.Globalization
@using System.Security.Claims

@inject NavigationManager NavigationManager
@inject ILogger<ExportOrders> Logger
@inject IWebHostEnvironment Environment
@inject IViewAllOrdersUseCase ViewAllOrdersUseCase
@inject IViewAllVendorsUseCase ViewAllVendorsUseCase
@inject IGetOrdersExportUseCase GetOrdersExportUseCase
@inject IViewAllCustomersUseCase ViewAllCustomersUseCase
@inject DialogService DialogService
@inject AuthenticationStateProvider _authenticationStateProvider
@implements IDisposable
<style>
    .btns {
        padding: 5px;
        width: calc(9% - 10px);
    }
    

</style>

<h1>Search Orders</h1>
<br/>
<RadzenCard Style="background-color: snow;">
    <h3 class="h5">
        Filters 
    </h3>
<div class="m-4">
    <div class="row g-6">
        
        
        <div class="col-2">
            <label class="form-label">Vendor</label>
            <RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"
                                    Data=@_vendors Count="5" TextProperty="Name" ValueProperty="Id" Change=@(args => OnChange(args))
                                    Class="w-100"/>

        </div>
        <div class="col-2">
            <label class="form-label">Order Date Start</label>
            <RadzenDatePicker @bind-Value=@startValue DateFormat="d" Class="w-100" Change=@(args => OnStartDateChange(args)) />
        </div>
        <div class="col-2">
            <label class="form-label">Order Date End</label>
            <RadzenDatePicker @bind-Value=@endValue DateFormat="d" Class="w-100" Change=@(args => OnEndDateChange(args)) />
        </div>
        <div class="col-2">
            <label class="form-label">Order Status</label>
            <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@orderStatusList Name="Status" Change=@(args => OnStatusChange(args))/>
        </div>
        <div class="col-2">
            <label class="form-label">Detail Status</label>
            <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@detailStatusList Name="Status" Change=@(args => OnDetailStatusChange(args)) />
        </div>
        <div class="col-2">
            <label class="form-label">Customer</label>
            <RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"
                                    Data=@_customers Count="5" TextProperty="Name" ValueProperty="Id" Change=@(args => OnCustomerChange(args))
                                    Class="w-100"/>

        </div>
    </div>
    <div class="mt-5">
        <div class="d-flex flex-grow-1 justify-content-center align-items-center">
            <button type="button" class="btn btn-primary btns" @onclick="ExportExcel">
                Search
            </button>
        </div>
    </div>
</div>
</RadzenCard>
<RadzenTabs>
    <Tabs>
        <RadzenTabsItem Text="Order Details">
            <RadzenDataGrid @ref="_grid" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@_orders" TItem="ReportViewModel"
                            PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" AllowColumnResize="true" 
                            AllowVirtualization="true" Style="width: calc(100vw - 120px);" ColumnWidth="170px" PageSize="5" >

                <Columns>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderId" Title="Order ID" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerName" Title="Customer"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" Width="100px">
                        <Template Context="ReportViewModel">
                            @($"{ReportViewModel.OrderDateTime:dd/MM/yyyy}")
                        </Template>

                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Status" Title="Status" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="DoneBy" Title="Employee"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailId" Title="Product Number"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ProductCode" Title="Code" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ProductName" Title="Product" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="VendorName" Title="Vendor" 
                                          Type="typeof(IEnumerable<string>)" FilterValue="@selectedVendors" FilterOperator="FilterOperator.Contains">
                    <FilterTemplate>
                            <RadzenDropDown Style="width:100%;" @bind-Value=@selectedVendors 
                            Change=@OnSelectedVendorsChange Data="@_vendors.Select(x => x.Name).ToList()" AllowClear="true" Multiple="true" />
                    </FilterTemplate>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Quantity" Title="Quantity" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="BuyUnitPrice" Title="Buy Unit Price"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="CostRatio" Title="Cost Ratio" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" >
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.UnitCost)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.UnitCost)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.UnitCost)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TotalBuyPrice" Title="Total Buy" Width="100px">
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="SellUnitPrice" Title="Sell Unit" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell" >
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ShippingNumber" Title="Shipping Number" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailStatus" Title="Status" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TrackingNumber" Title="Tracking" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Currency" Title="Currency" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px">
                        <Template Context="order">
                            <RadzenButton Icon="print" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => OpenOrder(order))">
                            </RadzenButton>
                        </Template>
                    </RadzenDataGridColumn>

                </Columns>
            </RadzenDataGrid>
        </RadzenTabsItem>

    </Tabs>
</RadzenTabs>
@code {
    RadzenDataGrid<ReportViewModel?> _grid;
    ReportViewModel reportViewModel;
    DateTime? startValue = DateTime.Now.Date;
    DateTime? endValue = DateTime.Now.Date;
    DateTime? _startDate;
    DateTime? _endDate;
    string? _status;
    string? _detailStatus;
    int _vendorId;
    int _customerId;
    int orderID;
    readonly List<string> orderStatusList = new() { "Continues", "Cancelled", "Completed" };
    readonly List<string> detailStatusList = new() { "At customs", "Being supplied", "Cancelled", "Completed", "Getting ready", "In warehouse", "Shipped" };
    IEnumerable<ReportViewModel?> _orders = new List<ReportViewModel?>();
    IEnumerable<Vendor?> _vendors = new List<Vendor?>();
    IEnumerable<Customer?> _customers;
    ClaimsPrincipal user;
    IEnumerable<string?> selectedVendors;

    protected override async Task OnInitializedAsync()
    {
        user = (await _authenticationStateProvider.GetAuthenticationStateAsync()).User;

    
        if (!user.Identity.IsAuthenticated)
        {
            NavigationManager.NavigateTo("/Identity/Account/Login", false);
        }
        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);
        _vendors = await ViewAllVendorsUseCase.ExecuteAsync();
        _customers = await ViewAllCustomersUseCase.ExecuteAsync();
        //_grid.OrderBy("OrderId");

    }
    async Task OnSelectedVendorsChange(object value)
    {
        if (selectedVendors != null && !selectedVendors.Any())
        {
            selectedVendors = null;
        }
        await _grid.FirstPage();
    }

    public void Dispose()
    {
        // The DialogService is a singleton so it is advisable to unsubscribe.
        DialogService.Dispose();

    }
    void OnChange(object vendor)
    {
        _vendorId = Int32.Parse(vendor.ToString());

    }
    void OnCustomerChange(object customer)
    {
        _customerId = Int32.Parse(customer.ToString());

    }
    void OnStartDateChange(DateTime? value)
    {
        if(value != null){
            _startDate = value;
        }else{
            _startDate = null;
        }

    }
    void OnEndDateChange(DateTime? value)
    {
        if (value != null)
        {
            _endDate = value;
        }
        else
        {
            _endDate = null;
        }
    }
    void OnStatusChange(object status){
        if(status != null){
            _status = status.ToString();
        }else{
            _status = null;
        }

    }
    void OnDetailStatusChange(object status){
        if(status != null){
            _detailStatus = status.ToString();
        }else{
            _detailStatus = null;
        }

    }
    private async Task ExportExcel()
    {
        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);

    }

    private async Task OpenOrder(object args)
    {
        reportViewModel = (ReportViewModel)args;
        await DialogService.OpenAsync<DialogCardPage>($"Order: {reportViewModel.OrderId}",
            new Dictionary<string, object>() { { "Order", reportViewModel } },
            new DialogOptions() { Width = "899px", Height = "685px", Resizable = true, Draggable = true });
    }
}

Unable to select:

Not sure what else we can do except to show you our example. We provide dedicated support for Radzen paid customers only:

I don't understand why the list is not selectable :slight_smile:

The usage in the example you showed was not quite clear to me. I tried to do it this way but on the data grid, LoadData and OnInitializedAsync can't be used together? I can choose from the list in the drop down, but this time, when the page is loaded, data does not appear in the data grid.

Here is the page:

@page "/report"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Customer
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Interfaces.Vendor
@using Microsoft.AspNetCore.Components
@using System.Globalization
@using System.Linq.Dynamic.Core
@using System.Security.Claims

@inject NavigationManager NavigationManager
@inject ILogger<ExportOrders> Logger
@inject IWebHostEnvironment Environment
@inject IViewAllOrdersUseCase ViewAllOrdersUseCase
@inject IViewAllVendorsUseCase ViewAllVendorsUseCase
@inject IGetOrdersExportUseCase GetOrdersExportUseCase
@inject IViewAllCustomersUseCase ViewAllCustomersUseCase
@inject DialogService DialogService
@inject AuthenticationStateProvider _authenticationStateProvider
@implements IDisposable
<style>
    .btns {
        padding: 5px;
        width: calc(9% - 10px);
    }
    

</style>

<h1>Search Orders</h1>
<br/>
<RadzenCard Style="background-color: snow;">
    <h3 class="h5">
        Filters 
    </h3>
<div class="m-4">
    <div class="row g-6">
        
        
        <div class="col-2">
            <label class="form-label">Vendor</label>
            <RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"
                                    Data=@_vendors Count="5" TextProperty="Name" ValueProperty="Id" Change=@(args => OnChange(args))
                                    Class="w-100"/>

        </div>
        <div class="col-2">
            <label class="form-label">Order Date Start</label>
            <RadzenDatePicker @bind-Value=@startValue DateFormat="d" Class="w-100" Change=@(args => OnStartDateChange(args)) />
        </div>
        <div class="col-2">
            <label class="form-label">Order Date End</label>
            <RadzenDatePicker @bind-Value=@endValue DateFormat="d" Class="w-100" Change=@(args => OnEndDateChange(args)) />
        </div>
        <div class="col-2">
            <label class="form-label">Order Status</label>
            <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@orderStatusList Name="Status" Change=@(args => OnStatusChange(args))/>
        </div>
        <div class="col-2">
            <label class="form-label">Detail Status</label>
            <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@detailStatusList Name="Status" Change=@(args => OnDetailStatusChange(args)) />
        </div>
        <div class="col-2">
            <label class="form-label">Customer</label>
            <RadzenDropDownDataGrid TValue="int" AllowFiltering="true" AllowClear="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains"
                                    Data=@_customers Count="5" TextProperty="Name" ValueProperty="Id" Change=@(args => OnCustomerChange(args))
                                    Class="w-100"/>

        </div>
    </div>
    <div class="mt-5">
        <div class="d-flex flex-grow-1 justify-content-center align-items-center">
            <button type="button" class="btn btn-primary btns" @onclick="ExportExcel">
                Search
            </button>
        </div>
    </div>
</div>
</RadzenCard>
<RadzenTabs>
    <Tabs>
        <RadzenTabsItem Text="Order Details">
            <RadzenDataGrid @ref="_grid" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@_orders" TItem="ReportViewModel"
                            PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" AllowColumnResize="true" 
                            AllowVirtualization="true" Style="width: calc(100vw - 120px);" ColumnWidth="170px" PageSize="5" IsLoading=@isLoading LoadData="@LoadData">

                <Columns>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderId" Title="Order ID" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerName" Title="Customer"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" Width="100px">
                        <Template Context="ReportViewModel">
                            @($"{ReportViewModel.OrderDateTime:dd/MM/yyyy}")
                        </Template>

                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Status" Title="Status" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="DoneBy" Title="Employee"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailId" Title="Product Number"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ProductCode" Title="Code" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ProductName" Title="Product" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="VendorName" Title="Vendor" 
                                          Type="typeof(IEnumerable<string>)" FilterValue="@selectedVendors" FilterOperator="FilterOperator.Contains">
                    <FilterTemplate>
                            <RadzenDropDown Style="width:100%;" @bind-Value=@selectedVendors Placeholder="Select..."
                            Change=@OnSelectedVendorsChange Data=@_vendors TextProperty="Name" ValueProperty="Id" AllowClear="true" Multiple="true" />
                    </FilterTemplate>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Quantity" Title="Quantity" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="BuyUnitPrice" Title="Buy Unit Price"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="CostRatio" Title="Cost Ratio" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" >
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.UnitCost)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.UnitCost)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.UnitCost)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TotalBuyPrice" Title="Total Buy" Width="100px">
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="SellUnitPrice" Title="Sell Unit" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell" >
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ShippingNumber" Title="Shipping Number" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailStatus" Title="Status" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TrackingNumber" Title="Tracking" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Currency" Title="Currency" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px">
                        <Template Context="order">
                            <RadzenButton Icon="print" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => OpenOrder(order))">
                            </RadzenButton>
                        </Template>
                    </RadzenDataGridColumn>

                </Columns>
            </RadzenDataGrid>
        </RadzenTabsItem>

    </Tabs>
</RadzenTabs>
@code {
    RadzenDataGrid<ReportViewModel?> _grid;
    ReportViewModel reportViewModel;
    DateTime? startValue = DateTime.Now.Date;
    DateTime? endValue = DateTime.Now.Date;
    DateTime? _startDate;
    DateTime? _endDate;
    string? _status;
    string? _detailStatus;
    int _vendorId;
    int _customerId;
    int orderID;
    readonly List<string> orderStatusList = new() { "Continues", "Cancelled", "Completed" };
    readonly List<string> detailStatusList = new() { "At customs", "Being supplied", "Cancelled", "Completed", "Getting ready", "In warehouse", "Shipped" };
    IEnumerable<ReportViewModel?> _orders = new List<ReportViewModel?>();
    IEnumerable<Vendor?> _vendors = new List<Vendor?>();
    IEnumerable<Customer?> _customers;
    ClaimsPrincipal user;
    IEnumerable<string?> selectedVendors;
    bool isLoading = false;

    protected override async Task OnInitializedAsync()
    {
        user = (await _authenticationStateProvider.GetAuthenticationStateAsync()).User;


        if (!user.Identity.IsAuthenticated)
        {
            NavigationManager.NavigateTo("/Identity/Account/Login", false);
        }

        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);
        _vendors = await ViewAllVendorsUseCase.ExecuteAsync();
        _customers = await ViewAllCustomersUseCase.ExecuteAsync();


    }
    async Task OnSelectedVendorsChange(object value)
    {
        if (selectedVendors != null && !selectedVendors.Any())
        {
            selectedVendors = null;
        }
       
        await _grid.FirstPage();
    }

    public void Dispose()
    {
        // The DialogService is a singleton so it is advisable to unsubscribe.
        DialogService.Dispose();

    }
    void OnChange(object vendor)
    {
        _vendorId = Int32.Parse(vendor.ToString());

    }
    void OnCustomerChange(object customer)
    {
        _customerId = Int32.Parse(customer.ToString());

    }
    void OnStartDateChange(DateTime? value)
    {
        if(value != null){
            _startDate = value;
        }else{
            _startDate = null;
        }

    }
    void OnEndDateChange(DateTime? value)
    {
        if (value != null)
        {
            _endDate = value;
        }
        else
        {
            _endDate = null;
        }
    }
    void OnStatusChange(object status){
        if(status != null){
            _status = status.ToString();
        }else{
            _status = null;
        }

    }
    void OnDetailStatusChange(object status){
        if(status != null){
            _detailStatus = status.ToString();
        }else{
            _detailStatus = null;
        }

    }
    private async Task ExportExcel()
    {
        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);

    }

    private async Task OpenOrder(object args)
    {
        reportViewModel = (ReportViewModel)args;
        await DialogService.OpenAsync<DialogCardPage>($"Order: {reportViewModel.OrderId}",
            new Dictionary<string, object>() { { "Order", reportViewModel } },
            new DialogOptions() { Width = "899px", Height = "685px", Resizable = true, Draggable = true });
    }
    async Task LoadData(LoadDataArgs args)
    {
        isLoading = true;
        await Task.Yield();
        //_orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);

        IQueryable<ReportViewModel?> query = (IQueryable<ReportViewModel?>)_orders; 

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

        _orders = query.ToList();

        isLoading = false;
    }
}

Hello,

I changed my code according to this example (data grid filter template). But I couldn't figure out why dropdown wasn't filtering the data grid from the list. Why do you think it might be caused? Can you help me?

Here is the related portion:

<RadzenDataGrid @ref="_grid" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@query" TItem="ReportViewModel"
                            PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" AllowColumnResize="true" 
                            AllowVirtualization="true" Style="width: calc(100vw - 120px);" ColumnWidth="170px" PageSize="5" >

                <Columns>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderId" Title="Order ID" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerName" Title="Customer"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" Width="100px">
                        <Template Context="ReportViewModel">
                            @($"{ReportViewModel.OrderDateTime:dd/MM/yyyy}")
                        </Template>

                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Status" Title="Status" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="DoneBy" Title="Employee"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailId" Title="Product Number"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ProductCode" Title="Code" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ProductName" Title="Product" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="VendorName" Title="Vendor" 
                                          Type="typeof(IEnumerable<string>)" FilterValue="@selectedVendors" FilterOperator="FilterOperator.Contains" LogicalFilterOperator="LogicalFilterOperator.Or" >
                    <FilterTemplate>
                            <RadzenDropDown Style="width:100%;" @bind-Value=@selectedVendors Placeholder="Select..."
                                            Change=@OnSelectedVendorsChange Data=@_vendors TextProperty="Name" ValueProperty="Id" AllowClear="true" Multiple="true"/>
                    </FilterTemplate>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Quantity" Title="Quantity" Width="100px"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="BuyUnitPrice" Title="Buy Unit Price"/>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="CostRatio" Title="Cost Ratio" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" >
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.UnitCost)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.UnitCost)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.UnitCost)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TotalBuyPrice" Title="Total Buy" Width="100px">
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.TotalBuyPrice)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="SellUnitPrice" Title="Sell Unit" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell" >
                        <Template Context="detail">
                            @switch (detail.Currency)
                            {
                                case "Dolar":
                                    @string.Format(new CultureInfo("en-US"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                                case "Euro":
                                    @string.Format(new CultureInfo("en-FR"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                                default:
                                    @string.Format(new CultureInfo("tr-TR"), "{0:C2}", detail.TotalSellPrice)
                                    break;
                            }
                        </Template>
                    </RadzenDataGridColumn>
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="ShippingNumber" Title="Shipping Number" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailStatus" Title="Status" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="TrackingNumber" Title="Tracking" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Property="Currency" Title="Currency" Width="100px" />
                    <RadzenDataGridColumn TItem="ReportViewModel" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px">
                        <Template Context="order">
                            <RadzenButton Icon="print" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => OpenOrder(order))">
                            </RadzenButton>
                        </Template>
                    </RadzenDataGridColumn>

                </Columns>
            </RadzenDataGrid>
			
			
			@code {
    RadzenDataGrid<ReportViewModel?> _grid;
    ReportViewModel reportViewModel;
    IEnumerable<ReportViewModel?> _orders = new List<ReportViewModel?>();
    IEnumerable<Vendor?> _vendors = new List<Vendor?>();
    IEnumerable<Customer?> _customers;
    IEnumerable<string?> selectedVendors;
    IEnumerable<ReportViewModel?> query;

    protected override async Task OnInitializedAsync()
    {
        user = (await _authenticationStateProvider.GetAuthenticationStateAsync()).User;


        if (!user.Identity.IsAuthenticated)
        {
            NavigationManager.NavigateTo("/Identity/Account/Login", false);
        }

        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);
        _vendors = await ViewAllVendorsUseCase.ExecuteAsync();
        _customers = await ViewAllCustomersUseCase.ExecuteAsync();

        query = _orders.AsQueryable(); 
    }
    async Task OnSelectedVendorsChange(object value)
    {
        if (selectedVendors != null && !selectedVendors.Any())
        {
            selectedVendors = null;
        }
       
        await _grid.FirstPage();
    }

    
    void OnDetailStatusChange(object status){
        if(status != null){
            _detailStatus = status.ToString();
        }else{
            _detailStatus = null;
        }

    }



}

I used this example Blazor DataGrid custom filtering but still don't able to filter. What is wrong for God's sake? I couldn't find what was missing, any ideas please?

<RadzenDataGridColumn TItem="ReportViewModel" Property="VendorName" Title="Vendor" 
                                          Type="typeof(IEnumerable<string>)" FilterValue="@selectedVendors" FilterOperator="FilterOperator.Contains" LogicalFilterOperator="LogicalFilterOperator.Or">
                    <FilterTemplate>
                            <RadzenDropDown Style="width:100%;" @bind-Value=@selectedVendors Placeholder="Select..."
                                            Change=@OnSelectedVendorsChange Data="@_vendors.Select(c=> c.Name)"  AllowClear="true" Multiple="true"/>
                    </FilterTemplate>
                    </RadzenDataGridColumn>

Code:

IEnumerable<ReportViewModel?> _orders = new List<ReportViewModel?>();
    ClaimsPrincipal user;
    IEnumerable<string?> selectedVendors;
protected override async Task OnInitializedAsync()
    {
        user = (await _authenticationStateProvider.GetAuthenticationStateAsync()).User;

        if (!user.Identity.IsAuthenticated)
        {
            NavigationManager.NavigateTo("/Identity/Account/Login", false);
        }

        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _detailStatus, _customerId, user);
               
    }

 async Task OnSelectedVendorsChange(object value)
    {
        if (selectedVendors != null && !selectedVendors.Any())
        {
            selectedVendors = null;
        }
       
        await _grid.FirstPage();
    }

Hey @Raysefo,

You are the only one who can check what's going on. Please debug your code.

1 Like