Lock Group/Rule in Angular Query Builder UI

1 Sep 20269 minutes to read

Prevent modifications to specific rules or entire groups by locking them. When a rule is locked, its field, operator, and value become read-only. Locking a group prevents all modifications to rules and nested groups within it. Groups and rules can be locked through the built-in lock buttons in the user interface, or programmatically through methods.

Enable lock buttons

The showButtons property controls the visibility of the built-in lock buttons alongside the other action buttons. Each key accepts a boolean value that toggles the corresponding button.

Key Purpose
lockGroup Shows or hides the Lock Group button on each group header.
lockRule Shows or hides the Lock Rule button on each rule.
ruleDelete Shows or hides the Delete Rule button on each rule.
groupInsert Shows or hides the Add Group button on each group header.
groupDelete Shows or hides the Delete Group button on each group header.

To expose the lock buttons in the UI, set lockGroup and lockRule to true:

public showButtons: Object = {
    ruleDelete: true,
    groupInsert: true,
    groupDelete: true,
    lockGroup: true,
    lockRule: true
};

Lock via methods

You can also lock (and unlock) groups and rules programmatically using the following methods:

  • Use the lockGroup method to lock a group.
  • Use the lockRule method to lock a rule.
  • Use the unlockGroup method to unlock a previously locked group.
  • Use the unlockRule method to unlock a previously locked rule.

lockGroup and unlockGroup parameters

Parameter Type Description
groupId string | number The id of the group to lock or unlock.

lockRule and unlockRule parameters

Parameter Type Description
ruleId string | number The id of the rule to lock or unlock.

The group and rule ids (group0, group0_rule0, etc.) are the element ids generated by the Query Builder for each group and rule. You can obtain them at runtime from the id attribute of the corresponding group or rule element in the DOM, or by inspecting the getRules result and mapping the rules to their rendered element ids.

The lock and unlock methods require the QueryLibrary injection (QueryBuilderComponent.Inject(QueryLibrary) from @syncfusion/ej2-querybuilder). Include this injection before using lockGroup, lockRule, unlockGroup, or unlockRule.

The following sample demonstrates programmatic locking. The built-in lock buttons are hidden (lockGroup: false, lockRule: false) and two external buttons invoke the lockGroup and lockRule methods with the ids of the first group and the first rule.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component, ViewChild, OnInit } from '@angular/core';
import { RuleModel, QueryBuilderComponent } from '@syncfusion/ej2-angular-querybuilder';
import { QueryLibrary } from '@syncfusion/ej2-querybuilder';
import { hardwareData } from './datasource';

QueryBuilderComponent.Inject(QueryLibrary);

@Component({
imports: [
        
        QueryBuilderModule,
    ],


standalone: true,
    selector: 'app-root',
    template: `<!-- To render Query Builder. -->
               <ejs-querybuilder #querybuilder class="row" width="70%" [dataSource]="data" [rule]="importRules" [showButtons]="showButtons">
                <e-columns>
                  <e-column field="TaskID" label="Task ID" type="number"></e-column>
                  <e-column field="Name" label="Name" type="string"></e-column>
                  <e-column field="Category" label="Category" type="string"></e-column>
                  <e-column field="SerialNo" label="SerialNo" type="string"></e-column>
                  <e-column field="InvoiceNo" label="InvoiceNo" type="string"></e-column>
                  <e-column field="Status" label="Status" type="string"></e-column>
                </e-columns>
              </ejs-querybuilder>
               <button class="e-btn e-primary e-qb-button" (click)="lockGroup()" >Lock Group</button>
               <button class="e-btn e-primary e-qb-button" (click)="lockRule()" >Lock Rule</button>`
})

export class AppComponent implements OnInit {
    public data?: Object[];
    public importRules?: RuleModel = {
        'condition': 'and',
        'rules': [{
                'label': 'Task ID',
                'field': 'TaskID',
                'type': 'number',
                'operator': 'equal',
                'value': 1
            },
            {
                'label': 'Name',
                'field': 'Name',
                'type': 'string',
                'operator': 'equal',
                'value': 'Sales Manager'
            },
            {
                condition: "or", rules: [
                    { 'label': 'Name',
                    'field': 'Name',
                    'type': 'string',
                    'operator': 'equal',
                    'value': 'Engineer' }
                ]
            }
        ]
    };
    public showButtons: Object = {ruleDelete: true, groupInsert: true, groupDelete: true, lockGroup: false, lockRule: false};
     @ViewChild('querybuilder')
    public qryBldrObj?: QueryBuilderComponent;
    ngOnInit(): void {
        this.data = hardwareData;
    }
    lockGroup(): void {
        this.qryBldrObj!.lockGroup("group0");
    }
    lockRule(): void {
        this.qryBldrObj!.lockRule("group0_rule0");
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also