Import export in Vue Query builder component
15 Mar 202424 minutes to read
Importing allows you to view or edit the predefined conditions which is available in JSON or SQL. You can import the conditions either initial rendering or post rendering.
Importing
Importing from JSON
Initial rendering
To apply conditions initially, you can define the rule
Here, you can import structured JSON object by defining the rule
property.
<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="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'
},
{
'condition': 'and',
'rules': [{
'label': 'Status',
'field': 'Status',
'type': 'string',
'operator': 'notequal',
'value': 'Pending'
},
{
'label': 'Task ID',
'field': 'TaskID',
'type': 'number',
'operator': 'equal',
'value': 5675
}]
}]
}
};
}
}
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>
Post rendering
You can set the conditions from structured JSON object through the setRules
method.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" ref="querybuilder" :dataSource="dataSource" >
<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>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="btnClick">Set Rules</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: hardwareData,
importRules: {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
},
{
'condition': 'and',
'rules': [{
'label': 'Status',
'field': 'Status',
'type': 'string',
'operator': 'notequal',
'value': 'Pending'
},
{
'label': 'Task ID',
'field': 'TaskID',
'type': 'number',
'operator': 'equal',
'value': 5675
}]
}]
}
};
},
methods: {
btnClick: function(event) {
this.$refs.querybuilder.ej2Instances.setRules(this.importRules);
}
}
}
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;
}
.e-qb-button {
margin: 2% 1% 0 15%;
}
</style>
Importing from SQL
Importing from Inline SQL
You can set the conditions from Inline SQL query through the setRulesFromSql
method.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" ref="querybuilder" :dataSource="dataSource" :rule="importRules">
<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>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="btnClick">Set Rules</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: hardwareData,
importRules: {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
}]
}
};
},
methods: {
btnClick: function(event) {
this.$refs.querybuilder.ej2Instances.setRulesFromSql("TaskID = 1 and Status LIKE ('Assigned%')");
}
}
}
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;
}
.e-qb-button {
margin: 2% 1% 0 15%;
}
</style>
Importing from Parameter SQL
You can set the conditions from Parameter SQL query through the setParameterizedSql
method.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder ref="querybuilder" width="70%" :dataSource="dataSource">
<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>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="importSqlClick">Set Parameter SQL Rules</ejs-button>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin, QueryLibrary, QueryBuilder } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
QueryBuilder.Inject(QueryLibrary);
Vue.use(QueryBuilderPlugin);
Vue.use(ButtonPlugin);
export default {
data: function() {
return {
dataSource: hardwareData,
};
},
methods: {
importSqlClick: function() {
this.$refs.querybuilder.ej2Instances.setParameterizedSql({ sql: '(Category IN (?,?) OR TaskID IN (?,?))', params: ['Laptop', 'Others', 1, 2] });
},
}
}
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>
Importing from Named Parameter SQL
You can set the conditions from Parameter SQL query through the setParameterizedNamedSql
method.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder ref="querybuilder" width="70%" :dataSource="dataSource">
<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>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="importSqlClick">Set Named Parameter SQL Rules</ejs-button>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin, QueryLibrary, QueryBuilder } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
QueryBuilder.Inject(QueryLibrary);
Vue.use(QueryBuilderPlugin);
Vue.use(ButtonPlugin);
export default {
data: function() {
return {
dataSource: hardwareData
};
},
methods: {
importSqlClick: function() {
this.$refs.querybuilder.ej2Instances.setParameterizedNamedSql({ sql: '(Category IN (:Category_1,:Category_2) OR TaskID IN (:TaskID_1,:TaskID_2))', params: {"Category_1": "Laptop", "Category_2": "Others", "TaskID_1": 1, "TaskID_2": 2} });
}
}
}
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>
Importing from MongoDB
You can set the conditions from MongoDB query through the setMongoQuery
method.
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder ref="querybuilder" width="70%" :dataSource="dataSource">
<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>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="getMongoClick">Set MongoDB Rules</ejs-button>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin, QueryLibrary, QueryBuilder } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
QueryBuilder.Inject(QueryLibrary);
Vue.use(QueryBuilderPlugin);
Vue.use(ButtonPlugin);
export default {
data: function() {
return {
dataSource: hardwareData
};
},
methods: {
getMongoClick: function() {
this.$refs.querybuilder.ej2Instances.setMongoQuery('{"$and":[{"TaskID":1001},{ "$or":[{"Category":{"$regex":"Order"}}]}]}');
}
}
}
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>
Exporting
Exporting allows you to save or maintain the created conditions through the Query Builder. You can export the defined conditions by the following ways.
Exporting to JSON
You can export the defined conditions to structured JSON object through the getRules
method.
Exporting to SQL
Exporting to Inline SQL
You can export the defined conditions to Inline SQL query through the getSqlFromRules
method.
Install Syncfusion Popup
packages using below command.
npm install @syncfusion/ej2-vue-popups --save
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder width="70%" ref="querybuilder" :dataSource="dataSource" :rule="importRules">
<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>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="getSql">Get SQL</ejs-button>
<ejs-button cssClass="e-qbr-button" :isPrimary="true" v-on:click.native="getJson">Get JSON</ejs-button>
<ejs-dialog ref="dialogObj" :header="header" :animationSettings="animationSettings" :showCloseIcon="true" :visible="false" width="500px" height="80%">
</ejs-dialog>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);
Vue.use(QueryBuilderPlugin);
export default {
data: function() {
return {
dataSource: hardwareData,
importRules: {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
}]
},
header: 'Querybuilder rule',
animationSettings: { effect: 'Zoom', duration: 400 },
};
},
methods: {
getSql: function(event) {
this.$refs.dialogObj.content = this.$refs.querybuilder.ej2Instances.getSqlFromRules(this.$refs.querybuilder.ej2Instances.getRules());
this.$refs.dialogObj.show();
}
getJson: function(event) {
var validRule = this.$refs.querybuilder.ej2Instances.getValidRules(this.$refs.querybuilder.ej2Instances.rule);
this.$refs.dialogObj.content = '<pre>' + JSON.stringify(validRule, null, 4) + '</pre>';
this.$refs.dialogObj.show();
}
}
}
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;
}
.e-qb-button {
margin: 2% 1% 0 15%;
}
.e-qbr-button {
margin: 2% 1% 0 1%;
}
</style>
Exporting to Parameter SQL
You can export the defined conditions to Parameter SQL query through the getParameterizedSql
method.
<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="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>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="getSqlClick">Get Parameter sql</ejs-button>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="getRuleClick">Get Rule</ejs-button>
<ejs-dialog id="dialog" ref="Dialog" :width="width" :header='header' :visible="visible" :content="Content" :beforeOpen="beforeOpen" :animationSettings="animateSettings" :showCloseIcon="showCloseIcon"></ejs-dialog>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { QueryBuilderPlugin, QueryLibrary, QueryBuilder } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
Vue.use(DialogPlugin);
Vue.use(QueryBuilderPlugin);
Vue.use(ButtonPlugin);
QueryBuilder.Inject(QueryLibrary);
export default {
data: function() {
return {
animateSettings: { effect: 'Zoom' },
width:'50%',
showCloseIcon: true,
visible: false,
header: 'Query builder',
content: '',
dataSource: hardwareData,
importRules: {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
},
{
'condition': 'and',
'rules': [{
'label': 'Status',
'field': 'Status',
'type': 'string',
'operator': 'notequal',
'value': 'Pending'
},
{
'label': 'Task ID',
'field': 'TaskID',
'type': 'number',
'operator': 'equal',
'value': 5675
}]
}]
}
};
},
methods: {
getSqlClick: function() {
this.$refs.Dialog.content = JSON.stringify(this.$refs.querybuilder.ej2Instances.getParameterizedSql(this.$refs.querybuilder.ej2Instances.getRules()), null, 2);
this.$refs.Dialog.show();
},
getRuleClick: function() {
var validRule = this.$refs.querybuilder.ej2Instances.getValidRules(this.$refs.querybuilder.ej2Instances.rule);
this.$refs.Dialog.content = JSON.stringify(validRule, null, 4);
this.$refs.Dialog.show();
}
}
}
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>
Exporting to Named Parameter SQL
You can export the defined conditions to Named Parameter SQL query through the getParameterizedNamedSql
method.
<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="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>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="getSqlClick">Get Parameter Named sql</ejs-button>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="getRuleClick">Get Rule</ejs-button>
</div>
<ejs-dialog id="dialog" ref="Dialog" :header="header" :width="width" :visible="visible" :content="Content" :beforeOpen="beforeOpen" :animationSettings="animateSettings" :showCloseIcon="showCloseIcon"></ejs-dialog>
</div>
</template>
<script>
import Vue from 'vue';
import { QueryBuilderPlugin, QueryLibrary, QueryBuilder } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
Vue.use(DialogPlugin);
Vue.use(QueryBuilderPlugin);
Vue.use(ButtonPlugin);
QueryBuilder.Inject(QueryLibrary);
export default {
data: function() {
return {
animateSettings: { effect: 'Zoom' },
width:'50%',
showCloseIcon: true,
visible: false,
header: 'Query builder',
content: '',
dataSource: hardwareData,
importRules: {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
},
{
'condition': 'and',
'rules': [{
'label': 'Status',
'field': 'Status',
'type': 'string',
'operator': 'notequal',
'value': 'Pending'
},
{
'label': 'Task ID',
'field': 'TaskID',
'type': 'number',
'operator': 'equal',
'value': 5675
}]
}]
}
};
},
methods: {
getSqlClick: function() {
this.$refs.Dialog.content = JSON.stringify(this.$refs.querybuilder.ej2Instances.getParameterizedNamedSql(this.$refs.querybuilder.ej2Instances.getRules()), null, 2);
this.$refs.Dialog.show();
},
getRuleClick: function() {
var validRule = this.$refs.querybuilder.ej2Instances.getValidRules(this.$refs.querybuilder.ej2Instances.rule);
this.$refs.Dialog.content = JSON.stringify(validRule, null, 4);
this.$refs.Dialog.show();
}
}
}
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>
Exporting to MongoDB
You can export the defined conditions to MongoDB query through the getMongoQuery
method.
<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="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>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="getMongoClick">Get MongoDB</ejs-button>
<ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="getRuleClick">Get Rule</ejs-button>
</div>
<ejs-dialog id="dialog" ref="Dialog" :header="header" :width="width" :visible="visible" :content="Content" :beforeOpen="beforeOpen" :animationSettings="animateSettings" :showCloseIcon="showCloseIcon"></ejs-dialog>
</div>
</template>
<script>
import Vue from 'vue';
import { QueryBuilderPlugin, QueryLibrary, QueryBuilder } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
Vue.use(DialogPlugin);
Vue.use(QueryBuilderPlugin);
Vue.use(ButtonPlugin);
QueryBuilder.Inject(QueryLibrary);
export default {
data: function() {
return {
animateSettings: { effect: 'Zoom' },
width:'50%',
showCloseIcon: true,
visible: false,
header: 'Query builder',
content: '',
dataSource: hardwareData,
importRules: {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
},
{
'condition': 'and',
'rules': [{
'label': 'Status',
'field': 'Status',
'type': 'string',
'operator': 'notequal',
'value': 'Pending'
},
{
'label': 'Task ID',
'field': 'TaskID',
'type': 'number',
'operator': 'equal',
'value': 5675
}]
}]
}
};
},
methods: {
getMongoClick: function() {
this.$refs.Dialog.content = this.$refs.querybuilder.ej2Instances.getMongoQuery(this.$refs.querybuilder.ej2Instances.getRules());
this.$refs.Dialog.show();
},
getRuleClick: function() {
var validRule = this.$refs.querybuilder.ej2Instances.getValidRules(this.$refs.querybuilder.ej2Instances.rule);
this.$refs.Dialog.content = JSON.stringify(validRule, null, 4);
this.$refs.Dialog.show();
}
}
}
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>