SyncfusionExamples · thangavele · Aug 8, 2023 · Aug 8, 2023 · Aug 8, 2023
diff --git a/README.md b/README.md
@@ -1 +1,14 @@
-# getting-started-with-the-vue-kanban-component
+# Getting Started with the Vue Kanban Component
+A quick start Vue project that shows how to add the Vue Kanban Component to a Vue application. It includes a code snippet for binding data from the remote data source, enabling the swimlane feature, and setting custom height and width. It also includes a code snippet for adding a tooltip and validate columns.
+
+Refer to the following documentation to learn about the Vue Kanban component: 
+https://ej2.syncfusion.com/vue/documentation/kanban/getting-started-page
+
+Check out this online example of the Vue Kanban Component:
+https://ej2.syncfusion.com/vue/demos/#/material3/kanban/default.html
+
+Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
+
+### How to run this application?
+
+To run this application, you need to clone the `getting-started-with-the-vue-kanban-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary vue packages into your current 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,19 @@
+{
+  "name": "myvueapp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-vue-kanban": "^22.2.5",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,149 @@
+<script >
+  import {KanbanComponent, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-vue-kanban'
+  import {DataManager, ODataAdaptor} from '@syncfusion/ej2-data'
+  export default {
+    name: "App",
+    components: {
+      'ejs-kanban': KanbanComponent,
+      'e-columns': ColumnsDirective,
+      'e-column': ColumnDirective
+    },
+    data()
+    {
+      return{
+        kanbanData: new DataManager(
+          {
+            url:'https://ej2services.syncfusion.com/production/web-services/api/Kanban',
+            adaptor:new ODataAdaptor(),
+            crossDomain:true
+          }
+        ),
+  //       [
+  //       {
+  //     'Id': 1,
+  //     'Status': 'Open',
+  //     'Summary': 'Analyze the new requirements gathered from the customer.',
+  //     'Type': 'Story',
+  //     'Priority': 'Low',
+  //     'Tags': 'Analyze,Customer',
+  //     'Estimate': 3.5,
+  //     'Assignee': 'Nancy Davloio',
+  //     'RankId': 1
+  // },
+  // {
+  //     'Id': 2,
+  //     'Status': 'InProgress',
+  //     'Summary': 'Improve application performance',
+  //     'Type': 'Improvement',
+  //     'Priority': 'Normal',
+  //     'Tags': 'Improvement',
+  //     'Estimate': 6,
+  //     'Assignee': 'Andrew Fuller',
+  //     'RankId': 1
+  // },
+  // {
+  //     'Id': 3,
+  //     'Status': 'Testing',
+  //     'Summary': 'Arrange a web meeting with the customer to get new requirements.',
+  //     'Type': 'Others',
+  //     'Priority': 'Critical',
+  //     'Tags': 'Meeting',
+  //     'Estimate': 5.5,
+  //     'Assignee': 'Janet Leverling',
+  //     'RankId': 2
+  // },
+  // {
+  //     'Id': 4,
+  //     'Status': 'Close',
+  //     'Summary': 'Fix the issues reported in the IE browser.',
+  //     'Type': 'Bug',
+  //     'Priority': 'Release Breaker',
+  //     'Tags': 'IE',
+  //     'Estimate': 2.5,
+  //     'Assignee': 'Janet Leverling',
+  //     'RankId': 2
+  // },
+  // {
+  //     'Id': 5,
+  //     'Status': 'Open',
+  //     'Summary': 'Fix the issues reported by the customer.',
+  //     'Type': 'Bug',
+  //     'Priority': 'Low',
+  //     'Tags': 'Customer',
+  //     'Estimate': '3.5',
+  //     'Assignee': 'Steven walker',
+  //     'RankId': 1
+  // },
+  // {
+  //     'Id': 6,
+  //     'Status': 'InProgress',
+  //     'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
+  //     'Type': 'Others',
+  //     'Priority': 'Low',
+  //     'Tags': 'Meeting',
+  //     'Estimate': 2,
+  //     'Assignee': 'Michael Suyama',
+  //     'RankId': 1
+  // },
+  // {
+  //     'Id': 7,
+  //     'Status': 'Testing',
+  //     'Summary': 'Validate new requirements',
+  //     'Type': 'Improvement',
+  //     'Priority': 'Low',
+  //     'Tags': 'Validation',
+  //     'Estimate': 1.5,
+  //     'Assignee': 'Robert King',
+  //     'RankId': 1
+  // },
+  // {
+  //     'Id': 8,
+  //     'Status': 'Close',
+  //     'Summary': 'Login page validation',
+  //     'Type': 'Story',
+  //     'Priority': 'Release Breaker',
+  //     'Tags': 'Validation,Fix',
+  //     'Estimate': 2.5,
+  //     'Assignee': 'Laura Callahan',
+  //     'RankId': 2
+  //   }
+  // ],
+     cardSettings:{
+      contentField:"Summary",
+      headerField:"Id"
+     },
+     swimlaneSettings:{
+      keyField:"Assignee"
+     }
+    }
+  }
+}
+</script>
+
+<template>
+ <ejs-kanban :dataSource="kanbanData" keyField="Status" :cardSettings="cardSettings"
+                                      height="100%"
+                                      width="100%"
+                                      :swimlaneSettings="swimlaneSettings"
+                                      :enableTooltip="true"
+                                      >
+  <e-columns>
+    <e-column headerText="To Do" keyField="Open" maxCount="1"></e-column>
+    <e-column headerText="In Progress" keyField="InProgress"></e-column>
+    <e-column headerText="Review" keyField="Review" ></e-column>
+    <e-column headerText="Testing" keyField="Testing" minCount="3"></e-column>
+    <e-column headerText="Done" keyField="Close"></e-column>
+  </e-columns>
+ </ejs-kanban>
+</template>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-layouts/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-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';
+</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,40 @@
+<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>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </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,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/src/style.css b/src/style.css
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})