Column Filter Menu

 
Order Date Product Name Category Unit Price Quantity Discount Total Shipped
7/4/2014 Queso Cabrales Dairy Products $14.00 12 0% $168.00
7/4/2014 Singaporean Hokkien Fried Mee Grains/Cereals $10.00 10 0% $100.00
7/4/2014 Mozzarella di Giovanni Dairy Products $35.00 5 0% $175.00
7/5/2014 Tofu Produce $19.00 9 0% $171.00
7/5/2014 Manjimup Dried Apples Produce $42.00 40 0% $1,680.00
7/8/2014 Jack's New England Clam Chowder Seafood $8.00 10 0% $80.00
7/8/2014 Manjimup Dried Apples Produce $42.00 35 15% $1,249.50
7/8/2014 Louisiana Fiery Hot Pepper Sauce Condiments $17.00 15 15% $216.75
7/8/2014 Gustaf's Knäckebröd Grains/Cereals $17.00 6 5% $96.90
7/8/2014 Ravioli Angelo Grains/Cereals $16.00 15 5% $228.00
of 216

The DevExpress Blazor Grid's column filter menu displays a dropdown list of all unique values within a column. A size grip in the corner of a filter menu allows users to change the menu's 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 filter dropdown is displayed and allows you to customize filter items.
  • The FilterMenuTemplate property specifies the template used for the content displayed within the column filter dropdown.
  • The DataColumnFilterMenuTemplate property specifies the common template used to display all filter menu dropdowns in the Grid.

In this demo, the filter menus for Order Date and Total columns are "templated". By using templates, our Grid allows you to introduce custom filter options to your Blazor-powered web app.

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