Skip to content

Commit 4d5bb53

Browse files
ArulrajAbooArulrajAboo
committed
Added the example project.
1 parent 06ec0e6 commit 4d5bb53

File tree

10 files changed

+491
-2
lines changed

10 files changed

+491
-2
lines changed

‎README.md

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
# Getting-Started-with-the-Vue-Query-Builder-Component
2-
A quick start project that shows how to create and configure the Syncfusion Vue Query Builder component in a Vue project. This project contains simple code to bind a data source, customize the columns, add rules at initial load, filter Data Grid records using the Query Builder.
1+
# Getting Started with the Vue Query Builder Component
2+
3+
A quick start project that shows how to create and configure the Syncfusion [Vue Query Builder](https://www.syncfusion.com/vue-components/vue-query-builder?utm_source=github&utm_medium=listing&utm_campaign=tutorial-videos-vue-query-builder-gettingstarted-sample) component in a Vue project. This project contains simple code to bind a data source, customize the columns, and add rules at initial load. It also contains code to filter Data Grid records using the Query Builder.
4+
5+
Watch the video: Coming soon…
6+
7+
Refer to the following documentation to learn about the Vue Query Builder component: https://ej2.syncfusion.com/vue/documentation/query-builder/vue-3-getting-started
8+
9+
Check out this online example of the Vue Query Builder component: https://ej2.syncfusion.com/vue/demos/#/material3/query-builder/default.html
10+
11+
Before working on this project, make sure you have the latest versions of Node.js and Visual Studio Code on your machine.
12+
13+
## How to run this application
14+
To run this application, you need to clone the `Getting-Started-with-the-Vue-Query-Builder-Component` repository and open it in Visual Studio Code. Then, you can install all the necessary Vue packages in your project using the `npm install` command and run your project using the `npm run dev` command.

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-grids": "^26.2.8",
13+
"@syncfusion/ej2-vue-querybuilder": "^26.2.8",
14+
"vue": "^3.4.35"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^5.1.2",
18+
"vite": "^5.4.0"
19+
}
20+
}

‎public/vite.svg

+1
Loading

‎src/App.vue

+307
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
<template>
2+
<div class="container">
3+
<div class="wrapper">
4+
<ejs-querybuilder :dataSource="dataSource" :ruleChange="onRuleChange"
5+
ref="querybuilder" :rule="rule">
6+
<e-columns>
7+
<e-column field="EmployeeID" label="Employee ID" type="number"></e-column>
8+
<e-column field='FirstName' label='First Name' type='string' />
9+
<e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='string' />
10+
<e-column field='Title' label='Title' type='string' />
11+
<e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' />
12+
<e-column field='Country' label='Country' type='string' />
13+
<e-column field='City' label='City' type='string' />
14+
</e-columns>
15+
</ejs-querybuilder>
16+
</div>
17+
<div class="wrapper">
18+
<ejs-grid :dataSource="gridDataSource" ref="grid" :created="onGridCreated">
19+
<e-columns>
20+
<e-column field='EmployeeID' width='70' textAlign="Right"></e-column>
21+
<e-column field='FirstName' width='70' textAlign="Left"></e-column>
22+
<e-column field='TitleOfCourtesy' width='80' textAlign="Left"></e-column>
23+
<e-column field='Title' width='100' textAlign="Left"></e-column>
24+
<e-column field='HireDate' width='80' format="dd/MM/yyyy" textAlign="Right"></e-column>
25+
<e-column field='Country' width='80' textAlign="Left"></e-column>
26+
<e-column field='City' width='80' textAlign="Left"></e-column>
27+
</e-columns>
28+
</ejs-grid>
29+
</div>
30+
</div>
31+
</template>
32+
33+
<script>
34+
import { QueryBuilderComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-vue-querybuilder';
35+
import { GridComponent } from '@syncfusion/ej2-vue-grids';
36+
import { DataManager, Query } from '@syncfusion/ej2-data';
37+
import { isNullOrUndefined } from '@syncfusion/ej2-base';
38+
39+
let employeeData = [
40+
{
41+
'EmployeeID': 1,
42+
'LastName': 'Davolio',
43+
'FirstName': 'Nancy',
44+
'Title': 'Sales Representative',
45+
'TitleOfCourtesy': 'Ms.',
46+
'BirthDate': new Date(-664743600000),
47+
'HireDate': new Date(704692800000),
48+
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
49+
'City': 'Seattle',
50+
'Region': 'WA',
51+
'PostalCode': '98122',
52+
'Country': 'USA'
53+
},
54+
{
55+
'EmployeeID': 2,
56+
'LastName': 'Fuller',
57+
'FirstName': 'Andrew',
58+
'Title': 'Vice President',
59+
'TitleOfCourtesy': 'Dr.',
60+
'BirthDate': new Date(-563828400000),
61+
'HireDate': new Date(713764800000),
62+
'Address': '908 W. Capital Way',
63+
'City': 'Tacoma',
64+
'Region': 'WA',
65+
'PostalCode': '98401',
66+
'Country': 'USA',
67+
},
68+
{
69+
'EmployeeID': 3,
70+
'LastName': 'Leverling',
71+
'FirstName': 'Janet',
72+
'Title': 'Sales Representative',
73+
'TitleOfCourtesy': 'Ms.',
74+
'BirthDate': new Date(-200088000000),
75+
'HireDate': new Date(702104400000),
76+
'Address': '722 Moss Bay Blvd.',
77+
'City': 'Kirkland',
78+
'Region': 'WA',
79+
'PostalCode': '98033',
80+
'Country': 'USA',
81+
},
82+
{
83+
'EmployeeID': 4,
84+
'LastName': 'Peacock',
85+
'FirstName': 'Margaret',
86+
'Title': 'Sales Representative',
87+
'TitleOfCourtesy': 'Mrs.',
88+
'BirthDate': new Date(-1018814400000),
89+
'HireDate': new Date(736401600000),
90+
'Address': '4110 Old Redmond Rd.',
91+
'City': 'Redmond',
92+
'Region': 'WA',
93+
'PostalCode': '98052',
94+
'Country': 'USA',
95+
},
96+
{
97+
'EmployeeID': 5,
98+
'LastName': 'Buchanan',
99+
'FirstName': 'Steven',
100+
'Title': 'Sales Manager',
101+
'TitleOfCourtesy': 'Mr.',
102+
'BirthDate': new Date(-468010800000),
103+
'HireDate': new Date(750830400000),
104+
'Address': '14 Garrett Hill',
105+
'City': 'London',
106+
'Region': null,
107+
'PostalCode':
108+
'SW1 8JR',
109+
'Country': 'UK',
110+
},
111+
{
112+
'EmployeeID': 6,
113+
'LastName': 'Suyama',
114+
'FirstName': 'Michael',
115+
'Title': 'Sales Representative',
116+
'TitleOfCourtesy': 'Mr.',
117+
'BirthDate': new Date(-205185600000),
118+
'HireDate': new Date(750830400000),
119+
'Address': 'Coventry House\r\nMiner Rd.',
120+
'City': 'London',
121+
'Region': null,
122+
'PostalCode': 'EC2 7JR',
123+
'Country': 'UK',
124+
},
125+
{
126+
'EmployeeID': 7,
127+
'LastName': 'King',
128+
'FirstName': 'Robert',
129+
'Title': 'Sales Representative',
130+
'TitleOfCourtesy': 'Mr.',
131+
'BirthDate': new Date(-302731200000),
132+
'HireDate': new Date(757486800000),
133+
'Address': 'Edgeham Hollow\r\nWinchester Way',
134+
'City': 'London',
135+
'Region': null,
136+
'PostalCode': 'RG1 9SP',
137+
'Country': 'UK',
138+
},
139+
{
140+
'EmployeeID': 8,
141+
'LastName': 'Callahan',
142+
'FirstName': 'Laura',
143+
'Title': 'Inside Sales Coordinator',
144+
'TitleOfCourtesy': 'Ms.',
145+
'BirthDate': new Date(-377982000000),
146+
'HireDate': new Date(762843600000),
147+
'Address': '4726 - 11th Ave. N.E.',
148+
'City': 'Seattle',
149+
'Region': 'WA',
150+
'PostalCode': '98105',
151+
'Country': 'USA',
152+
},
153+
{
154+
'EmployeeID': 9,
155+
'LastName': 'Dodsworth',
156+
'FirstName': 'Anne',
157+
'Title': 'Sales Representative',
158+
'TitleOfCourtesy': 'Ms.',
159+
'BirthDate': new Date(-123966000000),
160+
'HireDate': new Date(784875600000),
161+
'Address': '7 Houndstooth Rd.',
162+
'City': 'London',
163+
'Region': null,
164+
'PostalCode': 'WG2 7LT',
165+
'Country': 'UK',
166+
},
167+
{
168+
'EmployeeID': 10,
169+
'LastName': 'Smith',
170+
'FirstName': 'John',
171+
'Title': 'Marketing Manager',
172+
'TitleOfCourtesy': 'Mr.',
173+
'BirthDate': new Date(-1104556800000),
174+
'HireDate': new Date(821328000000),
175+
'Address': '123 Main St',
176+
'City': 'New York',
177+
'Region': 'NY',
178+
'PostalCode': '10001',
179+
'Country': 'USA',
180+
},
181+
{
182+
'EmployeeID': 11,
183+
'LastName': 'Johnson',
184+
'FirstName': 'Emily',
185+
'Title': 'HR Specialist',
186+
'TitleOfCourtesy': 'Ms.',
187+
'BirthDate': new Date(-956985600000),
188+
'HireDate': new Date(916604400000),
189+
'Address': '456 Elm St',
190+
'City': 'Chicago',
191+
'Region': 'IL',
192+
'PostalCode': '60601',
193+
'Country': 'USA',
194+
},
195+
{
196+
'EmployeeID': 12,
197+
'LastName': 'Taylor',
198+
'FirstName': 'Rachel',
199+
'Title': 'Marketing Specialist',
200+
'TitleOfCourtesy': 'Ms.',
201+
'BirthDate': new Date(-853305600000),
202+
'HireDate': new Date(954506400000),
203+
'Address': '789 Pine St',
204+
'City': 'San Francisco',
205+
'Region': 'CA',
206+
'PostalCode': '94108',
207+
'Country': 'USA',
208+
},
209+
{
210+
'EmployeeID': 13,
211+
'LastName': 'Adams',
212+
'FirstName': 'Michael',
213+
'Title': 'Financial Analyst',
214+
'TitleOfCourtesy': 'Mr.',
215+
'BirthDate': new Date(-789820800000),
216+
'HireDate': new Date(1025558400000),
217+
'Address': '1010 Oak Ave',
218+
'City': 'New York',
219+
'Region': 'NY',
220+
'PostalCode': '10016',
221+
'Country': 'USA',
222+
}
223+
];
224+
225+
export default {
226+
components: {
227+
"ejs-querybuilder": QueryBuilderComponent,
228+
"e-columns": ColumnsDirective,
229+
"e-column": ColumnDirective,
230+
"ejs-grid": GridComponent
231+
},
232+
data(){
233+
return {
234+
dataSource: employeeData,
235+
gridDataSource: employeeData,
236+
rule:{
237+
'condition': 'and',
238+
'rules':[{
239+
'field': 'Title',
240+
'operator': 'startswith',
241+
'value': 'Sales'
242+
},
243+
{
244+
'field': 'Country',
245+
'operator': 'startswith',
246+
'value': 'UK'
247+
}]
248+
}
249+
};
250+
},
251+
methods:{
252+
onRuleChange(args){
253+
const columnsToSelect = ["EmployeeID", "FirstName", "TitleOfCourtesy", "Title", "HireDate", "Country", "City"];
254+
const predicate = this.$refs.querybuilder.ej2Instances.getPredicate(args.rule);
255+
let query = new Query().select(columnsToSelect);
256+
257+
if(!isNullOrUndefined(predicate)){
258+
query = query.where(predicate);
259+
}
260+
new DataManager(this.dataSource)
261+
.executeQuery(query)
262+
.then((e) => {
263+
this.gridDataSource = e.result;
264+
this.$refs.grid.ej2Instances.refresh();
265+
});
266+
},
267+
onGridCreated(){
268+
this.onRuleChange({
269+
rule: this.$refs.querybuilder.ej2Instances.getValidRules(
270+
this.$refs.querybuilder.ej2Instances.rule
271+
)
272+
});
273+
}
274+
}
275+
}
276+
</script>
277+
<style>
278+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
279+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
280+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
281+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
282+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
283+
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
284+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
285+
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
286+
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
287+
288+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
289+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
290+
291+
.container {
292+
display: flex;
293+
flex-direction: column;
294+
align-items: center;
295+
width: 60%;
296+
margin: 0 auto;
297+
position: absolute;
298+
top: 20px;
299+
left: 50%;
300+
transform: translateX(-50%);
301+
}
302+
303+
.wrapper {
304+
width: 100%;
305+
padding: 10px;
306+
}
307+
</style>

‎src/assets/vue.svg

+1
Loading

0 commit comments

Comments
 (0)