Skip to content

README.md

Latest commit

 

History

History
121 lines (86 loc) · 4.15 KB

README.md

File metadata and controls

121 lines (86 loc) · 4.15 KB

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

    git clone <repository-url>

  2. Run the FastAPI backend

    cd server
uvicorn main:app --reload --port 8000

    The backend is now running at http://localhost:8000/.

  3. Run the Angular client

    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

Steps to download GitHub samples using DownGit

  1. Open the DownGit Website

    Go to the official DownGit tool: https://downgit.github.io/#/home

  2. Copy the GitHub URL

  3. Paste the URL into DownGit

    In the DownGit input box, paste the copied GitHub URL.

  4. Download the ZIP

    • Click Download.
    • DownGit will generate a ZIP file of the selected folder, which you can save and extract locally.