The Query Builder uses DataManager
, which supports both RESTful JSON data services binding and local JavaScript object array binding. The dataSource
property can be assigned either with the instance of DataManager
or JavaScript object array collection. It supports two kinds of data binding method:
To bind local data to the query builder, you can assign the dataSource
property with a JavaScript object array. The local data source can also be provided as an instance of the DataManager
.
<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' />
<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': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
}
};
}
}
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'
}];
});
By default,
DataManager
usesJsonAdaptor
for local data-binding.
To bind remote data to the query builder, assign service data as an instance of DataManager
to the dataSource
property. To interact with remote data source, provide the endpoint url
.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" :dataSource="data" :rule="importRules">
<e-columns>
<e-column field='EmployeeID' label='Employee ID' type='number' />
<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";
import { DataManager, ODataAdaptor } from "@syncfusion/ej2-data";
Vue.use(QueryBuilderPlugin);
export default {
data(){
return {
values: ['Mr.', 'Mrs.'],
data: new DataManager({
url: "https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/";
adaptor: new ODataAdaptor(),
}),
importRules: {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
}
};
};
}
</script>
<style>
@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'
}];
});
By default,
DataManager
usesODataAdaptor
for remote data-binding.
OData
is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" :dataSource="data" :rule="importRules">
<e-columns>
<e-column field='EmployeeID' label='Employee ID' type='number' />
<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";
import { DataManager, ODataAdaptor } from "@syncfusion/ej2-data";
Vue.use(QueryBuilderPlugin);
export default {
data(){
return {
values: ['Mr.', 'Mrs.'],
data: new DataManager({
url: "https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/";
adaptor: new ODataAdaptor(),
crossDomain: true
}),
importRules: {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
}
};
};
}
</script>
<style>
@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'
}];
});
The ODataV4 is an improved version of OData protocols, and the DataManager
can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the odata documentation
. To bind OData v4 service, use the ODataV4Adaptor
.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" :dataSource="data" :rule="importRules">
<e-columns>
<e-column field='EmployeeID' label='Employee ID' type='number' />
<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";
import { DataManager, ODataV4Adaptor } from "@syncfusion/ej2-data";
Vue.use(QueryBuilderPlugin);
export default {
data(){
return {
values: ['Mr.', 'Mrs.'],
data: new DataManager({
url: "https://services.odata.org/V4/Northwind/Northwind.svc/Orders/";
adaptor: new ODataV4Adaptor(),
crossDomain: true
}),
importRules: {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
}
};
};
}
</script>
<style>
@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 WebApiAdaptor
to bind query builder with Web API created using OData endpoint.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" :dataSource="data" :rule="importRules">
<e-columns>
<e-column field='EmployeeID' label='Employee ID' type='number' />
<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";
import { DataManager, WebApiAdaptor } from "@syncfusion/ej2-data";
Vue.use(QueryBuilderPlugin);
export default {
data: function() {
return {
values: ['Mr.', 'Mrs.'],
data: new DataManager({
url: 'api/OrderAPI',
adaptor: new WebApiAdaptor(),
crossDomain: true
}),
importRules: {
'condition': 'and',
'rules': [{
'label': 'Employee ID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'equal',
'value': 1
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
}
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
.e-query-builder {
margin: 0 auto;
}
</style>
You can use the created conditions in DataManager through the getPredicate
method. This method creates predicates which is used as conditions in DataManager.
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" :rule="importRules">
<e-columns>
<e-column field='EmployeeID' label='Employee ID' type='number' />
<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>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="btnClick">Get Data</ejs-button>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
import { DataManager, Query } from '@syncfusion/ej2-data';
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { Compile } from '@syncfusion/ej2-base'
Vue.use(ButtonPlugin);
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': 1
}]
}
};
},
methods: {
btnClick: function(event) {
var validRule = this.$refs.querybuilder.ej2Instances.getValidRules(this.$refs.querybuilder.ej2Instances.rule);
var predicate = this.$refs.querybuilder.ej2Instances.getPredicate(validRule);
var dataManagerQuery = new Query().select(['EmployeeID', 'Title', 'City']);
var fltrDataSource = [];
new DataManager(employeeData).executeQuery(dataManagerQuery)
.then((e) => {
(e.result).forEach((data) => {
fltrDataSource.push(data);
//recieve the result data
});
});
}
}
}
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'
}];
});
Complex Data Binding allows you to create subfield for columns. To implement complex data binding, either bind the complex data in nested columns or specify complex data source and separator must be given in querybuilder.
In the following sample, complex data was bound in nested columns.
<template>
<div class="control-section">
<div>
<table>
<tr>
<td> <ejs-button id="reset" class="e-control e-danger e-btn e-small" v-on:click.native='onReset'>Reset</ejs-button> </td>
<td> <ejs-button id="rule" class="e-control e-success e-btn e-small" v-on:click.native='onSetsqlRules'>SetSqlRules</ejs-button> </td>
<td> <ejs-button id="sql" class="e-control e-success e-btn e-small" v-on:click.native='onSetrules' >SetRules</ejs-button> </td>
</tr>
</table>
</div>
<ejs-querybuilder id="querybuilder" ref="querybuilder" :rule="importRules" separator ="." enableNotCondition = true>
<e-columns>
<e-column field="Employee" label="Employee" :columns='columns1'/>
<e-column field="Name" label="Name" :columns="columns2" />
<e-column field='Country' label='Country' :columns="columns3"/>
</e-columns>
</ejs-querybuilder>
</div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin } from '@syncfusion/ej2-vue-querybuilder';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { getComponent, compile,closest } from '@syncfusion/ej2-base';
import { CheckBoxPlugin, ButtonPlugin, RadioButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { DropDownButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";
Vue.use(QueryBuilderPlugin);
Vue.use(DropDownListPlugin);
Vue.use(CheckBoxPlugin);
Vue.use(DropDownButtonPlugin);
Vue.use(ButtonPlugin);
Vue.use(RadioButtonPlugin);
export default {
data: function() {
return {
importRules: {
condition: 'and',
rules: [{
label: 'ID',
field: 'Employee.ID',
type: 'string',
operator: 'equal',
value: 0
},
{
label: 'Last Name',
field: 'Name.LastName',
type: 'string',
operator: 'contains',
value: 'malan'
},
{
condition: 'or',
rules: [{
label: 'City',
field: 'Country.State.City',
operator: 'startswith',
type: 'string',
value: 'U'
},
{
label: 'Region',
field: 'Country.Region',
operator: 'endswith',
type: 'string',
value: 'c'
},
{
label: 'Name',
field: 'Country.Name',
operator: 'isnotempty'
}]
}]
},
columns1: [
{ field: 'ID', label: 'ID', type: 'number'},
{ field: 'DOB', label: 'Date of birth', type: 'date'},
{ field: 'HireDate', label: 'Hire Date', type: 'date'},
{ field: 'Salary', label: 'Salary', type: 'number'},
{ field: 'Age', label: 'Age', type: 'number'},
{ field: 'Title', label: 'Title', type: 'string'}
],
columns2: [
{ field: 'FirstName', label: 'First Name', type: 'string'},
{ field: 'LastName', label: 'Last Name', type: 'string'}
],
columns3: [
{ field: 'State', label: 'State', columns : [
{ field: 'City', label: 'City', type: 'string'},
{ field: 'Zipcode', label: 'Zip Code', type: 'number'}] },
{ field: 'Region', label: 'Region', type: 'string'},
{ field: 'Name', label: 'Name', type: 'string'}
],
};
},
methods: {
onReset: function(event){
this.$refs.querybuilder.ej2Instances.reset();
},
onSetsqlRules: function(event){
this.$refs.querybuilder.ej2Instances.setRulesFromSql("Employee.ID = 0 AND Name.LastName LIKE ('%malan%') AND (Country.State.City LIKE ('U%') AND Country.Region LIKE ('%c') AND Country.Name IS NOT EMPTY)");
},
onSetrules: function(event){
this.$refs.querybuilder.ej2Instances.setRules(this.importRules);
}
}
}
</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 .e-group-body .e-horizontal-mode .e-rule-sub-filter{
display: inline-block;
}
.e-query-builder .e-group-body .e-rule-container .e-rule-sub-filter{
padding: 12px 0 12px 12px;
width: auto;
}
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.complexData = [{
'Employee': {
'ID': 1001,
'DOB': new Date(1996, 4, 23),
'HireDate': new Date(2015, 3, 21),
'Salary': 1000,
'Age': 23,
'Title': 'Mr'
},
'Name': {
'FirstName': 'Joe',
'LastName': 'peter'
},
'Country': {
'State': {
'City': 'San diego',
'Zipcode': 22434,
},
'Region': 'Pacific',
'Name': 'USA'
}
},
{
'Employee': {
'ID': 1002,
'DOB': new Date(1995, 2, 28),
'HireDate': new Date(2015, 5, 25),
'Salary': 1300,
'Age': 25,
'Title': 'Mr'
},
'Name': {
'FirstName': 'Mark',
'LastName': 'lawrence'
},
'Country': {
'State': {
'City': 'Houston',
'Zipcode': 77001
},
'Region': 'South central',
'Name': 'USA'
}
},
{
'Employee': {
'ID': 1003,
'DOB': new Date(1996, 7, 7),
'HireDate': new Date(2018, 9, 11),
'Salary': 1400,
'Age': 20,
'Title': 'Mr'
},
'Name': {
'FirstName': 'David',
'LastName': 'malan'
},
'Country': {
'State': {
'City': 'Jersey City',
'Zipcode': 27097
},
'Region': 'Mid-Atlantic',
'Name': 'USA'
}
}];
});