Import export in Vue Query builder component
16 Mar 202324 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.
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
Importing from JSON
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
You can set the conditions from 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>
Exporting
16 Mar 202324 minutes to read
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
You can export the defined conditions to SQL query through the getRulesFromSQL
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>