Skip to content

Commit b0637c5

Browse files
jmfarook7jmfarook7
authored
Merge pull request #4 from SyncfusionExamples/1006724-NextJS
1006724- Data Binding with Nextjs Server in Syncfusion Angular Grid
2 parents 45237dd + 8782ce3 commit b0637c5

46 files changed

Lines changed: 1747 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Binding_Next_JS_Server/README.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# Syncfusion Angular Grid with Next.js server
2+
3+
A lightweight, production-ready pattern for binding **Next.js** server data to a **Syncfusion Angular Grid**. The sample supports complete CRUD (Create, Read, Update, Delete), server-side filtering, searching, sorting, and paging using Syncfusion **DataManager**.
4+
5+
## Key Features
6+
7+
- **Syncfusion Angular Grid**: Built-in search, filter, sort, and paging capabilities
8+
- **Complete CRUD Operations**: Add, edit, delete, and update records directly from the grid
9+
- **Custom-Binding**: Full control over grid data operations (search, filter, sort, page and CRUD actions)
10+
11+
## Prerequisites
12+
13+
- Node.js: LTS version (v20.x or later)
14+
15+
- npm/yarn: For package management.
16+
17+
- Angular CLI: For creating and serving the Angular client application
18+
19+
## Quick Start
20+
21+
1. **Clone the repository**
22+
```bash
23+
git clone <repository-url>
24+
cd Connecting_to_Next_js_server
25+
```
26+
27+
2. **Run the application**
28+
29+
**Run the Next.js server**
30+
31+
```bash
32+
cd next_js_server
33+
npm run dev
34+
```
35+
36+
**Run the Angular client**
37+
38+
```bash
39+
cd angular_client
40+
ng serve
41+
```
42+
43+
3. **Open the application**
44+
45+
The server runs at http://localhost:3000
46+
Navigate to the local URL displayed in the terminal (typically `http://localhost:3000`).
47+
48+
## Configuration
49+
50+
**Security Note**: For production environments, store sensitive credentials using:
51+
52+
- Environment variables
53+
54+
- Secure storage solutions (e.g., Azure Key Vault, AWS Secrets Manager)
55+
56+
## Project Layout
57+
58+
| File/Folder | Purpose |
59+
|-------------|---------|
60+
| `next_js_server/app/api/health_care/route.ts` | Server-side API route handling grid data operations |
61+
| `next_js_server/data/health_care_Entities.ts` | Entity model containing the data |
62+
| `angular_client/src/app/doctors/doctors.ts` | Contains the Grid configuration |
63+
| `angular_client/src/app/patients/patients.ts` | Dynamic route page |
64+
65+
## Common Tasks
66+
67+
### Add a Record
68+
1. Click the **Add** button in the toolbar
69+
2. Fill in the form fields (Doctor ID, Name, Specialty etc.)
70+
3. Click **Update** button in the toolbar to save the record.
71+
72+
### Edit a Record
73+
1. Select a row in the grid
74+
2. Click the **Edit** button in the toolbar
75+
3. Modify the required fields
76+
4. Click **Update** to save changes
77+
78+
### Delete a Record
79+
1. Select a row in the grid
80+
2. Click the **Delete** button in the toolbar
81+
3. Confirm the deletion
82+
83+
### Search Records
84+
1. Use the **Search** box in the toolbar
85+
2. Enter keywords to filter records (searches across all columns)
86+
87+
### Filter Records
88+
1. Click the filter icon in any column header
89+
2. Select filter criteria (equals, contains, greater than, etc.)
90+
3. Click **Filter** to apply
91+
92+
### Sort Records
93+
1. Click the column header to sort ascending
94+
2. Click again to sort descending
95+
96+
### Routing
97+
1. Click the **View Appointment Details** button in the template column of the Grid.
98+
2. This will navigate to the appointment details page.
99+
100+
## Reference
101+
The [user guide](https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-backends/next-js-server) provides detailed directions in a clear, step-by-step format.
102+

‎Binding_Next_JS_Server/angular_client/.editorconfig‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
ij_typescript_use_double_quotes = false
14+
15+
[*.md]
16+
max_line_length = off
17+
trim_trailing_whitespace = false

‎Binding_Next_JS_Server/angular_client/.gitignore‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
__screenshots__/
40+
41+
# System files
42+
.DS_Store
43+
Thumbs.db

‎Binding_Next_JS_Server/angular_client/README.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# AngularClient
2+
3+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.8.
4+
5+
## Development server
6+
7+
To start a local development server, run:
8+
9+
```bash
10+
ng serve
11+
```
12+
13+
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
14+
15+
## Code scaffolding
16+
17+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18+
19+
```bash
20+
ng generate component component-name
21+
```
22+
23+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
24+
25+
```bash
26+
ng generate --help
27+
```
28+
29+
## Building
30+
31+
To build the project run:
32+
33+
```bash
34+
ng build
35+
```
36+
37+
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
38+
39+
## Running unit tests
40+
41+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
42+
43+
```bash
44+
ng test
45+
```
46+
47+
## Running end-to-end tests
48+
49+
For end-to-end (e2e) testing, run:
50+
51+
```bash
52+
ng e2e
53+
```
54+
55+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
56+
57+
## Additional Resources
58+
59+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

‎Binding_Next_JS_Server/angular_client/angular.json‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-client": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular/build:application",
15+
"options": {
16+
"browser": "src/main.ts",
17+
"polyfills": [
18+
"zone.js"
19+
],
20+
"tsConfig": "tsconfig.app.json",
21+
"assets": [
22+
{
23+
"glob": "**/*",
24+
"input": "public"
25+
}
26+
],
27+
"styles": [
28+
"src/styles.css"
29+
]
30+
},
31+
"configurations": {
32+
"production": {
33+
"budgets": [
34+
{
35+
"type": "initial",
36+
"maximumWarning": "500kB",
37+
"maximumError": "1MB"
38+
},
39+
{
40+
"type": "anyComponentStyle",
41+
"maximumWarning": "4kB",
42+
"maximumError": "8kB"
43+
}
44+
],
45+
"outputHashing": "all"
46+
},
47+
"development": {
48+
"optimization": false,
49+
"extractLicenses": false,
50+
"sourceMap": true
51+
}
52+
},
53+
"defaultConfiguration": "production"
54+
},
55+
"serve": {
56+
"builder": "@angular/build:dev-server",
57+
"configurations": {
58+
"production": {
59+
"buildTarget": "angular-client:build:production"
60+
},
61+
"development": {
62+
"buildTarget": "angular-client:build:development"
63+
}
64+
},
65+
"defaultConfiguration": "development"
66+
},
67+
"extract-i18n": {
68+
"builder": "@angular/build:extract-i18n"
69+
},
70+
"test": {
71+
"builder": "@angular/build:karma",
72+
"options": {
73+
"polyfills": [
74+
"zone.js",
75+
"zone.js/testing"
76+
],
77+
"tsConfig": "tsconfig.spec.json",
78+
"assets": [
79+
{
80+
"glob": "**/*",
81+
"input": "public"
82+
}
83+
],
84+
"styles": [
85+
"src/styles.css"
86+
]
87+
}
88+
}
89+
}
90+
}
91+
},
92+
"cli": {
93+
"analytics": "8cf5da05-2933-4fe8-a602-eaa9cbacdb0e"
94+
}
95+
}

‎Binding_Next_JS_Server/angular_client/package.json‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "angular-client",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"prettier": {
12+
"printWidth": 100,
13+
"singleQuote": true,
14+
"overrides": [
15+
{
16+
"files": "*.html",
17+
"options": {
18+
"parser": "angular"
19+
}
20+
}
21+
]
22+
},
23+
"private": true,
24+
"dependencies": {
25+
"@angular/common": "^20.3.0",
26+
"@angular/compiler": "^20.3.0",
27+
"@angular/core": "^20.3.0",
28+
"@angular/forms": "^20.3.0",
29+
"@angular/platform-browser": "^20.3.0",
30+
"@angular/router": "^20.3.0",
31+
"@syncfusion/ej2-angular-buttons": "*",
32+
"@syncfusion/ej2-angular-grids": "*",
33+
"@syncfusion/ej2-data": "*",
34+
"rxjs": "~7.8.0",
35+
"tslib": "^2.3.0",
36+
"zone.js": "~0.15.0"
37+
},
38+
"devDependencies": {
39+
"@angular/build": "^20.3.8",
40+
"@angular/cli": "^20.3.8",
41+
"@angular/compiler-cli": "^20.3.0",
42+
"@types/jasmine": "~5.1.0",
43+
"jasmine-core": "~5.9.0",
44+
"karma": "~6.4.0",
45+
"karma-chrome-launcher": "~3.2.0",
46+
"karma-coverage": "~2.2.0",
47+
"karma-jasmine": "~5.1.0",
48+
"karma-jasmine-html-reporter": "~2.1.0",
49+
"typescript": "~5.9.2"
50+
}
51+
}

‎Binding_Next_JS_Server/angular_client/public/favicon.ico‎

14.7 KB
Binary file not shown.

‎Binding_Next_JS_Server/angular_client/src/app/app.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
4+
import { routes } from './app.routes';
5+
6+
export const appConfig: ApplicationConfig = {
7+
providers: [
8+
provideBrowserGlobalErrorListeners(),
9+
provideZoneChangeDetection({ eventCoalescing: true }),
10+
provideRouter(routes)
11+
]
12+
};

‎Binding_Next_JS_Server/angular_client/src/app/app.css‎

Whitespace-only changes.

‎Binding_Next_JS_Server/angular_client/src/app/app.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
<router-outlet></router-outlet>

0 commit comments

Comments
 (0)