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.