Clone Group/Rule in React Query builder component

1 Apr 202410 minutes to read

The Query Builder functionality extends to cloning both individual rules and entire groups. Utilizing the Clone options will generate an exact duplicate of a rule or group adjacent to the original one. This feature enables users to replicate complex query structures effortlessly. The showButtons function offers users the ability to toggle the visibility of these cloning buttons, providing convenient control over the cloning process within the Query Builder interface.

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

• Use the cloneGroup method to clone group.
• Use cloneRule method to clone rule.

app.jsx

import { QueryBuilderComponent } 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;
    let columnData = [
        { 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 = {
        '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 cloneGroup() {
        qryBldrObj.cloneGroup("group0", "group1", 1);
    }
    function cloneRule() {
        qryBldrObj.cloneRule("group0_rule0", "group0", 1);
    }
    return (<div>
        <QueryBuilderComponent width='100%' dataSource={employeeData} ref={(scope) => { qryBldrObj = scope; }} rule={importRules} columns={columnData} showButtons=/>
        <div className="e-qb-button">
            <ButtonComponent id="clonegroup" cssClass='e-primary' content='Clone Group' onClick={cloneGroup}/>
            <ButtonComponent id="clonerule" cssClass='e-primary' content='Clone Rule' onClick={cloneRule}/>
        </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 cloneGroup(): void {
        qryBldrObj.cloneGroup("group0", "group1", 1);
    }

    function cloneRule(): void {
        qryBldrObj.cloneRule("group0_rule0", "group0", 1);
    }

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