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 .
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" :dataSource="dataSource" :rule="importRules" maxGroupCount=2>
<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>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
Vue.use(QueryBuilderPlugin);
export default {
data: function() {
return {
dataSource: hardwareData,
importRules: {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
}]
}
};
}
}
var hardwareData = [{
'TaskID': 1,
'Name': 'Lenovo Yoga',
'Category': 'Laptop',
'SerialNo': 'CB27932009',
'InvoiceNo': 'INV-2878',
'Status': 'Assigned'
},
{
'TaskID': 2,
'Name': 'Acer Aspire',
'Category': 'Others',
'SerialNo': 'CB35728290',
'InvoiceNo': 'INV-3456',
'Status': 'In-repair'
},
{
'TaskID': 3,
'Name': 'Apple MacBook',
'Category': 'Laptop',
'SerialNo': 'CB35628728',
'InvoiceNo': 'INV-2763',
'Status': 'In-repair'
}];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
.e-query-builder {
margin: 0 auto;
}
</style>define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'HireDate': '22/07/2001',
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President',
'TitleOfCourtesy': 'Dr.',
'HireDate': '21/04/2003',
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'HireDate': '22/07/2001',
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'HireDate': '22/07/2004',
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'HireDate': '02/04/2001',
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'HireDate': '22/01/2003',
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'HireDate': '22/07/2001',
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'HireDate': '22/07/2001',
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'HireDate': '22/07/2001',
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK'
}];
exports.hardwareData = [{
'TaskID': 1,
'Name': 'Lenovo Yoga',
'Category': 'Laptop',
'SerialNo': 'CB27932009',
'InvoiceNo': 'INV-2878',
'DOP': '04/10/2018',
'WEO': '05/01/2021',
'Status': 'Assigned',
'AssignedTo': 'John Doe',
'Note': 'Remarks are noted'
},
{
'TaskID': 2,
'Name': 'Acer Aspire',
'Category': 'Others',
'SerialNo': 'CB35728290',
'InvoiceNo': 'INV-3456',
'DOP': '02/12/2018',
'WEO': '03/01/2023',
'Status': 'In-repair',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 3,
'Name': 'Apple MacBook',
'Category': 'Laptop',
'SerialNo': 'CB35628728',
'InvoiceNo': 'INV-2763',
'DOP': '04/10/2018',
'WEO': '04/03/2021',
'Status': 'In-repair',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 4,
'Name': 'Lenovo ThinkPad',
'Category': 'Laptop',
'SerialNo': 'CB56209872',
'InvoiceNo': 'INV-2980',
'DOP': '03/09/2018',
'WEO': '05/12/2021',
'Status': 'Pending',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 5,
'Name': 'Dell Inspiron',
'Category': 'Laptop',
'SerialNo': 'CB56289036',
'InvoiceNo': 'INV-3782',
'DOP': '01/10/2018',
'WEO': '04/01/2021',
'Status': 'Assigned',
'AssignedTo': 'David Anto',
'Note': 'Remarks are noted'
},
{
'TaskID': 6,
'Name': 'HP Pavilion',
'Category': 'Laptop',
'SerialNo': 'CB56289305',
'InvoiceNo': 'INV-2712',
'DOP': '04/10/2018',
'WEO': '05/01/2021',
'Status': 'Assigned',
'AssignedTo': 'Mary Saveley',
'Note': 'Remarks are noted'
},
{
'TaskID': 7,
'Name': 'Asus ZenBook',
'Category': 'Laptop',
'SerialNo': 'CB25637891',
'InvoiceNo': 'INV-0984',
'DOP': '06/16/2018',
'WEO': '09/01/2021',
'Status': 'Pending',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 8,
'Name': 'HP EliteBook',
'Category': 'Laptop',
'SerialNo': 'CB27819726',
'InvoiceNo': 'INV-2561',
'DOP': '02/19/2018',
'WEO': '05/21/2021',
'Status': 'Ordered',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 9,
'Name': 'Apple MacBook Air',
'Category': 'Laptop',
'SerialNo': 'CB05262880',
'InvoiceNo': 'INV-8970',
'DOP': '02/12/2018',
'WEO': '03/01/2023',
'Status': 'Pending',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 10,
'Name': 'Apple iPad Air',
'Category': 'Tablet',
'SerialNo': 'CB45262777',
'InvoiceNo': 'INV-4555',
'DOP': '04/10/2018',
'WEO': '05/01/2021',
'Status': 'Pending',
'AssignedTo': '',
'Note': 'Remarks are noted'
}];
exports.expenseData = [{
'UniqueId': 'T100001',
'Category': 'Food',
'PaymentMode': 'Credit Card',
'TransactionType': 'Expense',
'Description': 'Boiled peanuts',
'Amount': '7',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/01/2017 09:12 AM'
}, {
'UniqueId': 'T100024',
'Category': 'Food',
'PaymentMode': 'Cash',
'TransactionType': 'Expense',
'Description': 'Peanuts in Coke',
'Amount': '8',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/04/2017 02:43 PM'
}, {
'UniqueId': 'T100025',
'Category': 'Food',
'PaymentMode': 'Cash',
'TransactionType': 'Expense',
'Description': 'Palmetto Cheese, Mint julep',
'Amount': '11',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/04/2017 08:35 PM'
}, {
'UniqueId': 'T100026',
'Category': 'Transportation',
'PaymentMode': 'Debit Card',
'TransactionType': 'Expense',
'Description': 'Cars and trucks, used',
'Amount': '9',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/04/2017 10:25 AM'
}, {
'UniqueId': 'T100027',
'Category': 'Transportation',
'PaymentMode': 'Debit Card',
'TransactionType': 'Expense',
'Description': 'Public and other transportation',
'Amount': '8',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/04/2017 03:55 PM'
}, {
'UniqueId': 'T100028',
'Category': 'Shopping',
'PaymentMode': 'Cash',
'TransactionType': 'Expense',
'Description': 'Household things \u0026 Utilities',
'Amount': '160',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/04/2017 10:22 AM'
},
{
'UniqueId': 'T101284',
'Category': 'Extra income',
'PaymentMode': 'Cash',
'TransactionType': 'Income',
'Description': 'Income from Sale',
'Amount': '110',
'MonthShort': 'Nov',
'MonthFull': 'November, 2017',
'FormattedDate': '11/30/2017 02:42 PM'
}];
});You can use this property in the mobile mode to restrict the nested group creation.