The column definitions are used as the dataSource
schema in the Query Builder. This plays a vital role in rendering column values. The query builder operations such as create or delete conditions and create or delete group they are performed based on the column definitions. The field
property of the columns is necessary to map the data source values in the query builder columns.
If the column field is not specified in the dataSource, the column values will be empty.
The columns
are automatically generated when the columns
declaration is empty or undefined while initializing the query builder. All the columns in the dataSource are bound as the query builder columns.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" :dataSource="dataSource">
</ejs-querybuilder>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
import { employeeData } from './datasource.js';
Vue.use(QueryBuilderPlugin);
export default {
data: function() {
return {
dataSource: employeeData,
values: ['Mr.', 'Mrs.']
};
}
}
var employeeData = [{
'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'
}];
</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'
}];
});
When columns are auto-generated, the column type will be determined from the first record of the
dataSource
.
By default, the column label is displayed from the column field
value. To override the default label, you have to define the label
value.
The operator for a column can be defined in the operators
property.
The available operators and its supported data types are:
Operators | Description | Supported Types |
---|---|---|
startswith | Checks whether the value begins with the specified value. | String |
endswith | Checks whether the value ends with the specified value. | String |
contains | Checks whether the value contains the specified value. | String |
equal | Checks whether the value is equal to the specified value. | String Number Date Boolean |
notequal | Checks whether the value is not equal to the specified value. | String Number Date Boolean |
greaterthan | Checks whether the value is greater than the specified value. | Date Number |
greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Date Number |
lessthan | Checks whether the value is less than the specified value. | Date Number |
lessthanorequal | Checks whether the value is less than or equal to the specified value. | Date Number |
between | Checks whether the value is between the two-specific value. | Date Number |
notbetween | Checks whether the value is not between the two-specific value. | Date Number |
in | Checks whether the value is one of the specific values. | String Number |
notin | Checks whether the value is not in the specific values. | String Number |
The Query Builder allows you to set the step values to the number fields. So that you can easily access the numeric textbox. Use the step
property, to set the step value for number values.
The Query Builder formats date and number values. Use the format
property to format date and number values.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" :dataSource="dataSource" :rule="importRules">
<e-columns>
<e-column field='EmployeeID' label='Employee ID' type='number' step=10 :operators="employeeOperators" />
<e-column field='FirstName' label='First Name' type='string' />
<e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='boolean' :values="values"/>
<e-column field='Title' label='Title' type='string' />
<e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' />
<e-column field='Country' label='Country' type='string' />
<e-column field='City' label='City' type='string' />
</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: employeeData,
values: ['Mr.', 'Mrs.'],
importRules: {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1001
},
{
'label': 'Hire Date',
'field': 'HireDate',
'type': 'date',
'operator': 'equal',
'value': '07/05/1991'
}]
},
employeeOperators: [
{ value: 'equal', key: 'Equal' },
{ value: 'notequal', key: 'Not Equal' },
{ value: 'in', key: 'In' },
{ value: 'notin', key: 'Not In' }
]
};
}
}
var employeeData = [{
'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'
}];
</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'
}];
});
Validation allows you to validate the conditions and it display errors for invalid fields while using the validateFields
method. To enable validation in the query builder , set the allowValidation to true. Column fields are validated after setting allowValidation
as to true. So, you should manually configure the validation for Operator and, Value fields through validation
.
Install Syncfusion Buttons
packages using below command.
npm install @syncfusion/ej2-vue-buttons --save
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder ref="querybuilder" width="70%" :dataSource="dataSource" allowValidation="true">
<e-columns>
<e-column field='EmployeeID' label='Employee ID' type='number' validation="validateRule" />
<e-column field='FirstName' label='First Name' type='string' />
<e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='boolean' :values="values"/>
<e-column field='Title' label='Title' type='string' validation="validateRule" />
<e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' />
<e-column field='Country' label='Country' type='string' validation="validateRule"/>
<e-column field='City' label='City' type='string' validation="validateRule"/>
</e-columns>
</ejs-querybuilder>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="btnClick">Validate Fields</ejs-button>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(QueryBuilderPlugin);
export default {
data: function() {
return {
dataSource: employeeData,
values: ['Mr.', 'Mrs.'],
validateRule: { isRequired: true }
};
},
methods: {
btnClick: function(event) {
this.$refs.querybuilder.$el.ej2_instances[0].validateFields();
}
}
}
var employeeData = [{
'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'
}];
</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;
}
.e-qb-button {
margin: 2% 1% 0 15%;
}
</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'
}];
});
Set
isRequired
validation forOperator
andValue
fields. Setmax
,min
values for number values.