The default GridBlazor render filter widget for a text column looks like:
But you can provide a more specific filter widget for this column. For example, image that you want users pick a customer from customer's list, like:
Follow thes steps to create a custom filter widget:
Create a blazor page for the new widget
Your blazor page should contain the following parameters:
Example of a blazor page for a filter widget (you can find it in the sample GridComponent.Demo project with the file name CustomersFilterComponent.razor):
@using GridBlazor
@using GridBlazor.Resources
@using GridShared.Filtering
@using GridBlazorServerSide.Services
@inject ICustomerService customerService
@inject IJSRuntime jSRuntime
@typeparam T
@if (visible)
{
<div class="dropdown dropdown-menu grid-dropdown opened" style="display:block;"
@onkeyup="FilterKeyup" @onclick:stopPropagation @onkeyup:stopPropagation>
<div class="grid-dropdown-arrow"></div>
<div class="grid-dropdown-inner">
<div class="grid-popup-widget">
<div class="form-group">
<p><i>This is custom filter widget demo</i></p>
<select @ref="firstSelect" class="grid-filter-type customerslist form-control"
style="width:250px;" @bind="_filterValue">
@foreach (var customerName in customerService.GetCustomersNames())
{
<option value="@customerName">@customerName</option>
}
</select>
</div>
<div class="grid-filter-buttons">
<button type="button" class="btn btn-primary grid-apply" @onclick="ApplyButtonClicked">
@Strings.ApplyFilterButtonText
</button>
</div>
</div>
<div class="grid-popup-additional">
@if (_clearVisible)
{
<ul class="menu-list">
<li>
<a class="grid-filter-clear" href="javascript:void(0);" @onclick="ClearButtonClicked">
@Strings.ClearFilterLabel
</a>
</li>
</ul>
}
</div>
</div>
</div>
}
@code {
private bool _clearVisible = false;
protected string _filterValue;
protected ElementReference firstSelect;
[CascadingParameter(Name = "GridHeaderComponent")]
private GridHeaderComponent<T> GridHeaderComponent { get; set; }
[Parameter]
public bool visible { get; set; }
[Parameter]
public string ColumnName { get; set; }
[Parameter]
public IEnumerable<ColumnFilterValue> FilterSettings { get; set; }
protected override void OnParametersSet()
{
_filterValue = FilterSettings.FirstOrDefault().FilterValue;
_clearVisible = !string.IsNullOrWhiteSpace(_filterValue);
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && firstSelect.Id != null)
{
await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", firstSelect);
}
}
protected async Task ApplyButtonClicked()
{
await GridHeaderComponent.AddFilter(new FilterCollection(GridFilterType.Equals.ToString("d"), _filterValue));
}
protected async Task ClearButtonClicked()
{
await GridHeaderComponent.RemoveFilter();
}
public async Task FilterKeyup(KeyboardEventArgs e)
{
if (e.Key == "Escape")
{
await GridHeaderComponent.FilterIconClicked();
}
}
}
This example loads a customer's list using a singleton service. So we had to create this service in the project to get a list of clients from the database. But it is not mandatory to use a singleton. This example always uses a filterType with value 1 when calling the GridHeaderComponent.AddFilter method.
In the functions area of the grid razor page you must create an empty QueryDictionary an add the custom filter widget created is step 1 using a unique name:
private IQueryDictionary<Type> _customFilters = new QueryDictionary<Type>();
protected override async Task OnInitAsync()
{
...
_customFilters.Add("CompanyNameFilter", typeof(CustomersFilterComponent<Order>));
...
}
Add a new atribute to the GridComponent called CustomFilters where we pass the dictionary created in the step 2:
<GridComponent T="Order" Grid="@_grid" CustomFilters="@_customFilters"></GridComponent>
Add the new filter widget to the colum that will use it. This is done in the lambda expression that creates the column's definition:
Action<IGridColumnCollection<Order>> columns = c =>
{
...
c.Add(o => o.Customer.CompanyName).SetFilterWidgetType("CompanyNameFilter");
...
};
You have to use the same unique name used on the step 2.
<- Using a date time filter | Setup initial column filtering ->
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。