Back to Devexpress

DxGrid.FilterPanelDisplayMode Property

blazor-devexpress-dot-blazor-dot-dxgrid-e04b9ced.md

latest7.2 KB
Original Source

DxGrid.FilterPanelDisplayMode Property

Specifies the filter panel visibility.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(GridFilterPanelDisplayMode.Never)]
[Parameter]
public GridFilterPanelDisplayMode FilterPanelDisplayMode { get; set; }

Property Value

TypeDefaultDescription
GridFilterPanelDisplayModeNever

An enumeration value.

|

Available values:

NameDescription
Never

The filter panel is hidden.

| | Always |

The filter panel is always visible.

| | Auto |

The filter panel appears when data is filtered (otherwise, the panel is hidden).

|

Remarks

The Grid component ships with an integrated filter panel. This panel includes the following elements:

  • The filter toggle that allows users to temporarily deactivate the filter.
  • The current filter condition. Users can click it to open the filter builder dialog and customize the filter.
  • The Clear Filter button.

Read Tutorial: Filter Panel and Filter Builder Run Demo: Filter Panel

Assign Auto to FilterPanelDisplayMode to display the filter panel only when Grid data is filtered. Note that the panel remains visible after the filter is temporarily deactivated (disappears only after the filter is cleared).

To display the filter panel permanently, set the FilterPanelDisplayMode property to Always:

razor
@inject NwindDataService NwindDataService

<DxGrid @ref="Grid"
        Data="Data"
        FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
        FilterPanelDisplayMode="GridFilterPanelDisplayMode.Always">
    <Columns>
        <DxGridDataColumn FieldName="SalesPerson" Caption="Salesperson" />
        <DxGridBandColumn Caption="Order">
            <Columns>
                <DxGridDataColumn FieldName="CompanyName" />
                <DxGridDataColumn FieldName="OrderDate" Caption="Date" />
                <DxGridBandColumn Caption="Product">
                    <Columns>
                        <DxGridDataColumn FieldName="ProductName" Caption="Name" />
                        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c"
                                          CaptionAlignment="GridTextAlignment.Right" />
                    </Columns>
                </DxGridBandColumn>
                <DxGridDataColumn FieldName="Quantity" />
            </Columns>
        </DxGridBandColumn>
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }
    IGrid Grid { get; set; }

    protected override async Task OnInitializedAsync() {
        var invoices = await NwindDataService.GetInvoicesAsync();
        var customers = await NwindDataService.GetCustomersAsync();
        Data = invoices.OrderBy(i => i.OrderDate).Join(customers, i => i.CustomerId, c => c.CustomerId,
            (i, c) => { return new {
                CompanyName = c.CompanyName,
                SalesPerson = i.Salesperson,
                UnitPrice = i.UnitPrice,
                OrderDate = i.OrderDate,
                ProductName = i.ProductName,
                Quantity = i.Quantity
            };
        });
    }
    protected override Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender)
            Grid.SetFilterCriteria(CriteriaOperator.Parse("[UnitPrice] > 100M" +
                                                  "And ([SalesPerson] In ('Robert King', 'Andrew Fuller')" +
                                                  "Or [CompanyName] == 'Ernst Handel')"));
        return base.OnAfterRenderAsync(firstRender);
    }
}
csharp
using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public class Invoice {
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }
        public string CustomerId { get; set; }
        public string CustomerName { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Salesperson { get; set; }
        public int OrderId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public string ShipperName { get; set; }
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
        public short Quantity { get; set; }
        public float Discount { get; set; }
        public decimal? ExtendedPrice { get; set; }
        public decimal? Freight { get; set; }
    }
}
csharp
using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public partial class Customer {
        public Customer() {
            Orders = new HashSet<Order>();
        }

        public string CustomerId { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }

        public virtual ICollection<Order> Orders { get; set; }
    }
}
csharp
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data.Northwind;
using BlazorDemo.DataProviders;

namespace BlazorDemo.Services {
    public partial class NwindDataService {
        public Task<IEnumerable<Invoice>> GetInvoicesAsync(CancellationToken ct = default) {
            // Return your data here
        }
        public Task<IEnumerable<Customer>> GetCustomersAsync(CancellationToken ct = default) {
            // Return your data here
        }
    }
}
csharp
// ...
builder.Services.AddScoped<NwindDataService>();

Implements

FilterPanelDisplayMode

See Also

DxGrid Class

DxGrid Members

DevExpress.Blazor Namespace