Events in Blazor Query Builder

14 Aug 20263 minutes to read

This section lists key events available in the Blazor Query Builder and when they are triggered during user interactions and lifecycle changes.

Created

The Created event is triggered once the component has been initialized and is ready.

<SfQueryBuilder TValue="Order" DataSource="@Data">
    <QueryBuilderEvents TValue="Order" Created="OnCreated"></QueryBuilderEvents>
</SfQueryBuilder>

@code {
    public void OnCreated() {
        // Here, you can customize your code.
    }
}

RuleChanged

The RuleChanged event is triggered whenever a rule or group is added, removed, or modified.

<SfQueryBuilder TValue="Order" DataSource="@Data">
    <QueryBuilderEvents TValue="Order" RuleChanged="OnRuleChanged"></QueryBuilderEvents>
</SfQueryBuilder>

@code {
    public void OnRuleChanged(RuleChangeEventArgs args)
    {
        // Here, you can customize your code.
    }
}

Changed

The Changed event is an EventCallback raised after a condition (And/Or), field, operator, or value change is applied in the Query Builder.

<SfQueryBuilder TValue="Order" DataSource="@Data">
    <QueryBuilderEvents TValue="Order" Changed="OnChanged"></QueryBuilderEvents>
</SfQueryBuilder>

@code {
    private void OnChanged(ChangeEventArgs args)
    {
        // Here, you can customize your code.
    }
}

OnValueChange

Raised before a condition (And/Or), field, operator, or value is changed. Use this to validate or react before committing a change.

<SfQueryBuilder TValue="Order" DataSource="@Data">
    <QueryBuilderEvents TValue="Order" OnValueChange="OnValueChange"></QueryBuilderEvents>
</SfQueryBuilder>

@code {
    private void OnValueChange(ChangeEventArgs args)
    {
        // Here, you can customize your code.
    }
}

DataBound

Triggered after the data source is populated and bound to the Query Builder.

<SfQueryBuilder TValue="Order" DataSource="@Data">
    <QueryBuilderEvents TValue="Order" DataBound="OnDataBound"></QueryBuilderEvents>
</SfQueryBuilder>

@code {
    private void OnDataBound(object args)
    {
        // Here, you can customize your code.
    }
}

OnActionFailure

The OnActionFailure event is triggered whenever a remote data request or action fails in the QueryBuilder.

<SfQueryBuilder TValue="Order" DataSource="@RemoteData">
    <QueryBuilderEvents TValue="Order" OnActionFailure="OnActionFailure"></QueryBuilderEvents>
</SfQueryBuilder>

@code {
    private void OnActionFailure(Exception ex)
    {
        // Here, you can customize your code.
    }
}

Drag-and-drop events

Enable drag-and-drop by setting the AllowDragAndDrop property to true (default is false). When enabled, the following events will be triggered based on the actions performed.

RuleDragStarting

This event is triggered before a rule or an entire group starts being dragged.The event arguments contain information about the dragged element.

<SfQueryBuilder TValue="Order" DataSource="@Data" AllowDragAndDrop="true">
    <QueryBuilderEvents TValue="Order" RuleDragStarting="OnRuleDragStarting"></QueryBuilderEvents>
</SfQueryBuilder>

@code {
    private void OnRuleDragStarting(RuleDragStartingEventArgs args)
    {
        // Here, you can customize your code.
    }
}

RuleDropping

The RuleDropping event fires just before the dragged rule or group is dropped onto a target location. You can use this event to validate the drop target or modify the drop behavior dynamically.

<SfQueryBuilder TValue="Order" DataSource="@Data" AllowDragAndDrop="true">
    <QueryBuilderEvents TValue="Order" RuleDropping="OnRuleDropping"></QueryBuilderEvents>
</SfQueryBuilder>

@code {
    private void OnRuleDropping(RuleDroppingEventArgs args)
    {
        // Here, you can customize your code.
    }
}

RuleDropped

This event is raised after a drag-and-drop operation has successfully completed and the query model has been updated.

<SfQueryBuilder TValue="Order" DataSource="@Data" AllowDragAndDrop="true">
    <QueryBuilderEvents TValue="Order" RuleDropped="OnRuleDropped"></QueryBuilderEvents>
</SfQueryBuilder>

@code {
    private void OnRuleDropped(RuleDroppedEventArgs args)
    {
        // Here, you can customize your code.
    }
}

Destroyed

The Destroyed event is triggered when the component is disposed. Use it to perform reliable cleanup, detach external resources, or finalize logging.

<SfQueryBuilder TValue="Order" DataSource="@Data">
    <QueryBuilderEvents TValue="Order" Destroyed="OnDestroyed"></QueryBuilderEvents>
</SfQueryBuilder>

@code {
    public void OnDestroyed(object args)
    {
        // Here, you can customize your code.
    }
}