Blazor Query Builder - Header Templates

This sample demonstrates the Header Template functionality of the QueryBuilder component by embedding DropDownList and Button components in the header area. The header template provides a compact, custom UI for managing rule logic and group operations directly from the QueryBuilder header.

The example shows how to integrate the HeaderTemplate using the HeaderTemplate directive. Inside the template, data and helper methods are available via the implicit parameter Context, enabling the template to read and modify the current rule collection.

In this sample, a DropDownList is used to change the selected condition for a rule, while Button components provide actions to add rules, add groups, or delete groups. All control actions are wired to the QueryBuilder through component events; these events update the rule collection so changes are reflected immediately in the QueryBuilder UI.

Implementation notes: declare the HeaderTemplate on the QueryBuilder, bind template controls to the provided Context, and handle add/remove/update operations via the component events exposed by QueryBuilder and the individual controls. This approach keeps header logic declarative and testable while preserving accessibility and keyboard support.

More details and examples are available in the official documentation.