Filtering

Orders

 
Order ID Customer Order Date Ship Country Ship City Shipped Date Total
10248Paul Henriot7/4/2014FranceReims7/16/2014$443.00
10249Karin Josephs7/5/2014GermanyMünster7/10/2014$1,851.00
10250Mario Pontes7/8/2014BrazilRio de Janeiro7/12/2014$1,805.00
10251Mary Saveley7/8/2014FranceLyon7/15/2014$682.00
10252Pascale Cartrain7/9/2014BelgiumCharleroi7/11/2014$3,730.00
10253Mario Pontes7/10/2014BrazilRio de Janeiro7/16/2014$1,428.00
10254Yang Wang7/11/2014SwitzerlandBern7/23/2014$627.00
10255Michael Holz7/12/2014SwitzerlandGenève7/15/2014$2,485.00
10256Paula Parente7/15/2014BrazilResende7/17/2014$510.00
10257Carlos Hernández7/16/2014VenezuelaSan Cristóbal7/22/2014$1,109.00
10258Roland Mendel7/17/2014AustriaGraz7/23/2014$2,011.00
10259Francisco Chang7/18/2014MexicoMéxico D.F.7/25/2014$101.00
10260Henriette Pfalzheim7/19/2014GermanyKöln7/29/2014$1,765.00
10261Bernardo Batista7/19/2014BrazilRio de Janeiro7/30/2014$440.00
10262Paula Wilson7/22/2014USAAlbuquerque7/25/2014$624.00
10263Roland Mendel7/23/2014AustriaGraz7/31/2014$2,500.00
10264Maria Larsson7/24/2014SwedenBräcke8/23/2014$725.00
10265Frédérique Citeaux7/25/2014FranceStrasbourg8/12/2014$1,170.00
10266Pirkko Koskitalo7/26/2014FinlandOulu7/31/2014$360.00
10267Peter Franken7/29/2014GermanyMünchen8/6/2014$4,040.00
Data grid with 830 rows and 7 columns
0 rows are selected

You can use the Range Selector component to filter data in other DevExpress Blazor components.

In this demo, the DxGrid component displays customer orders. The Total column's minimum/maximum values serve as start and end values for the Range Selector's scale. To filter Grid data based on the selected range, you must:

  1. Handle the Range Selector's ValueChanged event.
  2. In the handler, use event argument properties to obtain values of the selected range.
  3. Create a criteria operator object based on obtained values and call the Grid's SetFieldFilterCriteria method (to apply filter).