Lock Group/Rule in React Query builder component

1 Apr 202411 minutes to read

The Query Builder provides the functionality to lock individual rules or entire groups. When a rule is locked, it prevents users from modifying its field, operator, and value, effectively disabling these components. Similarly, locking a group disables all elements contained within it. This feature offers users greater control over their query configurations, ensuring that specific rules or groups remain unchanged. Additionally, users can manage the visibility of locking buttons through the showButtons function, allowing for seamless control over the locking mechanism.

You can lock groups and rules by interacting through the user interface and methods.

• Use the lockGroup method to lock group.
• Use lockRule method to lock rule.

app.jsx

import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from '../datasource.ts';
function App() {
    let qryBldrObj;
    let columnData = [
        { field: 'EmployeeID', label: 'Employee ID', operators: [{ key: 'Equal', value: 'equal' },
                { key: 'Greater than', value: 'greaterthan' }, { key: 'Less than', value: 'lessthan' }], step: 10, type: 'number' },
        { field: 'FirstName', label: 'First Name', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'Hire Date', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'field': 'EmployeeID',
                'label': 'Employee ID',
                'operator': 'equal',
                'type': 'number',
                'value': 1001
            },
            {
                'field': 'HireDate',
                'label': 'Hire Date',
                'operator': 'equal',
                'type': 'date',
                'value': '07/05/1991'
            },
            {
                'field': 'Title',
                'label': 'Title',
                'operator': 'equal',
                'type': 'string',
                'value': 'Sales Manager'
            }]
    };
    function lockGroup() {
        qryBldrObj.lockGroup("querybuilder_group0");
    }
    function lockRule() {
        qryBldrObj.lockRule("querybuilder_group0_rule0");
    }
    return (<div>
        <QueryBuilderComponent id="querybuilder" width='100%' dataSource={hardwareData} ref={(scope) => { qryBldrObj = scope; }} rule={importRules} columns={columnData} showButtons=/>
        <div className="e-qb-button">
            <ButtonComponent id="lockgroup" cssClass='e-primary' content='Lock Group' onClick={lockGroup}/>
            <ButtonComponent id="lockrule" cssClass='e-primary' content='Lock Rule' onClick={lockRule}/>
        </div>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));

app.tsx

import { ColumnsModel, QueryBuilderComponent, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from '../datasource.ts';

function App() {
    let qryBldrObj: QueryBuilderComponent;
    let columnData: ColumnsModel[] =  [
        { field: 'EmployeeID', label: 'Employee ID', type: 'number'},
        { field: 'FirstName', label: 'First Name', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'Hire Date', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'label': 'Employee ID',
            'field': 'EmployeeID',
            'type': 'number',
            'operator': 'equal',
            'value': 1001
        },
        {
            'label': 'Title',
            'field': 'Title',
            'type': 'string',
            'operator': 'equal',
            'value': 'Sales Manager'
        },
        {
            condition: "or", rules: [
                { 'label': 'Title',
                'field': 'Title',
                'type': 'string',
                'operator': 'equal',
                'value': 'Engineer' }
            ]
        }
      ]
    };

    function lockGroup(): void {
        qryBldrObj.lockGroup("querybuilder_group0");
    }

    function lockRule(): void {
        qryBldrObj.lockRule("querybuilder_group0_rule0");
    }

    return (<div>
         <QueryBuilderComponent id="querybuilder" width='100%' dataSource={employeeData} ref={(scope) => { qryBldrObj = scope as QueryBuilderComponent; }} columns={columnData} rule={importRules} showButtons= />
        <div className="e-qb-button">
            <ButtonComponent id="lockgroup" cssClass='e-primary' content='Lock Group' onClick = {lockGroup}/>
            <ButtonComponent id="lockrule" cssClass='e-primary' content='Lock Rule' onClick = {lockRule}/>
        </div>
    </div>
        
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));