SyncfusionExamples · ArulrajAboo · Oct 10, 2024 · Oct 10, 2024
diff --git a/README.md b/README.md
@@ -1,2 +1,14 @@
-# How-to-Customize-the-Vue-Query-Builder-Component-Using-Templates
-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.
+# How to Customize the Vue Query Builder Component Using Templates
+
+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.
+
+Watch the video: Coming soon…
+
+Refer to the documentation to learn about the Vue Query Builder component: https://ej2.syncfusion.com/vue/documentation/query-builder/templates  
+
+Check out this online example of the Vue Query Builder component: https://ej2.syncfusion.com/vue/demos/#/material3/query-builder/template.html
+
+Before working on this project, make sure your machine has the latest versions of Node.js and Visual Studio Code.
+
+## How to run this application
+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.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "myvueapp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-vue-buttons": "^26.2.10",
+    "@syncfusion/ej2-vue-dropdowns": "^26.2.11",
+    "@syncfusion/ej2-vue-querybuilder": "^26.2.11",
+    "vue": "^3.4.31"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.3",
+    "vite": "^5.4.2"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="container">
+    <ejs-querybuilder ref="querybuilder" id="querybuilder" 
+      :rule="importRules"
+      :headerTemplate="'headerTemplate'">
+      <e-columns>
+        <e-column field="EmployeeID" label="Employee ID" type="number" />
+        <e-column field="FirstName" label="First Name" type="string" />
+        <e-column field="LastName" label="Last Name" type="string" />
+        <e-column field='TitleOfCourtesy' label='Title Of Courtesy' type='string'
+          :template="'columnTemplate'" />
+        <e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy" />
+        <e-column field="Country" label="Country" type="string"
+          :ruleTemplate="'ruleTemplate'"/>
+      </e-columns>
+      <template #headerTemplate="{ data }">
+        <div class="query-template-control">
+          <div class="e-groupheader">
+            <ejs-dropdownlist cssClass="e-custom-group-btn"
+              :id="`${data.ruleID}_cndtn`" v-model="data.condition"
+              :dataSource="grpHdrOperatorItems"
+              :fields="grpHdrOperatorfields"
+              :change="conditionChange">
+            </ejs-dropdownlist>
+            <div class="e-header">
+              <div class="e-qb-hdr-content">
+                <ejs-button :id="`${data.ruleID}_addgrp`" 
+                  cssClass="e-primary e-grp-btn"
+                  @click="grpbtnClick">Add Group</ejs-button>
+              </div>
+              <div class="e-qb-hdr-content">
+                <ejs-button :id="`${data.ruleID}_addrule`" cssClass="e-primary e-cond-btn"
+                 @click="rulebtnClick">Add Condition</ejs-button>
+              </div>
+              <div class="e-qb-hdr-content">
+                <ejs-button :id="`${data.ruleID}_dltbtn`" cssClass="e-danger"
+                  v-if="data.ruleID !== 'querybuilder_group0'"
+                  @click="onDeleteGrpBtnClick"
+                  >Delete Group</ejs-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #columnTemplate="{ data }">
+        <ejs-dropdownlist :dataSource="['Mr.', 'Mrs.', 'Dr.', 'Ms.']"
+          v-model="data.rule.value" :change="onTitleChange">
+        </ejs-dropdownlist>
+      </template>
+      <template #ruleTemplate="{ data }">
+        <div>
+        <div class="e-rule-filter">
+          <ejs-dropdownlist :dataSource="data.columns" :fields="data.fields"
+            :value="data.rule.field" :change="fieldChange">
+            </ejs-dropdownlist>
+        </div>
+        <div class="e-rule-operator e-operator">
+            <ejs-radiobutton label="Is Equal" value="equal" name="operator" 
+              checked=true :change="operatorChange"></ejs-radiobutton>
+            <ejs-radiobutton label="Is Not Equal" value="notequal" name="operator"
+            :change="operatorChange"></ejs-radiobutton>
+          </div>
+          <div class="e-rule-value e-value e-custom-value">
+            <ejs-dropdownlist :value="data.rule.value" 
+              :dataSource="countryItems" :fields="countryFields"
+              :change="valueChange">
+            </ejs-dropdownlist>
+          </div>
+          <div class="e-rule-value-delete">
+            <button 
+              class="e-removerule e-custom-delete e-rule-delete e-css e-btn e-small e-round"
+              title="Delete Rule">
+              <span class="e-btn-icon e-icons e-delete-icon"></span>
+            </button>
+          </div>
+        </div>
+      </template>
+    </ejs-querybuilder>
+  </div>
+</template>
+<script>
+import {
+  QueryBuilderComponent,
+  ColumnDirective,
+  ColumnsDirective
+} from "@syncfusion/ej2-vue-querybuilder";
+import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
+import { ButtonComponent, RadioButtonComponent } from "@syncfusion/ej2-vue-buttons";
+import { closest } from "@syncfusion/ej2-base";
+
+export default {
+  components: {
+    "ejs-querybuilder": QueryBuilderComponent,
+    "e-columns": ColumnsDirective,
+    "e-column": ColumnDirective,
+    "ejs-dropdownlist": DropDownListComponent,
+    "ejs-button": ButtonComponent,
+    "ejs-radiobutton": RadioButtonComponent
+  },
+  data() {
+    return {
+      grpHdrOperatorItems: [{ key: "AND", value: "and"},
+        { key: "OR", value: "or"}
+      ],
+      grpHdrOperatorfields: { text: "key", value: "value" },
+      countryItems: [{ field: 'USA', label: 'USA' }, { field: 'England', label: 'England' }, 
+        { field: 'India', label: 'India' }, { field: 'Spain', label: 'Spain' }],
+      countryFields: { text: 'field', value: 'label' },
+      importRules: {
+        condition: "and",
+        rules: [
+          { label: "First Name", field: "FirstName", type: "string", 
+            operator: "equal", value: "Nancy" },
+          { label: "Title Of Courtesy", field: "TitleOfCourtesy", type: "string", 
+            operator: "equal", value: "Ms." },
+          { label: "Country", field: "Country", type: "string", 
+            operator: "equal", value: "USA" }
+        ]
+      }
+    };
+  },
+  methods:{
+    conditionChange(event){
+      this.$refs.querybuilder.ej2Instances.notifyChange(
+        event.value, event.element, "condition"
+      );
+    },
+    grpbtnClick({target}){
+      const targetParentGroupID = target.id.split("_")[1];
+      this.$refs.querybuilder.ej2Instances.addGroups(
+        [{ condition: "or", rules: [{}]}], targetParentGroupID
+      );
+    },
+    rulebtnClick({target}){
+      const targetParentGroupID = target.id.split("_")[1];
+      this.$refs.querybuilder.ej2Instances.addRules(
+        [{}], targetParentGroupID
+      );
+    },
+    onDeleteGrpBtnClick({target}){
+      this.$refs.querybuilder.ej2Instances.deleteGroup(
+        closest(target, ".e-group-container")
+      );
+    },
+    onTitleChange(event){
+      this.$refs.querybuilder.ej2Instances.notifyChange(
+        event.itemData.value, event.element
+      );
+    },
+    fieldChange(event){
+      this.$refs.querybuilder.ej2Instances.notifyChange(
+        event.value, event.element, "field"
+      );
+    },
+    operatorChange(operatorArgs){
+      this.$refs.querybuilder.ej2Instances.getRule(
+        operatorArgs.event.target).operator = operatorArgs.value;
+    },
+    valueChange(event){
+      this.$refs.querybuilder.ej2Instances.notifyChange(
+        event.value, event.element, "value"
+      );
+    }
+  }
+};
+</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-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 60%;
+  margin: 0 auto;
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.e-query-builder .query-template-control span.e-custom-group-btn {
+  max-width: 70px;
+  border-radius: 5px !important;
+  border-width: 1px !important;
+}
+.e-query-builder .query-template-control .e-custom-group-btn {
+  padding-left: 10px;
+  height: 32px;
+}
+.e-query-builder .query-template-control .e-header {
+  float: right;
+}
+
+.e-query-builder .query-template-control .e-qb-hdr-content {
+  display: inline-block;
+  padding: 5px;
+}
+
+.e-query-builder .query-template-control .e-grp-btn,
+.e-query-builder .query-template-control .e-cond-btn {
+  background-color: #6c757d !important;
+}
+
+.e-query-builder .query-template-control .e-grp-btn:hover,
+.e-query-builder .query-template-control .e-cond-btn:hover {
+  background-color: #545c63 !important;
+}
+</style>
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import { registerLicense } from '@syncfusion/ej2-base'
+registerLicense('Ngo9BigBOggjHTQxAR8/V1NCaF5cXmpCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWXlcd3RVQ2FfUUJwVkM=')
+createApp(App).mount('#app')