Task(1006561): Added Angular Grid Custom Binding with FastAPI sample

connecting-to-backends/syncfusion-angular-grid-custom-binding-with-fastapi-server/README.md

@@ -0,0 +1,102 @@
+# Connecting the Syncfusion Angular Grid with FastAPI REST backend
+
+FastAPI is a modern, high‑performance Python web framework used for building RESTful APIs with automatic validation and OpenAPI documentation. In a REST architecture, the client communicates with the backend using standard HTTP methods and structured JSON payloads. This makes FastAPI a natural fit for the Syncfusion Angular Grid, where every grid action is serialized into a predictable request format and processed on the server.
+
+**Key REST concepts:**
+
+- **Resources**: Logical endpoints such as `/products` that represent collections or entities.
+- **HTTP Methods**: `POST` for data operations, along with standard REST semantics.
+- **Request / Response Payloads**: JSON structures carrying grid operation metadata and results.
+- **Status Codes**: Standard HTTP codes indicating success or failure of operations.
+
+---
+
+## Prerequisites
+
+| Software / Package | Recommended version | Purpose |
+|-------------------|---------------------|--------|
+| Python            | 3.11 or later       | Backend runtime |
+| FastAPI           | Latest              | REST API framework |
+| Uvicorn           | Latest              | ASGI server |
+| Node.js           | 20.x LTS or later   | Angular tooling |
+| npm               | 10.x or later       | Package manager |
+
+---
+
+## Quick Start
+
+1. **Clone the repository**
+   ```bash
+   git clone <repository-url>
+   ```
+
+2. **Run the FastAPI backend**
+   ```bash
+   cd server
+   uvicorn main:app --reload --port 8000
+   ```
+   The backend is now running at http://localhost:8000/.
+
+3. **Run the Angular client**
+   ```bash
+   cd client
+   npm install
+   ng serve
+   ```
+   Open the URL shown in the terminal (typically http://localhost:4200/).
+
+---
+
+## Configuration
+
+The Syncfusion Angular Grid communicates with the backend using the **DataManager** combined with the **UrlAdaptor**. All grid operations (paging, sorting, filtering, searching, and CRUD) are sent as a single POST request to a REST endpoint.
+
+**DataManager request payload (common keys):**
+
+| Parameters       | Description |
+|------------------|-------------|
+| `requiresCounts` | Includes the total record count in the response when set to true |
+| `skip`           | Number of records to skip |
+| `take`           | Number of records to retrieve |
+| `sorted`         | Sorting field(s) and direction |
+| `where`          | Filtering predicates |
+| `search`         | Search fields and keywords |
+| `select`         | Fields to project |
+| `action`         | Indicates `insert`, `update`, or `remove` for CRUD |
+
+---
+
+## Project Layout
+
+| File / Folder | Purpose |
+|---------------|---------|
+| `server/main.py` | FastAPI application entry point |
+| `server/products_data.json` | Sample product dataset |
+| `server/routers/products.py` | Single REST endpoint handling grid operations |
+| `server/routers/services` | Server‑side helpers for paging, sorting, filtering, search, and CRUD |
+| `client/src/app/app.component.ts` | Angular Grid configuration |
+| `client/src/styles.css` | Global styles including Syncfusion theme |
+
+---
+
+## Common Tasks
+
+### Add a Record
+- Click **Add** in the grid toolbar
+- Enter product details
+- Click **Save** to persist the record
+
+### Edit a Record
+- Select a row → **Edit**
+- Modify field values → **Update**
+
+### Delete a Record
+- Select a row → **Delete**
+- Confirm deletion
+
+### Search / Filter / Sort
+- Use the **Search** toolbar item for text search
+- Use column filters for advanced conditions
+- Click column headers to sort ascending or descending
+
+---

connecting-to-backends/syncfusion-angular-grid-custom-binding-with-fastapi-server/client/README.md

@@ -0,0 +1,59 @@
+# Client
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.0.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+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.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+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.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+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.

connecting-to-backends/syncfusion-angular-grid-custom-binding-with-fastapi-server/client/angular.json

@@ -0,0 +1,92 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "client": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "client:build:production"
+            },
+            "development": {
+              "buildTarget": "client:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

connecting-to-backends/syncfusion-angular-grid-custom-binding-with-fastapi-server/client/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "client",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "@syncfusion/ej2-angular-grids": "^32.1.25",
+    "@syncfusion/ej2-data": "^32.1.24",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^20.0.0",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.7.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.8.2"
+  }
+}