Skip to content

Commit bf0f2c2

Browse files
Vinitha-BalasubramanianVinitha-Balasubramanian
committed
898669: GitHub sample of remote data topic
1 parent a9c0513 commit bf0f2c2

File tree

14 files changed

+500
-0
lines changed

14 files changed

+500
-0
lines changed

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
11
# vue-data-grid-integration-with-custom-binding
22
The repository contains a professional demonstration of a custom binding with the Grid control. This application showcases essential functionalities such as filtering, searching, grouping, editing, and paging, all implemented using custom binding.
3+
* Execute the following command to install the necessary dependencies:
4+
`npm install`
5+
* Update the port number in the `serve.js` file to load your data. Also, update the same port number in the `src/orderService.ts` file.
6+
* Run the project using following command:
7+
`npm run start`
8+
Finally, the Syncfusion Vue Grid control will be rendered with custom binding.
9+
![Grid with Custom Binding](image/custom-binding-grid-action.gif)

‎image/custom-binding-grid-action.gif

351 KB
Loading

‎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: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "vite-js-cb",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"start-server": "node server.js",
8+
"start-client": "vite",
9+
"start": "concurrently \"npm run start-server\" \"npm run start-client\""
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-data": "^26.2.5",
13+
"@syncfusion/ej2-vue-grids": "^26.2.8",
14+
"axios": "^1.7.3",
15+
"body-parser": "^1.20.2",
16+
"cors": "^2.8.5",
17+
"express": "^4.19.2",
18+
"vue": "^3.4.31"
19+
},
20+
"devDependencies": {
21+
"@vitejs/plugin-vue": "^5.0.5",
22+
"concurrently": "^8.2.2",
23+
"vite": "^5.3.4"
24+
}
25+
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎server.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import express from 'express';
2+
import data from './src/data-source.js';
3+
import bodyParser from 'body-parser';
4+
import cors from 'cors';
5+
6+
const app = express();
7+
8+
app.use(cors({
9+
origin: '*', // Update to the correct frontend origin
10+
credentials: true
11+
}));
12+
13+
app.use(bodyParser.json());
14+
15+
// Root route
16+
app.get('/', (req, res) => {
17+
res.send('Server is running');
18+
});
19+
20+
// all records
21+
app.get('/orders', function (req, res) {
22+
res.json({ result: data, count:data.length });
23+
});
24+
25+
// insert
26+
app.post('/orders', function (req, res){
27+
data.splice(0, 0, req.body.value);
28+
res.status(200).send('Row Inserted');
29+
});
30+
31+
// get specific records
32+
app.get('/orders/:OrderID', (req, res) => {
33+
const orderID = parseInt(req.params.OrderID, 10);
34+
const order = data.find(d => d.OrderID === orderID);
35+
36+
if (order) {
37+
res.json(order);
38+
} else {
39+
res.status(404).send('Order not found');
40+
}
41+
});
42+
// Remove
43+
app.delete('/orders/:OrderID', function (req, res) {
44+
const orderID = parseInt(req.params.OrderID, 10);
45+
const index = data.findIndex(x => x.OrderID === orderID);
46+
if (index !== -1) {
47+
data.splice(index, 1);
48+
res.status(200).send('Row Deleted');
49+
} else {
50+
res.status(404).send('Order not found');
51+
}
52+
});
53+
54+
// Update
55+
app.put('/orders/:OrderID', function (req, res) {
56+
const orderID = parseInt(req.params.OrderID, 10);
57+
const index = data.findIndex(x => x.OrderID === orderID);
58+
if (index !== -1) {
59+
// Assuming req.body.value contains the updated record with the same OrderID
60+
data[index] = req.body.value;
61+
res.status(200).send('Row Updated');
62+
} else {
63+
res.status(404).send('Order not found');
64+
}
65+
});
66+
67+
const port = xxxx; // Here xxxx denotes the port number.
68+
app.listen(port, () => {
69+
console.log(`Server running on http://localhost:${port}`);
70+
});

‎src/App.vue

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<script setup>
2+
import { ref, onMounted, provide } from "vue";
3+
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn, Page, Sort, Filter, Group, LazyLoadGroup, Toolbar, Edit, Search, } from '@syncfusion/ej2-vue-grids';
4+
import { getOrders, addRecord, updateRecord, deleteRecord } from './orderService';
5+
6+
const data = ref([]);
7+
const grid = ref([]);
8+
const groupSettings = { enableLazyLoading: true, columns: ['ProductName'], showGroupedColumn: true, };
9+
const filterSettings = { columns: [{ field: 'CustomerName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Maria' }] };
10+
const sortSettings = { columns: [{ field: 'ProductID', direction: 'Descending' }] }
11+
const state = { skip: 0, take: 12, group: groupSettings, sort: sortSettings, filter: filterSettings };
12+
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Top', };
13+
const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
14+
const OrderIDRules = { required: true };
15+
16+
const dataStateChange = function (state) {
17+
const query = grid.value.getDataModule().generateQuery();
18+
getOrders(state, query).then(gridData => {
19+
data.value = gridData.result; // Assign the result to the data property
20+
});
21+
}
22+
23+
const dataSourceChanged = function (state) {
24+
if (state.action === 'add') {
25+
addRecord(state.data, state); state.endEdit();
26+
} else if (state.action === 'edit') {
27+
updateRecord(state.data, state); state.endEdit();
28+
} else if (state.requestType === 'delete') {
29+
deleteRecord(state.data[0].OrderID, state); state.endEdit();
30+
}
31+
}
32+
33+
onMounted(() => {
34+
dataStateChange(state);
35+
});
36+
37+
provide('grid', [Page, Filter, Sort, Group, LazyLoadGroup, Toolbar, Edit, Search]);
38+
</script>
39+
40+
<template>
41+
<ejs-grid ref="grid" :dataSource='data' :allowPaging='true' :allowFiltering='true' :filterSettings='filterSettings'
42+
:allowSorting='true' :sortSettings='sortSettings' :allowGrouping='true' :groupSettings='groupSettings'
43+
:toolbar='toolbar' :editSettings='editSettings' :dataStateChange="dataStateChange"
44+
:dataSourceChanged="dataSourceChanged">
45+
<e-columns>
46+
<e-column field='OrderID' headerText='Order ID' width='90' textAlign='Right' isPrimaryKey='true'
47+
:validationRules="OrderIDRules"></e-column>
48+
<e-column field="CustomerName" headerText="Customer Name" width="100"></e-column>
49+
<e-column field='ProductID' headerText='Product ID' width=100></e-column>
50+
<e-column field='ProductName' headerText='Product Name' format='C2' width=100></e-column>
51+
</e-columns>
52+
</ejs-grid>
53+
</template>
54+
55+
<style>
56+
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
57+
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
58+
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
59+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
60+
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
61+
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
62+
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
63+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
64+
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
65+
</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>

0 commit comments

Comments
 (0)