DataGrid FilterTemplate Question

Radzen.Blazor Components
1

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:

Vendors
Vendors1152×648 21.2 KB

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

2

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

3

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:

dropdown selection
dropdown selection1152×648 34.4 KB

4

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

5

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

6

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.

datagrid
datagrid1888×648 30 KB

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;
    }
}
7

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?

drop down
drop down1869×648 62.1 KB

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;
        }

    }



}
8

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();
    }
9

Hey @Raysefo,

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

1 Like