Save $100 with promo code CHEERS2025

As we are looking forward to an incredible 2025, enjoy our end-of-year promotion! Valid now through January 6th.

See Pricing

Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

Go to Radzen Blazor Studio

Query builder (Angular)

Radzen is using OData V4 services to query MS SQL, MySQL Oracle and PostgreSQL data sources. The Radzen Query builder allows you to specify the filter and sort order of Invoke data source method actions.

To open the Query Builder click the “Create query” button next to the Parameters label.

In the Query builder you can filter data and set the sort order. You can also combine filters via AND and OR logic.

Important! String values must be quoted e.g. '${stringProperty}' or 'test'. Date-time values can be picked with date-picker. You can use expressions (${}) to specify values.

Combine DataGrid filters entered by the user with filter specified in the Query Builder

Let’s build Orders by customer page with a DropDown component for Northwind Customers and DataGrid for selected customer Orders.

  1. Add a DropDown and bind it to Northwind Customers.
  2. Add a DataGrid and bind it to Northwind Orders.
  3. Handle the DropDown Change event, set a new page property with Name customerId and Value ${event.CustomerID}. Then execute ${this.grid0.load()} to reload the DataGrid.
  4. Open the Query builder in the DataGrid LoadData event and add an additional filter CustomerID equals '${customerId}'. Note that there already is a “RAW” filter which is ${event.filter}. This combines the DataGrid filter with the additional one.
  5. Run the application, select customer and filter orders by customer.