Column Filter Menu

 
Order Date Product Name Category Unit Price Quantity Discount Total Shipped
7/4/2014Queso CabralesDairy Products$14.00120%$168.00
7/4/2014Singaporean Hokkien Fried MeeGrains/Cereals$10.00100%$100.00
7/4/2014Mozzarella di GiovanniDairy Products$35.0050%$175.00
7/5/2014TofuProduce$19.0090%$171.00
7/5/2014Manjimup Dried ApplesProduce$42.00400%$1,680.00
7/8/2014Jack's New England Clam ChowderSeafood$8.00100%$80.00
7/8/2014Manjimup Dried ApplesProduce$42.003515%$1,249.50
7/8/2014Louisiana Fiery Hot Pepper SauceCondiments$17.001515%$216.75
7/8/2014Gustaf's KnäckebrödGrains/Cereals$17.0065%$96.90
7/8/2014Ravioli AngeloGrains/Cereals$16.00155%$228.00
7/8/2014Louisiana Fiery Hot Pepper SauceCondiments$17.00200%$340.00
7/9/2014Sir Rodney's MarmaladeConfections$65.00405%$2,470.00
7/9/2014GeitostDairy Products$2.00255%$47.50
7/9/2014Camembert PierrotDairy Products$27.00400%$1,080.00
7/10/2014Gorgonzola TelinoDairy Products$10.00200%$200.00
7/10/2014Chartreuse verteBeverages$14.00420%$588.00
7/10/2014MaxilakuConfections$16.00400%$640.00
7/11/2014Guaraná FantásticaBeverages$4.001515%$51.00
7/11/2014Pâté chinoisMeat/Poultry$19.002115%$339.15
7/11/2014Longlife TofuProduce$8.00210%$168.00
Data grid with 2155 rows and 8 columns
0 rows are selected

The DevExpress Blazor Grid's column filter menu displays a drop-down list of column values. A size grip in the corner of a filter menu allows users to modify menu width and height. Set the DxGrid.FilterMenuButtonDisplayMode property to Always to display filter menu buttons for each data column, or use the DxGridDataColumn.FilterMenuButtonDisplayMode property to control button visibility for a specific data column.

You can use the following API to customize the filter menu as requirements dictate:

  • The CustomizeFilterMenu event fires before the drop-down filter is displayed and allows you to customize filter items.
  • The FilterMenuTemplate property specifies the template used for the content displayed within the column's drop-down filter. You can switch between hierarchical and list views for DateTime and DateTime? Values in this template.
  • The DataColumnFilterMenuTemplate property specifies the template used for all drop-down filter menus in the Grid.

Once you apply a filter to a column, other filter menus hide values that do not match the specified filter criteria. Hold down Shift and click a filter button to display all values. You can focus a column header and press Alt+Arrow Down or Shift+Alt+Arrow Down to open the filter menu.

In this demo, the filter menu for the Total column is "templated". Templates allow you to include custom filter options in your Blazor-powered web app.

For more information, refer to the following topic: Column Filter Menu.