JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Set maximum group count in JavaScript QueryBuilder control

17 Mar 2023 / 2 minutes to read

You can restrict the condition set by defining the maxGroupCount property. By default, the value is 5. In the below demo, the maxGroupCount is set to 2 .

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';

let employeeData: Object[] = [{
  'EmployeeID': 1,
  'FirstName': 'Nancy',
  'Title': 'Sales Representative',
  'TitleOfCourtesy': 'Ms.',
  'HireDate': '22/07/2001',
  'City': 'Seattle',
  'Country': 'USA'
},
{
  'EmployeeID': 2,
  'FirstName': 'Andrew',
  'Title': 'Vice President',
  'TitleOfCourtesy': 'Dr.',
  'HireDate': '21/04/2003',
  'City': 'Tacoma',
  'Country': 'USA'
},
{
  'EmployeeID': 3,
  'FirstName': 'Janet',
  'Title': 'Sales Representative',
  'TitleOfCourtesy': 'Ms.',
  'HireDate': '22/07/2001',
  'City': 'Kirkland',
  'Country': 'USA'
}];

let columnData: ColumnsModel[] = [
    {
        field: 'EmployeeID', label: 'Employee ID', type: 'number'
    },
    { field: 'FirstName', label: 'FirstName', type: 'string' },
    { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
    { field: 'Title', label: 'Title', type: 'string' },
    { field: 'HireDate', label: 'HireDate', 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'
    }]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
    width: '70%',
    dataSource: employeeData,
    columns: columnData,
    rule: importRules,
    maxGroupCount: 2
    });
    qryBldrObj.appendTo('#querybuilder');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-querybuilder/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='querybuilder'></div>
         <div id='property'> </div>
    </div>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-query-builder {
  margin: 0 auto;
}

You can use this property in the mobile mode to restrict the nested group creation.

Previous
Next