Data binding in Vue Query builder component

25 Apr 202524 minutes to read

The Query Builder usesDataManager, which supports both RESTful JSON data services binding and local JavaScript object array binding. ThedataSource property can be assigned either with the instance ofDataManager or JavaScript object array collection. It supports two kinds of data binding method:

Local data
Remote data

Local data

To bind local data to the query builder, you can assign thedataSource property with a JavaScript object array. The local data source can also be provided as an instance of theDataManager.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divclass="control-section"><divclass="col-lg-12 querybuilder-control"><ejs-querybuilderwidth="70%":dataSource="dataSource":rule="importRules"><e-columns><e-columnfield='EmployeeID'label='Employee ID'type='number'/><e-columnfield='FirstName'label='First Name'type='string'/><e-columnfield='TitleOfCourtesy'label='Title Of Courtesy'type='boolean':values="values"/><e-columnfield='Title'label='Title'type='string'/><e-columnfield='HireDate'label='Hire Date'type='date'format='dd/MM/yyyy'/><e-columnfield='Country'label='Country'type='string'/><e-columnfield='City'label='City'type='string'/></e-columns></ejs-querybuilder></div></div></template><scriptsetup>import{QueryBuilderComponentasEjsQuerybuilder,ColumnsDirectiveasEColumns,ColumnDirectiveasEColumn}from"@syncfusion/ej2-vue-querybuilder";constdataSource=employeeData;constvalues=['Mr.','Mrs.'];constimportRules={'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'}]};varemployeeData=[{'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:0auto;}</style>

<template><divclass="control-section"><divclass="col-lg-12 querybuilder-control"><ejs-querybuilderwidth="70%":dataSource="dataSource":rule="importRules"><e-columns><e-columnfield='EmployeeID'label='Employee ID'type='number'/><e-columnfield='FirstName'label='First Name'type='string'/><e-columnfield='TitleOfCourtesy'label='Title Of Courtesy'type='boolean':values="values"/><e-columnfield='Title'label='Title'type='string'/><e-columnfield='HireDate'label='Hire Date'type='date'format='dd/MM/yyyy'/><e-columnfield='Country'label='Country'type='string'/><e-columnfield='City'label='City'type='string'/></e-columns></ejs-querybuilder></div></div></template><script>import{QueryBuilderComponent,ColumnsDirective,ColumnDirective}from"@syncfusion/ej2-vue-querybuilder";exportdefault{name:"App",components:{"ejs-querybuilder":QueryBuilderComponent,"e-columns":ColumnsDirective,"e-column":ColumnDirective,},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'}]}};}}varemployeeData=[{'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:0auto;}</style>

By default,DataManager usesJsonAdaptor for local data-binding.

Remote data

To bind remote data to the query builder, assign service data as an instance ofDataManager to thedataSource property. To interact with remote data source, provide the endpointurl.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divclass="control-section"><divclass="col-lg-12 querybuilder-control"><ejs-querybuilderwidth="70%":dataSource="data":rule="importRules"><e-columns><e-columnfield='EmployeeID'label='Employee ID'type='number'/><e-columnfield='FirstName'label='First Name'type='string'/><e-columnfield='TitleOfCourtesy'label='Title Of Courtesy'type='boolean':values="values"/><e-columnfield='Title'label='Title'type='string'/><e-columnfield='HireDate'label='Hire Date'type='date'format='dd/MM/yyyy'/><e-columnfield='Country'label='Country'type='string'/><e-columnfield='City'label='City'type='string'/></e-columns></ejs-querybuilder></div></div></template><scriptsetup>import{QueryBuilderComponentasEjsQuerybuilder,ColumnsDirectiveasEColumns,ColumnDirectiveasEColumn}from"@syncfusion/ej2-vue-querybuilder";import{DataManager,ODataAdaptor}from"@syncfusion/ej2-data";constvalues=['Mr.','Mrs.'];constdata=newDataManager({url:"https://services.syncfusion.com/vue/production/api/Employees/",adaptor:newODataAdaptor(),});constimportRules={'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:0auto;}</style>

<template><divclass="control-section"><divclass="col-lg-12 querybuilder-control"><ejs-querybuilderwidth="70%":dataSource="data":rule="importRules"><e-columns><e-columnfield='EmployeeID'label='Employee ID'type='number'/><e-columnfield='FirstName'label='First Name'type='string'/><e-columnfield='TitleOfCourtesy'label='Title Of Courtesy'type='boolean':values="values"/><e-columnfield='Title'label='Title'type='string'/><e-columnfield='HireDate'label='Hire Date'type='date'format='dd/MM/yyyy'/><e-columnfield='Country'label='Country'type='string'/><e-columnfield='City'label='City'type='string'/></e-columns></ejs-querybuilder></div></div></template><script>import{QueryBuilderComponent,ColumnDirective,ColumnsDirective}from"@syncfusion/ej2-vue-querybuilder";import{DataManager,ODataAdaptor}from"@syncfusion/ej2-data";exportdefault{name:"App",components:{"ejs-querybuilder":QueryBuilderComponent,"e-columns":ColumnsDirective,"e-column":ColumnDirective,},data(){return{values:['Mr.','Mrs.'],data:newDataManager({url:"https://services.syncfusion.com/vue/production/api/Employees/",adaptor:newODataAdaptor(),}),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:0auto;}</style>

By default,DataManager usesODataAdaptor for remote data-binding.

Binding with OData services

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.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divclass="control-section"><divclass="col-lg-12 querybuilder-control"><ejs-querybuilderwidth="70%":dataSource="data":rule="importRules"><e-columns><e-columnfield='EmployeeID'label='Employee ID'type='number'/><e-columnfield='FirstName'label='First Name'type='string'/><e-columnfield='TitleOfCourtesy'label='Title Of Courtesy'type='boolean':values="values"/><e-columnfield='Title'label='Title'type='string'/><e-columnfield='HireDate'label='Hire Date'type='date'format='dd/MM/yyyy'/><e-columnfield='Country'label='Country'type='string'/><e-columnfield='City'label='City'type='string'/></e-columns></ejs-querybuilder></div></div></template><scriptsetup>import{QueryBuilderComponentasEjsQuerybuilder,ColumnDirectiveasEColumn,ColumnsDirectiveasEColumns}from"@syncfusion/ej2-vue-querybuilder";import{DataManager,ODataAdaptor}from"@syncfusion/ej2-data";constvalues=['Mr.','Mrs.'];constdata=newDataManager({url:"https://services.syncfusion.com/vue/production/api/Employees",adaptor:newODataAdaptor(),crossDomain:true});constimportRules={'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:0auto;}</style>

<template><divclass="control-section"><divclass="col-lg-12 querybuilder-control"><ejs-querybuilderwidth="70%":dataSource="data":rule="importRules"><e-columns><e-columnfield='EmployeeID'label='Employee ID'type='number'/><e-columnfield='FirstName'label='First Name'type='string'/><e-columnfield='TitleOfCourtesy'label='Title Of Courtesy'type='boolean':values="values"/><e-columnfield='Title'label='Title'type='string'/><e-columnfield='HireDate'label='Hire Date'type='date'format='dd/MM/yyyy'/><e-columnfield='Country'label='Country'type='string'/><e-columnfield='City'label='City'type='string'/></e-columns></ejs-querybuilder></div></div></template><script>import{QueryBuilderComponent,ColumnDirective,ColumnsDirective}from"@syncfusion/ej2-vue-querybuilder";import{DataManager,ODataAdaptor}from"@syncfusion/ej2-data";exportdefault{name:"App",components:{"ejs-querybuilder":QueryBuilderComponent,"e-columns":ColumnsDirective,"e-column":ColumnDirective,},data(){return{values:['Mr.','Mrs.'],data:newDataManager({url:"https://services.syncfusion.com/vue/production/api/Employees",adaptor:newODataAdaptor(),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:0auto;}</style>

Binding with OData v4 services

The ODataV4 is an improved version of OData protocols, and theDataManager can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to theodata documentation. To bind OData v4 service, use theODataV4Adaptor.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divclass="control-section"><divclass="col-lg-12 querybuilder-control"><ejs-querybuilderwidth="70%":dataSource="data":rule="importRules"><e-columns><e-columnfield='EmployeeID'label='Employee ID'type='number'/><e-columnfield='FirstName'label='First Name'type='string'/><e-columnfield='TitleOfCourtesy'label='Title Of Courtesy'type='boolean':values="values"/><e-columnfield='Title'label='Title'type='string'/><e-columnfield='HireDate'label='Hire Date'type='date'format='dd/MM/yyyy'/><e-columnfield='Country'label='Country'type='string'/><e-columnfield='City'label='City'type='string'/></e-columns></ejs-querybuilder></div></div></template><scriptsetup>import{QueryBuilderComponentasEjsQuerybuilder,ColumnDirectiveasEColumn,ColumnsDirectiveasEColumns}from"@syncfusion/ej2-vue-querybuilder";import{DataManager,ODataV4Adaptor}from"@syncfusion/ej2-data";constvalues=['Mr.','Mrs.'];constdata=newDataManager({url:"https://services.odata.org/V4/Northwind/Northwind.svc/Orders/",adaptor:newODataV4Adaptor(),crossDomain:true});constimportRules={'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:0auto;}</style>

<template><divclass="control-section"><divclass="col-lg-12 querybuilder-control"><ejs-querybuilderwidth="70%":dataSource="data":rule="importRules"><e-columns><e-columnfield='EmployeeID'label='Employee ID'type='number'/><e-columnfield='FirstName'label='First Name'type='string'/><e-columnfield='TitleOfCourtesy'label='Title Of Courtesy'type='boolean':values="values"/><e-columnfield='Title'label='Title'type='string'/><e-columnfield='HireDate'label='Hire Date'type='date'format='dd/MM/yyyy'/><e-columnfield='Country'label='Country'type='string'/><e-columnfield='City'label='City'type='string'/></e-columns></ejs-querybuilder></div></div></template><script>import{QueryBuilderComponent,ColumnsDirective,ColumnDirective}from"@syncfusion/ej2-vue-querybuilder";import{DataManager,ODataV4Adaptor}from"@syncfusion/ej2-data";exportdefault{name:"App",components:{"ejs-querybuilder":QueryBuilderComponent,"e-columns":ColumnsDirective,"e-column":ColumnDirective,},data(){return{values:['Mr.','Mrs.'],data:newDataManager({url:"https://services.odata.org/V4/Northwind/Northwind.svc/Orders/",adaptor:newODataV4Adaptor(),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:0auto;}</style>

Web API

You can useWebApiAdaptor to bind query builder with Web API created using OData endpoint.

<template>    <div>        <div>            <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 setup>import { QueryBuilderComponent } from "@syncfusion/ej2-vue-querybuilder";import { DataManager, WebApiAdaptor } from "@syncfusion/ej2-data";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>

Data Manager

You can use the created conditions in DataManager through thegetPredicate 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

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divclass="control-section"><divclass="col-lg-12 querybuilder-control"><ejs-querybuilderref="querybuilder"width="70%":dataSource="dataSource":rule="importRules"><e-columns><e-columnfield='EmployeeID'label='Employee ID'type='number'/><e-columnfield='FirstName'label='First Name'type='string'/><e-columnfield='TitleOfCourtesy'label='Title Of Courtesy'type='boolean':values="values"/><e-columnfield='Title'label='Title'type='string'/><e-columnfield='HireDate'label='Hire Date'type='date'format='dd/MM/yyyy'/><e-columnfield='Country'label='Country'type='string'/><e-columnfield='City'label='City'type='string'/></e-columns></ejs-querybuilder><ejs-buttoncssClass="e-qb-button":isPrimary="true"v-on:click="btnClick">Get Data</ejs-button></div></div></template><scriptsetup>import{QueryBuilderComponentasEjsQuerybuilder,ColumnDirectiveasEColumn,ColumnsDirectiveasEColumns}from"@syncfusion/ej2-vue-querybuilder";import{DataManager,Query}from'@syncfusion/ej2-data';import{ButtonComponentasEjsButton}from"@syncfusion/ej2-vue-buttons";constvalues=['Mr.','Mrs.'];constdataSource=employeeData;constimportRules={'condition':'and','rules':[{'label':'Employee ID','field':'EmployeeID','type':'number','operator':'equal','value':1}]};constbtnClick=function(){vardataManagerQuery=newQuery().select(['EmployeeID','Title','City']);varfltrDataSource=[];newDataManager(employeeData).executeQuery(dataManagerQuery).then((e)=>{(e.result).forEach((data)=>{fltrDataSource.push(data);//recieve the result data});});};varemployeeData=[{'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:0auto;}.e-qb-button{margin:2%1%015%;}</style>

<template><divclass="control-section"><divclass="col-lg-12 querybuilder-control"><ejs-querybuilderref="querybuilder"width="70%":dataSource="dataSource":rule="importRules"><e-columns><e-columnfield='EmployeeID'label='Employee ID'type='number'/><e-columnfield='FirstName'label='First Name'type='string'/><e-columnfield='TitleOfCourtesy'label='Title Of Courtesy'type='boolean':values="values"/><e-columnfield='Title'label='Title'type='string'/><e-columnfield='HireDate'label='Hire Date'type='date'format='dd/MM/yyyy'/><e-columnfield='Country'label='Country'type='string'/><e-columnfield='City'label='City'type='string'/></e-columns></ejs-querybuilder><ejs-buttoncssClass="e-qb-button":isPrimary="true"v-on:click="btnClick">Get Data</ejs-button></div></div></template><script>import{QueryBuilderComponent,ColumnDirective,ColumnsDirective}from"@syncfusion/ej2-vue-querybuilder";import{DataManager,Query}from'@syncfusion/ej2-data';import{ButtonComponent}from"@syncfusion/ej2-vue-buttons";exportdefault{name:"App",components:{"ejs-querybuilder":QueryBuilderComponent,"e-columns":ColumnsDirective,"e-column":ColumnDirective,"ejs-button":ButtonComponent,},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(){vardataManagerQuery=newQuery().select(['EmployeeID','Title','City']);varfltrDataSource=[];newDataManager(employeeData).executeQuery(dataManagerQuery).then((e)=>{(e.result).forEach((data)=>{fltrDataSource.push(data);//recieve the result data});});}}}varemployeeData=[{'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:0auto;}.e-qb-button{margin:2%1%015%;}</style>

Complex Data Binding

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.

To learn about how to use the complex data binding features in Vue Query Builder, you can check on this video

In the following sample, complex data was bound in nested columns.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)

<template><divclass="control-section"><div><table><tr><td><ejs-buttonid="reset"class="e-control e-danger e-btn e-small"v-on:click='onReset'>Reset</ejs-button></td><td><ejs-buttonid="rule"class="e-control e-success e-btn e-small"v-on:click='onSetsqlRules'>SetSqlRules</ejs-button></td><td><ejs-buttonid="sql"class="e-control e-success e-btn e-small"v-on:click='onSetrules'>SetRules</ejs-button></td></tr></table></div><ejs-querybuilderid="querybuilder"ref="querybuilder":rule="importRules"separator="."enableNotCondition=true><e-columns><e-columnfield="Employee"label="Employee":columns='columns1'/><e-columnfield="Name"label="Name":columns="columns2"/><e-columnfield='Country'label='Country':columns="columns3"/></e-columns></ejs-querybuilder></div></template><scriptsetup>import{QueryBuilderComponentasEjsQuerybuilder,ColumnsDirectiveasEColumns,ColumnDirectiveasEColumn}from'@syncfusion/ej2-vue-querybuilder';import{ButtonComponentasEjsButton}from"@syncfusion/ej2-vue-buttons";import{ref}from'vue';constquerybuilder=ref(null);constimportRules={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'}]}]};constcolumns1=[{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'}];constcolumns2=[{field:'FirstName',label:'First Name',type:'string'},{field:'LastName',label:'Last Name',type:'string'}];constcolumns3=[{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'}];constonReset=function(){querybuilder.value.ej2Instances.reset();};constonSetsqlRules=function(){querybuilder.value.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)");};constonSetrules=function(){querybuilder.value.ej2Instances.setRules(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:12px012px12px;width:auto;}</style>

<template><divclass="control-section"><div><table><tr><td><ejs-buttonid="reset"class="e-control e-danger e-btn e-small"v-on:click='onReset'>Reset</ejs-button></td><td><ejs-buttonid="rule"class="e-control e-success e-btn e-small"v-on:click='onSetsqlRules'>SetSqlRules</ejs-button></td><td><ejs-buttonid="sql"class="e-control e-success e-btn e-small"v-on:click='onSetrules'>SetRules</ejs-button></td></tr></table></div><ejs-querybuilderid="querybuilder"ref="querybuilder":rule="importRules"separator="."enableNotCondition=true><e-columns><e-columnfield="Employee"label="Employee":columns='columns1'/><e-columnfield="Name"label="Name":columns="columns2"/><e-columnfield='Country'label='Country':columns="columns3"/></e-columns></ejs-querybuilder></div></template><script>import{QueryBuilderComponent,ColumnDirective,ColumnsDirective}from'@syncfusion/ej2-vue-querybuilder';import{ButtonComponent}from"@syncfusion/ej2-vue-buttons";exportdefault{name:"App",components:{"ejs-button":ButtonComponent,"ejs-querybuilder":QueryBuilderComponent,"e-columns":ColumnsDirective,"e-column":ColumnDirective,},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(){this.$refs.querybuilder.ej2Instances.reset();},onSetsqlRules:function(){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(){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:12px012px12px;width:auto;}</style>

Help us improve this page

Correct inaccurate or outdated content