Skip to content

Commit 37ca4f7

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent 94622a2 commit 37ca4f7

File tree

10 files changed

+371
-2
lines changed

10 files changed

+371
-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-Bind-Complex-Data-in-Vue-Query-Builder
2-
A quick start Vue project that shows how to bind complex data in the Syncfusion Vue Query Builder component. This project contains simple code to bind complex data using nested columns and directly connect the complex data source to the component.
1+
# How to Bind Complex Data in Vue Query Builder
2+
3+
A quick start Vue project that shows how to bind complex data in 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-complexdatabinding-sample) component. This project contains simple code to bind complex data using nested columns and directly connect the complex data source to the component.
4+
5+
Watch the video: Coming soon…
6+
7+
Refer to the documentation to learn about the Vue Query Builder component: https://ej2.syncfusion.com/vue/documentation/query-builder/data-binding#complex-data-binding
8+
9+
Check out this online example of the Vue Query Builder component: https://ej2.syncfusion.com/vue/demos/#/material3/query-builder/complex-databinding.html.
10+
11+
Before working on this project, make sure your machine has the latest versions of Node.js and Visual Studio Code.
12+
13+
## How to run this application
14+
To run this application, you need to clone the `How-to-Bind-Complex-Data-in-Vue-Query-Builder` repository and open it in Visual Studio Code. Then, 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: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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-querybuilder": "^26.2.11",
13+
"vue": "^3.4.31"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^5.1.3",
17+
"vite": "^5.4.2"
18+
}
19+
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<template>
2+
<div class="container">
3+
<ejs-querybuilder :rule="importRules"
4+
separator="." fieldMode="DropdownTree"
5+
:dataSource="complexData">
6+
<!-- <e-columns>
7+
<e-column field="Employee" label="Employee"
8+
:columns="employeeColumns"></e-column>
9+
<e-column field="Name" label="Name" :columns="nameColumns" />
10+
<e-column field="Country" label="Country"
11+
:columns="countryColumns" />
12+
</e-columns> -->
13+
</ejs-querybuilder>
14+
</div>
15+
</template>
16+
<script>
17+
import { QueryBuilderComponent, ColumnsDirective, ColumnDirective }
18+
from "@syncfusion/ej2-vue-querybuilder";
19+
20+
const complexData=[
21+
{
22+
Employee: {
23+
ID: 1001,
24+
DOB: new Date(1996, 4, 23),
25+
HireDate: new Date(2015, 3, 21),
26+
Salary: 1000,
27+
Age: 23,
28+
Title: "Mr"
29+
},
30+
Name: {
31+
FirstName: "Joe",
32+
LastName: "Peter"
33+
},
34+
Country: {
35+
State: {
36+
City: "San Diego",
37+
Zipcode: 22434
38+
},
39+
Region: "Pacific",
40+
Name: "USA"
41+
}
42+
},
43+
{
44+
Employee: {
45+
ID: 1002,
46+
DOB: new Date(1995, 2, 28),
47+
HireDate: new Date(2015, 5, 25),
48+
Salary: 1300,
49+
Age: 25,
50+
Title: "Mr"
51+
},
52+
Name: {
53+
FirstName: "Mark",
54+
LastName: "Lawrence"
55+
},
56+
Country: {
57+
State: {
58+
City: "Houston",
59+
Zipcode: 77001
60+
},
61+
Region: "South Central",
62+
Name: "USA"
63+
}
64+
},
65+
{
66+
Employee: {
67+
ID: 1003,
68+
DOB: new Date(1996, 7, 7),
69+
HireDate: new Date(2018, 9, 11),
70+
Salary: 1400,
71+
Age: 20,
72+
Title: "Mr"
73+
},
74+
Name: {
75+
FirstName: "David",
76+
LastName: "Malan"
77+
},
78+
Country: {
79+
State: {
80+
City: "Jersey City",
81+
Zipcode: 27097
82+
},
83+
Region: "Mid-Atlantic",
84+
Name: "USA"
85+
}
86+
}
87+
];
88+
89+
export default {
90+
components: {
91+
"ejs-querybuilder": QueryBuilderComponent,
92+
"e-columns": ColumnsDirective,
93+
"e-column": ColumnDirective
94+
},
95+
data(){
96+
return{
97+
complexData,
98+
importRules: {
99+
condition: 'and',
100+
rules: [
101+
{
102+
label: 'ID',
103+
field: 'Employee.ID',
104+
type: 'number',
105+
operator: 'equal',
106+
value: 1001
107+
},
108+
{
109+
label: 'First Name',
110+
field: 'Name.FirstName',
111+
type: 'string',
112+
operator: 'equal',
113+
value: 'Mark',
114+
},
115+
{
116+
condition: 'or',
117+
rules: [
118+
{
119+
label: 'City',
120+
field: 'Country.State.City',
121+
operator: 'equal',
122+
type: 'string',
123+
value: 'Jersey City',
124+
},
125+
{
126+
label: 'Date of birth',
127+
field: 'Employee.DOB',
128+
operator: 'equal',
129+
type: 'date',
130+
value: '7/7/96',
131+
},
132+
],
133+
}
134+
]
135+
},
136+
employeeColumns:[
137+
{ field: 'ID', label: 'ID', type: 'number' },
138+
{ field: 'DOB', label: 'Date of birth', type: 'date' },
139+
{ field: 'HireDate', label: 'Hire Date', type: 'date' },
140+
{ field: 'Salary', label: 'Salary', type: 'number' },
141+
{ field: 'Age', label: 'Age', type: 'number' },
142+
{ field: 'Title', label: 'Title', type: 'string' }
143+
],
144+
nameColumns: [
145+
{ field: 'FirstName', label: 'First Name', type: 'string' },
146+
{ field: 'LastName', label: 'Last Name', type: 'string' },
147+
],
148+
countryColumns: [
149+
{
150+
field: 'State',
151+
label: 'State',
152+
columns: [
153+
{ field: 'City', label: 'City', type: 'string' },
154+
{ field: 'Zipcode', label: 'Zip Code', type: 'number' },
155+
],
156+
},
157+
{ field: 'Region', label: 'Region', type: 'string' },
158+
{ field: 'Name', label: 'Country Name', type: 'string' },
159+
]
160+
}
161+
}
162+
};
163+
</script>
164+
165+
<style>
166+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
167+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
168+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
169+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
170+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
171+
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
172+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
173+
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
174+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
175+
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
176+
177+
.container {
178+
display: flex;
179+
flex-direction: column;
180+
align-items: center;
181+
width: 95%;
182+
margin: 0 auto;
183+
position: absolute;
184+
top: 20px;
185+
left: 50%;
186+
transform: translateX(-50%);
187+
}
188+
</style>

‎src/assets/vue.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Learn more about IDE Support for Vue in the
30+
<a
31+
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
32+
target="_blank"
33+
>Vue Docs Scaling up Guide</a
34+
>.
35+
</p>
36+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
37+
</template>
38+
39+
<style scoped>
40+
.read-the-docs {
41+
color: #888;
42+
}
43+
</style>

‎src/main.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
import { registerLicense } from '@syncfusion/ej2-base'
5+
registerLicense('Ngo9BigBOggjHTQxAR8/V1NCaF5cXmpCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWXlcd3RVQ2FfUUJwVkM=')
6+
createApp(App).mount('#app')

‎src/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
a {
17+
font-weight: 500;
18+
color: #646cff;
19+
text-decoration: inherit;
20+
}
21+
a:hover {
22+
color: #535bf2;
23+
}
24+
25+
body {
26+
margin: 0;
27+
display: flex;
28+
place-items: center;
29+
min-width: 320px;
30+
min-height: 100vh;
31+
}
32+
33+
h1 {
34+
font-size: 3.2em;
35+
line-height: 1.1;
36+
}
37+
38+
button {
39+
border-radius: 8px;
40+
border: 1px solid transparent;
41+
padding: 0.6em 1.2em;
42+
font-size: 1em;
43+
font-weight: 500;
44+
font-family: inherit;
45+
background-color: #1a1a1a;
46+
cursor: pointer;
47+
transition: border-color 0.25s;
48+
}
49+
button:hover {
50+
border-color: #646cff;
51+
}
52+
button:focus,
53+
button:focus-visible {
54+
outline: 4px auto -webkit-focus-ring-color;
55+
}
56+
57+
.card {
58+
padding: 2em;
59+
}
60+
61+
#app {
62+
max-width: 1280px;
63+
margin: 0 auto;
64+
padding: 2rem;
65+
/* text-align: center; */
66+
}
67+
68+
@media (prefers-color-scheme: light) {
69+
:root {
70+
color: #213547;
71+
background-color: #ffffff;
72+
}
73+
a:hover {
74+
color: #747bff;
75+
}
76+
button {
77+
background-color: #f9f9f9;
78+
}
79+
}

‎vite.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
 (0)