Skip to content

Commit 1cff1b0

Browse files
ArulrajAbooArulrajAboo
authored
Merge pull request #1 from SyncfusionExamples/ArulrajAboo-patch-1
Committed the example project.
2 parents 061b082 + 3f9ccaa commit 1cff1b0

File tree

10 files changed

+401
-2
lines changed

10 files changed

+401
-2
lines changed

‎README.md

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
# How-to-Customize-the-Vue-Query-Builder-Component-Using-Templates
2-
A Vue quick start project that shows how to customize the Syncfusion Vue Query Builder component using templates. This project contains simple code to customize the headers, columns, and rules of the Query Builder's UI.
1+
# How to Customize the Vue Query Builder Component Using Templates
2+
3+
A Vue quick start project that shows how to customize 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-templates-sample) component using templates. This project contains simple code to customize the headers, columns, and rules of the Query Builder’s UI.
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/templates
8+
9+
Check out this online example of the Vue Query Builder component: https://ej2.syncfusion.com/vue/demos/#/material3/query-builder/template.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-Customize-the-Vue-Query-Builder-Component-Using-Templates` 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

+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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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.10",
13+
"@syncfusion/ej2-vue-dropdowns": "^26.2.11",
14+
"@syncfusion/ej2-vue-querybuilder": "^26.2.11",
15+
"vue": "^3.4.31"
16+
},
17+
"devDependencies": {
18+
"@vitejs/plugin-vue": "^5.1.3",
19+
"vite": "^5.4.2"
20+
}
21+
}

‎public/vite.svg

+1
Loading

‎src/App.vue

+216
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
<template>
2+
<div class="container">
3+
<ejs-querybuilder ref="querybuilder" id="querybuilder"
4+
:rule="importRules"
5+
:headerTemplate="'headerTemplate'">
6+
<e-columns>
7+
<e-column field="EmployeeID" label="Employee ID" type="number" />
8+
<e-column field="FirstName" label="First Name" type="string" />
9+
<e-column field="LastName" label="Last Name" type="string" />
10+
<e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='string'
11+
:template="'columnTemplate'" />
12+
<e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy" />
13+
<e-column field="Country" label="Country" type="string"
14+
:ruleTemplate="'ruleTemplate'"/>
15+
</e-columns>
16+
<template #headerTemplate="{ data }">
17+
<div class="query-template-control">
18+
<div class="e-groupheader">
19+
<ejs-dropdownlist cssClass="e-custom-group-btn"
20+
:id="`${data.ruleID}_cndtn`" v-model="data.condition"
21+
:dataSource="grpHdrOperatorItems"
22+
:fields="grpHdrOperatorfields"
23+
:change="conditionChange">
24+
</ejs-dropdownlist>
25+
<div class="e-header">
26+
<div class="e-qb-hdr-content">
27+
<ejs-button :id="`${data.ruleID}_addgrp`"
28+
cssClass="e-primary e-grp-btn"
29+
@click="grpbtnClick">Add Group</ejs-button>
30+
</div>
31+
<div class="e-qb-hdr-content">
32+
<ejs-button :id="`${data.ruleID}_addrule`" cssClass="e-primary e-cond-btn"
33+
@click="rulebtnClick">Add Condition</ejs-button>
34+
</div>
35+
<div class="e-qb-hdr-content">
36+
<ejs-button :id="`${data.ruleID}_dltbtn`" cssClass="e-danger"
37+
v-if="data.ruleID !== 'querybuilder_group0'"
38+
@click="onDeleteGrpBtnClick"
39+
>Delete Group</ejs-button>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</template>
45+
<template #columnTemplate="{ data }">
46+
<ejs-dropdownlist :dataSource="['Mr.', 'Mrs.', 'Dr.', 'Ms.']"
47+
v-model="data.rule.value" :change="onTitleChange">
48+
</ejs-dropdownlist>
49+
</template>
50+
<template #ruleTemplate="{ data }">
51+
<div>
52+
<div class="e-rule-filter">
53+
<ejs-dropdownlist :dataSource="data.columns" :fields="data.fields"
54+
:value="data.rule.field" :change="fieldChange">
55+
</ejs-dropdownlist>
56+
</div>
57+
<div class="e-rule-operator e-operator">
58+
<ejs-radiobutton label="Is Equal" value="equal" name="operator"
59+
checked=true :change="operatorChange"></ejs-radiobutton>
60+
<ejs-radiobutton label="Is Not Equal" value="notequal" name="operator"
61+
:change="operatorChange"></ejs-radiobutton>
62+
</div>
63+
<div class="e-rule-value e-value e-custom-value">
64+
<ejs-dropdownlist :value="data.rule.value"
65+
:dataSource="countryItems" :fields="countryFields"
66+
:change="valueChange">
67+
</ejs-dropdownlist>
68+
</div>
69+
<div class="e-rule-value-delete">
70+
<button
71+
class="e-removerule e-custom-delete e-rule-delete e-css e-btn e-small e-round"
72+
title="Delete Rule">
73+
<span class="e-btn-icon e-icons e-delete-icon"></span>
74+
</button>
75+
</div>
76+
</div>
77+
</template>
78+
</ejs-querybuilder>
79+
</div>
80+
</template>
81+
<script>
82+
import {
83+
QueryBuilderComponent,
84+
ColumnDirective,
85+
ColumnsDirective
86+
} from "@syncfusion/ej2-vue-querybuilder";
87+
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
88+
import { ButtonComponent, RadioButtonComponent } from "@syncfusion/ej2-vue-buttons";
89+
import { closest } from "@syncfusion/ej2-base";
90+
91+
export default {
92+
components: {
93+
"ejs-querybuilder": QueryBuilderComponent,
94+
"e-columns": ColumnsDirective,
95+
"e-column": ColumnDirective,
96+
"ejs-dropdownlist": DropDownListComponent,
97+
"ejs-button": ButtonComponent,
98+
"ejs-radiobutton": RadioButtonComponent
99+
},
100+
data() {
101+
return {
102+
grpHdrOperatorItems: [{ key: "AND", value: "and"},
103+
{ key: "OR", value: "or"}
104+
],
105+
grpHdrOperatorfields: { text: "key", value: "value" },
106+
countryItems: [{ field: 'USA', label: 'USA' }, { field: 'England', label: 'England' },
107+
{ field: 'India', label: 'India' }, { field: 'Spain', label: 'Spain' }],
108+
countryFields: { text: 'field', value: 'label' },
109+
importRules: {
110+
condition: "and",
111+
rules: [
112+
{ label: "First Name", field: "FirstName", type: "string",
113+
operator: "equal", value: "Nancy" },
114+
{ label: "Title Of Courtesy", field: "TitleOfCourtesy", type: "string",
115+
operator: "equal", value: "Ms." },
116+
{ label: "Country", field: "Country", type: "string",
117+
operator: "equal", value: "USA" }
118+
]
119+
}
120+
};
121+
},
122+
methods:{
123+
conditionChange(event){
124+
this.$refs.querybuilder.ej2Instances.notifyChange(
125+
event.value, event.element, "condition"
126+
);
127+
},
128+
grpbtnClick({target}){
129+
const targetParentGroupID = target.id.split("_")[1];
130+
this.$refs.querybuilder.ej2Instances.addGroups(
131+
[{ condition: "or", rules: [{}]}], targetParentGroupID
132+
);
133+
},
134+
rulebtnClick({target}){
135+
const targetParentGroupID = target.id.split("_")[1];
136+
this.$refs.querybuilder.ej2Instances.addRules(
137+
[{}], targetParentGroupID
138+
);
139+
},
140+
onDeleteGrpBtnClick({target}){
141+
this.$refs.querybuilder.ej2Instances.deleteGroup(
142+
closest(target, ".e-group-container")
143+
);
144+
},
145+
onTitleChange(event){
146+
this.$refs.querybuilder.ej2Instances.notifyChange(
147+
event.itemData.value, event.element
148+
);
149+
},
150+
fieldChange(event){
151+
this.$refs.querybuilder.ej2Instances.notifyChange(
152+
event.value, event.element, "field"
153+
);
154+
},
155+
operatorChange(operatorArgs){
156+
this.$refs.querybuilder.ej2Instances.getRule(
157+
operatorArgs.event.target).operator = operatorArgs.value;
158+
},
159+
valueChange(event){
160+
this.$refs.querybuilder.ej2Instances.notifyChange(
161+
event.value, event.element, "value"
162+
);
163+
}
164+
}
165+
};
166+
</script>
167+
<style>
168+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
169+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
170+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
171+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
172+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
173+
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
174+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
175+
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
176+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
177+
@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
178+
179+
.container {
180+
display: flex;
181+
flex-direction: column;
182+
width: 60%;
183+
margin: 0 auto;
184+
position: absolute;
185+
top: 20px;
186+
left: 50%;
187+
transform: translateX(-50%);
188+
}
189+
.e-query-builder .query-template-control span.e-custom-group-btn {
190+
max-width: 70px;
191+
border-radius: 5px !important;
192+
border-width: 1px !important;
193+
}
194+
.e-query-builder .query-template-control .e-custom-group-btn {
195+
padding-left: 10px;
196+
height: 32px;
197+
}
198+
.e-query-builder .query-template-control .e-header {
199+
float: right;
200+
}
201+
202+
.e-query-builder .query-template-control .e-qb-hdr-content {
203+
display: inline-block;
204+
padding: 5px;
205+
}
206+
207+
.e-query-builder .query-template-control .e-grp-btn,
208+
.e-query-builder .query-template-control .e-cond-btn {
209+
background-color: #6c757d !important;
210+
}
211+
212+
.e-query-builder .query-template-control .e-grp-btn:hover,
213+
.e-query-builder .query-template-control .e-cond-btn:hover {
214+
background-color: #545c63 !important;
215+
}
216+
</style>

‎src/assets/vue.svg

+1
Loading

‎src/components/HelloWorld.vue

+43
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

+6
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')

0 commit comments

Comments
 (0)