Skip to content

Commit 2867830

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent 4d61561 commit 2867830

File tree

10 files changed

+483
-2
lines changed

10 files changed

+483
-2
lines changed

‎README.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
# How-to-Customize-and-Interact-with-Vue-Query-Builder-UI
2-
A quick start Vue project that shows how to interact with and customize the views in the Syncfusion Vue Query Builder component. This project contains simple code to lock, clone, and drag-and-drop groups and rules; set the maximum group count; and set rule validations.
1+
# How to Customize and Interact with Vue Query Builder UI
2+
3+
A quick start project that shows how to customize and interact with 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-interaction-sample) component UI in a Vue project. This project contains simple code to lock, clone, and drag-and-drop groups and rules; set the maximum group count; and set rule validations. It also contains code to change display modes, the summary view, and separate connectors.
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/lock-group-rule
8+
9+
Check out this online example of the Vue Query Builder component: https://ej2.syncfusion.com/vue/demos/#/material3/query-builder/lock-group.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 `How-to-Customize-and-Interact-with-Vue-Query-Builder-UI` 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

Lines changed: 13 additions & 0 deletions
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

Lines changed: 20 additions & 0 deletions
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-buttons": "^26.2.9",
13+
"@syncfusion/ej2-vue-querybuilder": "^26.2.5",
14+
"vue": "^3.4.31"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^5.0.5",
18+
"vite": "^5.3.4"
19+
}
20+
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue

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

‎src/assets/vue.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)