diff --git a/Jenkinsfile b/Jenkinsfile index ba9c7df118..acb3d19f59 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -74,7 +74,7 @@ if(currentBuild.result != 'FAILURE') stage 'Delete Workspace' - def files = findFiles(glob: '**/cireports/spellcheck/*.*') + def files = findFiles(glob: '**/cireports/*.*') if(files.size() > 0) { diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 9a19125eb3..cb5d83b1a2 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -22,7 +22,7 @@
  • Skills
  • Agentic UI Builder
  • Release Notes
    • - +
  • Getting Started diff --git a/ej2-react/Release-notes/29.2.4.md b/ej2-react/Release-notes/29.2.4.md index 0f9c53b869..4b8ee3a693 100644 --- a/ej2-react/Release-notes/29.2.4.md +++ b/ej2-react/Release-notes/29.2.4.md @@ -31,7 +31,7 @@ documentation: ug | ButtonGroup | 120 | 120 | 0 | All Passed | | calendar | 177 | 177 | 0 | All Passed | | Carousel | 61 | 61 | 0 | All Passed | -| Chart | 4490 | 4490 | 0 | All Passed | +| Chart | 3666 | 3666 | 0 | All Passed | | Chat UI | 184 | 184 | 0 | All Passed | | Checkbox | 216 | 216 | 0 | All Passed | | CircularGauge | 283 | 283 | 0 | All Passed | diff --git a/ej2-react/diagram/PostgreSQL.md b/ej2-react/diagram/PostgreSQL.md index 8b54b1e969..a45da21767 100644 --- a/ej2-react/diagram/PostgreSQL.md +++ b/ej2-react/diagram/PostgreSQL.md @@ -35,7 +35,7 @@ Ensure availability of the following software: ### Installing PostgreSQL -Download PostgreSQL from the official website: [https://www.postgresql.org/download/](https://www.postgresql.org/download) +Download PostgreSQL from the official website: [https://www.postgresql.org/download/](https://www.postgresql.org/download/) **Installation Steps:** @@ -760,5 +760,5 @@ An empty diagram (no nodes visible) can result from API failures, empty database - [Syncfusion® React Diagram Documentation](https://ej2.syncfusion.com/react/documentation/diagram/getting-started) - [DataManager API Reference](https://ej2.syncfusion.com/react/documentation/data/getting-started) - [Organizational Chart Layout](https://ej2.syncfusion.com/react/documentation/diagram/org-chart) -- [PostgreSQL Node.js Driver](https://node-postgres.com) +- [PostgreSQL Node.js Driver](https://node-postgres.com/) - [Express REST API Best Practices](https://expressjs.com/en/guide/routing.html) \ No newline at end of file diff --git a/ej2-react/diagram/collaborative-editing/collaborative-editing.md b/ej2-react/diagram/collaborative-editing/collaborative-editing.md index 3cee8041f0..03d3045bc6 100644 --- a/ej2-react/diagram/collaborative-editing/collaborative-editing.md +++ b/ej2-react/diagram/collaborative-editing/collaborative-editing.md @@ -33,7 +33,12 @@ Collaborative editing in diagram allows multiple users to edit and review diagra * Unsupported synchronized settings * Changes to [pageSettings](../page-settings), [contextMenuSettings](../context-menu), [snapSettings](../grid-lines#snapping), [rulerSettings](../ruler), [layout](../automatic-layout), and [scrollSettings](../scroll-settings) are not propagated to other users and apply only locally. +<<<<<<< HEAD N> Collaboration will work when [DiagramCollaboration](https://ej2.syncfusion.com/react/documentation/diagram/getting-started#module-injection) and [UndoRedo](https://ej2.syncfusion.com/react/documentation/diagram/getting-started#module-injection) modules are enabled. Collaboration applies to actions that raise the [historyChange](https://ej2.syncfusion.com/react/documentation/api/diagram/index-default#historychange) event. +======= +>**Note:** +Collaboration will work when [DiagramCollaboration](https://ej2.syncfusion.com/react/documentation/diagram/getting-started#module-injection) and [UndoRedo](https://ej2.syncfusion.com/react/documentation/diagram/getting-started#module-injection) modules are enabled. Collaboration applies to actions that raise the [historyChange](https://ej2.syncfusion.com/react/documentation/api/diagram/index-default#historychange) event. +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f ## Sample code diff --git a/ej2-react/diagram/getting-started.md b/ej2-react/diagram/getting-started.md index 7f0442c6d5..39f275e4f0 100644 --- a/ej2-react/diagram/getting-started.md +++ b/ej2-react/diagram/getting-started.md @@ -18,12 +18,19 @@ This section explains how to create a React application from scratch and build a Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement) +<<<<<<< HEAD N> To use **Vite** with a React application, make sure you have **Node.js version 20.19.0 or higher** installed. Older versions may not support Vite’s modern build features. For detailed setup instructions, refer to the [Vite guide](https://vite.dev/guide). ## Before You Begin This guide uses the React application structure generated by Vite with the TypeScript template. +======= +## Before You Begin + +This guide uses the React application structure generated by Vite with the TypeScript template. + +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f The main files used in this guide are: * `src/App.tsx` — Defines the root React component. @@ -37,7 +44,11 @@ N> This guide uses the TypeScript template for better type checking with Diagram ## Step 1: Set up the React environment +<<<<<<< HEAD Use [Vite](https://vitejs.dev) to create and manage React applications. Vite provides a fast development environment and optimized builds for modern React applications. Syncfusion® React documentation also recommends Vite for setting up React applications. +======= +Use [Vite](https://vitejs.dev/) to create and manage React applications. Vite provides a fast development environment and optimized builds for modern React applications. Syncfusion® React documentation also recommends Vite for setting up React applications. +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f ## Step 2: Create a React application @@ -55,6 +66,47 @@ Navigate to the project folder: cd my-diagram-app ``` +<<<<<<< HEAD +N> If you prefer JavaScript instead of TypeScript, create the application using `npm create vite@latest my-diagram-app -- --template react`. + +## Step 3: Install the Syncfusion® React Diagram package + +All Syncfusion Essential® JS 2 packages are available in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. + +Install the React Diagram package using the following command: + +``` +npm install @syncfusion/ej2-react-diagrams +``` + +N> Installing `@syncfusion/ej2-react-diagrams` automatically installs the required dependency packages. + +## Step 4: Add the required CSS references + +Add the required Syncfusion® styles to the **src/App.css** file by replacing the existing content with the following CSS imports: + +``` +@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-react-diagrams/styles/tailwind3.css'; +``` + +N> Syncfusion® provides multiple built-in themes. If your application uses a different theme, replace the **tailwind3.css** references with the corresponding theme file, such as **material3.css**. + +N> Ensure that **App.css** is imported in the **src/App.tsx** file so that the theme styles are applied to the Diagram component. + +## Step 5: Add the Diagram component + +Import `DiagramComponent` from `@syncfusion/ej2-react-diagrams` and add it to the React component. + +======= +Install the application dependencies: + +``` +npm install +``` + N> If you prefer JavaScript instead of TypeScript, create the application using `npm create vite@latest my-diagram-app -- --template react`. ## Step 3: Install the Syncfusion® React Diagram package @@ -88,6 +140,7 @@ N> Ensure that **App.css** is imported in the **src/App.tsx** file so that the t Import `DiagramComponent` from `@syncfusion/ej2-react-diagrams` and add it to the React component. +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f Update the **src/App.tsx** file as follows: ``` diff --git a/ej2-react/diagram/images/microsoft-sql-server-images/SSMSInstallStep1.png b/ej2-react/diagram/images/microsoft-sql-server-images/SSMSInstallStep1.png new file mode 100644 index 0000000000..a9063c686c Binary files /dev/null and b/ej2-react/diagram/images/microsoft-sql-server-images/SSMSInstallStep1.png differ diff --git a/ej2-react/diagram/module-injection.md b/ej2-react/diagram/module-injection.md index ddee85f008..2011fb02a3 100644 --- a/ej2-react/diagram/module-injection.md +++ b/ej2-react/diagram/module-injection.md @@ -21,7 +21,10 @@ The following table lists commonly used modules and their purposes: * `ConnectorEditing` - Inject this provider to edit the segments for connectors. * `ComplexHierarchicalTree` - Inject this provider to use complex hierarchical tree-like structures. * `DataBinding` - Inject this provider to populate nodes from given data source. +<<<<<<< HEAD * `DiagramCollaboration` - Inject this provider to enable real-time collaborative editing features. +======= +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f * `DiagramContextMenu` - Inject this provider to manipulate context menu. * `HierarchicalTree` - Inject this provider to use hierarchical tree-like structures. * `LayoutAnimation` - Inject this provider to add animation to layouts. @@ -32,11 +35,14 @@ The following table lists commonly used modules and their purposes: * `SymmetricLayout` - Inject this provider to render layouts in symmetrical method. * `UndoRedo` - Inject this provider to revert and restore the changes. * `Ej1Serialization` - Inject this provider to load ej1 diagram json in ej2 diagram. +<<<<<<< HEAD * `LineRouting` - Inject this provider to route connectors automatically and avoid overlapping. * `AvoidLineOverlapping` - Inject this provider to prevent connector lines from overlapping. * `LineDistribution` - Inject this provider to distribute connector lines evenly. * `FlowchartLayout` - Inject this provider to use flowchart-style layouts. * `ImportAndExportVisio` - Inject this provider to import and export Visio diagrams. +======= +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f ## Inject Modules into Diagram @@ -58,6 +64,7 @@ import { SymmetricLayout, ConnectorBridging, UndoRedo, +<<<<<<< HEAD DiagramCollaboration, LayoutAnimation, DiagramContextMenu, @@ -68,6 +75,12 @@ import { Ej1Serialization, FlowchartLayout, ImportAndExportVisio, +======= + LayoutAnimation, + DiagramContextMenu, + ConnectorEditing, + Ej1Serialization, +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f Inject } from "@syncfusion/ej2-react-diagrams"; @@ -87,6 +100,7 @@ export default function App() { SymmetricLayout, ConnectorBridging, UndoRedo, +<<<<<<< HEAD DiagramCollaboration, LayoutAnimation, DiagramContextMenu, @@ -97,6 +111,12 @@ export default function App() { Ej1Serialization, FlowchartLayout, ImportAndExportVisio +======= + LayoutAnimation, + DiagramContextMenu, + ConnectorEditing, + Ej1Serialization +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f ]} /> diff --git a/ej2-react/diagram/mysql-server.md b/ej2-react/diagram/mysql-server.md index ef0a4d2ee5..ebf2eaf3dc 100644 --- a/ej2-react/diagram/mysql-server.md +++ b/ej2-react/diagram/mysql-server.md @@ -14,7 +14,11 @@ This guide explains how to load and visualize organizational chart data stored i **What is LINQ2DB?** +<<<<<<< HEAD [LINQ2DB](https://linq2db.github.io) is a lightweight object-relational mapping (ORM) library for .NET that simplifies database access. It enables applications to query relational databases such as MySQL using LINQ syntax, providing a type-safe and efficient way to retrieve data without the overhead of larger ORM frameworks. +======= +[LINQ2DB](https://linq2db.github.io/) is a lightweight object-relational mapping (ORM) library for .NET that simplifies database access. It enables applications to query relational databases such as MySQL using LINQ syntax, providing a type-safe and efficient way to retrieve data without the overhead of larger ORM frameworks. +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f **Key benefits of LINQ2DB:** @@ -66,7 +70,11 @@ MySQL Server provides the relational database engine used to store organizationa MySQL Workbench is a graphical tool used to connect to MySQL Server, manage databases, execute SQL queries, and inspect data. +<<<<<<< HEAD 1. Download MySQL Workbench Installer version 8.0.47 from [mysql-workbench](https://dev.mysql.com/downloads/workbench) +======= +1. Download MySQL Workbench Installer version 8.0.47 from [mysql-workbench](https://dev.mysql.com/downloads/workbench/) +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f 2. Run the installer and follow the setup wizard. - Choose the setup type as **Complete**. - Click **Finish** after installing MySQL Workbench. diff --git a/ej2-react/diagram/postgreSQL.md b/ej2-react/diagram/postgreSQL.md new file mode 100644 index 0000000000..a45da21767 --- /dev/null +++ b/ej2-react/diagram/postgreSQL.md @@ -0,0 +1,764 @@ +--- +layout: post +title: Loading React Diagram from PostgreSQL database | Syncfusion® +description: Learn how to fetch organizational data from PostgreSQL and bind it to the Syncfusion React Diagram using DataManager and a Node.js/Express backend. +control: Data binding +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Loading React Diagram from PostgreSQL database + +The Syncfusion® React Diagram component allows visualization of organizational chart layout using data from a PostgreSQL database through a REST API. This guide explains how to set up the PostgreSQL database, create a Node.js backend service, and link the data to the React Diagram component to display an organizational chart layout. + +> **Note**: This guide works with React Diagram version 28.x or later. The REST API needs to return an array of JSON objects with **id**, **parent_id**, and **role** fields for correct data binding. + +## Overview + +This integration workflow connects: + +* **PostgreSQL** – Stores the organizational chart data. +* **Node.js + Express** – REST API that serves JSON data from PostgreSQL. +* **React + Syncfusion® EJ2 Diagram** – data binding via DataManager and rendering of an organizational chart layout. + +## Prerequisites + +Ensure availability of the following software: + +- **Node.js** 20.x or newer +- **PostgreSQL** 12.x or newer +- **TypeScript** 5.x +- **React** 19.x or newer + +## PostgreSQL database setup + +### Installing PostgreSQL + +Download PostgreSQL from the official website: [https://www.postgresql.org/download/](https://www.postgresql.org/download/) + + +**Installation Steps:** + +1. Download the installer for the preferred version (12.x or higher recommended) +2. Run the installer and follow the setup wizard +3. During installation: + - Set a password for the PostgreSQL (example: **postgres123**) and remember it. + - Keep the default port **5432**. + - Next, the Select Components screen will open. + - By default, all options are selected, as shown in the image: + ![Select Components](images/select-component-Package.png) + - Uncheck the **Stack Builder** option — it is not necessary for this setup. + - Ensure **PostgreSQL Server**, **pgAdmin 4**, and **Command Line Tools** are selected. + +4. Complete the installation. + +Two options are available to create a database: + * Manual (pgAdmin 4) + * Automated initialization and seeding (seed script). + +### Option A: Manual (pgAdmin 4) + +#### Opening pgAdmin + +PostgreSQL includes pgAdmin 4, a graphical tool for database management. Open pgAdmin 4 from the Windows Start menu or application launcher. + +![Opening pgAdmin 4](images/pgadmin-start.jpg) + +#### Creating the database + +Right-click on **Databases** option and select **Create** → **Database**. + +![Create Database Menu](images/create-database-menu.png) + +In the **Create - Database** dialog: +1. Enter **org_chart_db** as the database name. +2. Click **Save** to create the database. + +![Database Creation Dialog](images/database-creation-dialog.jpg) + +After creating the database, right-click the **org_chart_db** database and choose **Query Tool** from the context menu. + +**Quick procedure before running SQL:** + +- Clear the editor (Ctrl+A → Delete) to remove any previous statements. +- Enter the SQL, then click **Execute / Execute Query** (or press **F5**) to run it. +- After execution, clear the editor again before entering the next statement. + +Follow this simple sequence for every SQL in this guide. + +#### Creating the table + +Run the following SQL to create the **org_chart_layout** table: + +```sql +CREATE TABLE IF NOT EXISTS org_chart_layout ( + id text PRIMARY KEY, + role text NOT NULL, + parent_id text NULL +); +``` +![Create Table Query](images/create-table-query.jpg) + +The table structure includes: +- **id** - Primary key for unique node identification. +- **role** - Display text for the node in the organizational chart layout. +- **parent_id** - Foreign key reference to the parent node (NULL for root). + +#### Inserting sample data + +Add organizational chart data using the SQL **INSERT** statement. The sample data shows a typical organizational structure with board, management, and department levels. + +```sql +INSERT INTO org_chart_layout (id, role, parent_id) VALUES +('parent', 'Board', NULL), +('1', 'General Manager', 'parent'), +('2', 'Human Resource Manager', '1'), +('3', 'Trainers', '2'), +('4', 'Recruiting Team', '2'), +('5', 'Finance Asst. Manager', '2'), +('6', 'Design Manager', '1'), +('7', 'Design Supervisor', '6'), +('8', 'Development Supervisor', '6'), +('9', 'Drafting Supervisor', '6'), +('10', 'Operations Manager', '1'), +('11', 'Statistics Department', '10'), +('12', 'Logistics Department', '10'), +('16', 'Marketing Manager', '1'), +('17', 'Overseas Sales Manager', '16'), +('18', 'Petroleum Manager', '16'), +('20', 'Service Department Manager', '16'), +('21', 'Quality Control Department', '16') +ON CONFLICT (id) DO UPDATE +SET role = EXCLUDED.role, + parent_id = EXCLUDED.parent_id; +``` + +![Insert Data Query](images/insert-data-query.jpg) + +#### Verifying data insertion + +Run a **SELECT** query to confirm the data insertion: + +```sql +SELECT * FROM org_chart_layout ORDER BY id; +``` + +The query should return the inserted rows. Parent–child relationships are indicated by the **parent_id** column, which references the **id** of the parent node (NULL for root nodes). + +![Verify Data Query Results](images/verify-data-results.jpg) + + +### Option B: Automated (seed script) + +This project includes an automated initialization script that handles database creation, table schema generation, and data seeding in one command. + +The script performs the following operations: +1. **Dynamic Database Provisioning**: Detects if the database exists and creates it automatically. +2. **Schema Generation**: Creates the **org_chart_layout** table with the required primary keys and organizational relationships. +3. **Data Seeding**: Populates the table with organizational data from a JSON source. + +The implementation details for the automated initialization script are covered in the [Automated database initialization and seeding](#automated-database-initialization-and-seeding) section under Backend Implementation. + +## Backend implementation + +### Backend dependencies + +Create a **server** folder inside the project root folder, navigate to it, and install the following packages: + +```powershell +cd server +npm install express pg cors dotenv +npm install -D @types/express @types/pg @types/cors @types/node typescript tsx nodemon +``` + +**Dependencies Explained:** +- **express** - Web framework for building REST APIs. +- **pg** - PostgreSQL client for Node.js. +- **cors** - To able cross-origin requests. +- **dot env** - Loads environment variables from the .env file. +- **typescript**, **tsx** - TypeScript runtime and compiler. + +### Database connection configuration + +#### Environment configuration + +Create a **server/.env** file with the following configuration: + +```bash +DB_USER=postgres +DB_PASSWORD=your_password +DB_HOST=localhost +DB_PORT=5432 +DB_NAME=org_chart_db +PORT=5000 +NODE_ENV=development +``` + +> **Note**: Update **DB_PASSWORD** to match your local PostgreSQL credentials. + +#### Connection pool configuration + +Create a **server/src/db/index.ts** file to configure the connection pool that manages database connections efficiently. + +```ts +import { Pool } from 'pg'; +import dotenv from 'dotenv'; + +dotenv.config(); + +const pool = new Pool({ + user: process.env.DB_USER, + password: process.env.DB_PASSWORD, + host: process.env.DB_HOST, + port: parseInt(process.env.DB_PORT || '5432'), + database: process.env.DB_NAME, + max: 20, + idleTimeoutMillis: 30000, + connectionTimeoutMillis: 2000, +}); + +pool.on('error', (err) => { + console.error('Unexpected error on idle client', err); + process.exit(-1); +}); + +export default pool; +``` +The error handler captures unexpected database errors on idle connections and terminates the application to prevent operating in an unstable state. + +> **Important**: Replace **your_password** with the actual PostgreSQL password set during installation. Never commit the **.env** file to version control. + +#### TypeScript type definitions + +Create a **server/src/types/layout.types.ts** file and add the following interface: + +```ts +export interface LayoutNode { + id: string; + parent_id: string | null; + role: string; +} +``` + +### Automated database initialization and seeding + +This section explains the automated database initialization and seeding process that creates the database, applies the schema, and populates the initial organizational chart data. + +#### Seed data file + +Create a **server/src/data/layoutSeed.json** file with the organizational chart data: + +```javascript +[ + { "id": "parent", "parent_id": null, "role": "Board" }, + { "id": "1", "parent_id": "parent", "role": "General Manager" }, + { "id": "2", "parent_id": "1", "role": "Human Resource Manager" } + // More data... +] +``` + +#### Seed script + +Create a **server/src/script/seedLayout.ts** file that automates database creation and data insertion: + +```ts +import pool from '../db/index.js'; +import pkg from 'pg'; +const { Client } = pkg; +import { readFileSync } from 'fs'; +import { join, dirname } from 'path'; +import { fileURLToPath } from 'url'; +import { LayoutNode } from '../types/layout.types.js'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +const seedDatabase = async (): Promise => { + const dbName = process.env.DB_NAME || 'org_chart_db'; + + // Step 1: Create database if it doesn't exist + const systemClient = new Client({ + user: process.env.DB_USER, + password: process.env.DB_PASSWORD, + host: process.env.DB_HOST, + port: parseInt(process.env.DB_PORT || '5432'), + database: 'postgres', + }); + + try { + await systemClient.connect(); + const res = await systemClient.query( + `SELECT 1 FROM pg_database WHERE datname = '${dbName}'` + ); + + if (res.rowCount === 0) { + console.log(`Database "${dbName}" not found. Creating...`); + await systemClient.query(`CREATE DATABASE ${dbName}`); + console.log(`Database "${dbName}" created successfully.`); + } else { + console.log(`Database "${dbName}" already exists.`); + } + } catch (error) { + console.error('Error checking/creating database:', error); + } finally { + await systemClient.end(); + } + const client = await pool.connect(); + + try { + console.log('Starting database seeding...'); + + const seedDataPath = join(__dirname, '../data/layoutSeed.json'); + const seedData: LayoutNode[] = JSON.parse(readFileSync(seedDataPath, 'utf-8')); + + await client.query(` + DROP TABLE IF EXISTS org_chart_layout; + + CREATE TABLE org_chart_layout ( + id TEXT PRIMARY KEY, + parent_id TEXT, + role TEXT NOT NULL, + FOREIGN KEY (parent_id) REFERENCES org_chart_layout(id) ON DELETE CASCADE + ); + + CREATE INDEX idx_org_chart_layout_parent_id ON org_chart_layout(parent_id); + `); + + console.log('Table created successfully'); + for (const node of seedData) { + await client.query( + 'INSERT INTO org_chart_layout (id, parent_id, role) VALUES ($1, $2, $3)', + [node.id, node.parent_id, node.role] + ); + } + + console.log(`Successfully seeded ${seedData.length} nodes`); + console.log('Database seeding completed!'); + + process.exit(0); + } catch (error) { + console.error('Error seeding database:', error); + process.exit(1); + } finally { + client.release(); + } +}; + +seedDatabase(); +``` + +#### Running the seed script + +Add the seed script to your **server/package.json** file: + +```javascript +{ + "scripts": { + "build": "tsc", + "start": "node dist/server.js", + "dev": "tsx watch src/server.ts", + "seed": "tsx src/script/seedLayout.ts" + } +} +``` + +Execute the following command to initialize the database: + +```powershell +cd server +npm run seed +``` + +This creates the database, table schema, and populates it with organizational chart nodes. + +### Backend API endpoints + +Create the API layer to expose organizational chart data to the frontend. + +#### Controller + +Create a **server/src/controllers/layout.controller.ts** file to handle database queries: + +```ts +import { Request, Response } from 'express'; +import pool from '../db/index.js'; +import { LayoutNode } from '../types/layout.types.js'; + +/** + * Fetches all organizational chart layout nodes from the database + * Returns organizational chart data as JSON array + */ +export const getLayoutData = async (req: Request, res: Response): Promise => { + try { + // Execute SQL query to fetch all nodes ordered by id + const result = await pool.query( + 'SELECT id, parent_id, role FROM org_chart_layout ORDER BY id' + ); + + // Send the rows array as JSON response + res.json(result.rows); + } catch (error) { + // Log error for debugging + console.error('Error fetching layout data:', error); + + // Extract error message safely + const errorMessage = error instanceof Error ? error.message : 'Unknown error'; + + // Return 500 Internal Server Error with details in development mode + res.status(500).json({ + message: 'Failed to fetch layout data', + error: process.env.NODE_ENV === 'development' ? errorMessage : undefined + }); + } +}; +``` + +#### Routes + +Create a **server/src/routes/layout.routes.ts** file to map URL endpoints to controller functions: + +```ts +import { Router } from 'express'; +import { getLayoutData } from '../controllers/layout.controller.js'; + +// Create a new router instance +const router = Router(); + +// Define GET endpoint: /api/layout +// When accessed, it calls the `getLayoutData` controller function +router.get('/layout', getLayoutData); + +export default router; +``` + +This creates the endpoint **http://localhost:5000/api/layout** that returns the organizational chart data. + +#### Main server file + +Create a **server/src/server.ts** file to configure Express, enable CORS, and start the server: + +```ts +import express, { Request, Response, NextFunction } from 'express'; +import cors from 'cors'; +import dotenv from 'dotenv'; +import pool from './db/index.js'; +import layoutRoutes from './routes/layout.routes.js'; + +// Load environment variables +dotenv.config(); + +const app = express(); +const PORT = process.env.PORT || 5000; + +// Middleware: Parse incoming JSON request bodies +app.use(express.json()); + +// Middleware: Enable CORS for React frontend +// Allows requests from Vite dev server (ports 5173, 5174) +app.use(cors({ + origin: ['http://localhost:5173', 'http://localhost:5174'], + credentials: true +})); + +// Register API routes with /api prefix +// All routes from `layoutRoutes` will be accessible at /api/* +app.use('/api', layoutRoutes); + +// 404 Handler: Catch all undefined routes +app.use((req: Request, res: Response) => { + res.status(404).json({ message: 'Route not found' }); +}); + +// Global Error Handler: Catch any unhandled errors +app.use((err: Error, req: Request, res: Response, next: NextFunction) => { + console.error('Server error:', err); + res.status(500).json({ + message: 'Internal server error', + error: process.env.NODE_ENV === 'development' ? err.message : undefined + }); +}); + +/** + * Start the Express server + * First tests database connectivity, then starts HTTP server + */ +const startServer = async (): Promise => { + try { + // Test database connection before starting server + await pool.query('SELECT NOW()'); + console.log('✓ Database connected successfully'); + + // Start listening for HTTP requests + app.listen(PORT, () => { + console.log(`✓ Server running on http://localhost:${PORT}`); + console.log(`✓ API endpoint: http://localhost:${PORT}/api/layout`); + }); + } catch (error) { + console.error('Failed to start server:', error); + process.exit(1); // Exit with error code + } +}; + +startServer(); +``` + +### Running the backend server + +Open a terminal and navigate to the **server** folder: + +```powershell +cd server +npm run dev +``` + +Expected console output when the server starts successfully: + +``` +✓ Database connected successfully +✓ Server running on http://localhost:5000 +✓ API endpoint: http://localhost:5000/api/layout +``` + +This confirms: +- PostgreSQL connection is established. +- Express server is listening on port 5000. +- The API endpoint is accessible. + +> **Important**: Keep this terminal window open. The backend must continue running to serve data to the frontend. + +## Frontend implementation + +### Frontend dependencies + +From your project root, scaffold the client application using Vite (React + TypeScript template): + +```powershell +npm create vite@latest client -- --template react-ts + +``` + +Then install the UI and type dependencies: + +```powershell +cd client +npm install @syncfusion/ej2-react-diagrams @syncfusion/ej2-data @syncfusion/ej2-base +npm install react react-dom +npm install -D @types/react @types/react-dom typescript vite +``` + +**Package Overview:** +- **@syncfusion/ej2-react-diagrams** - React Diagram component with **OrganizationalChart** layout support. +- **@syncfusion/ej2-data** - DataManager for data binding. +- **@syncfusion/ej2-base** - Core utilities and base components. +- **vite** - Fast build tool and development server. + +Import Syncfusion® CSS styles in the **client/src/index.css** file for proper component rendering: + +```css +/* Import Material theme base styles */ +@import '@syncfusion/ej2-base/styles/material.css'; + +/* Import Diagram component-specific styles */ +@import '@syncfusion/ej2-react-diagrams/styles/material.css'; +``` + +> **Note**: Syncfusion® provides multiple themes (Material, Bootstrap, Fabric). This example uses Material theme for modern appearance. + +#### TypeScript type definitions + +Create a **client/src/types/layout.types.ts** file and add the following interface: + +```ts +export interface LayoutNode { + id: string; + parent_id: string | null; + role: string; +} + +``` + +### Service layer + +Create a **client/src/services/layoutService.ts** file to handle API communication: + +This service layer handles the HTTP request, performs error checking, and returns typed data that components can use. + +```ts +import type { LayoutNode } from '../types/layout.types'; + +const API_URL = 'http://localhost:5000/api/layout'; + +export const fetchLayoutData = async (): Promise => { + const response = await fetch(API_URL); + + if (!response.ok) { + throw new Error(`Failed to fetch layout data: ${response.statusText}`); + } + + return response.json(); +}; +``` + +### Diagram component + +Create a `OrganizationalLayout.tsx` file inside **client/src/components/** folder to render the organizational chart layout: + +The Diagram component fetches data on mount, binds it to the **DataManager**, and configures organizational chart layout properties. + +{% tabs %} +{% highlight js tabtitle="index.tsx" %} +{% include code-snippet/diagram/reactCurlyExamples/postgreSQL-cs1/app/index.tsx %} +{% endhighlight %} +{% endtabs %} + +Add the `OrganizationalLayout` component to `App.tsx` as shown below. + +```javascript +import './App.css'; +import OrganizationalLayout from './components/OrganizationalLayout'; + +function App() { + return ( +
    +
    +

    Syncfusion® React Diagram - Organizational Chart Layout

    +
    +
    + +
    +
    + ); +} + +export default App; + +``` + +### Running the application + +Run the client dev server: + +```powershell +cd client +npm run dev +``` + +Open `http://localhost:5173` in a browser. The organizational chart should render using data fetched from the backend API. + +**Application Flow:** +1. React component mounts → triggers **useEffect** hook. +2. Service layer fetches data from **http://localhost:5000/api/layout**. +3. Backend queries PostgreSQL and returns JSON array. +4. Frontend receives data → wraps it with **DataManager**. +5. **DiagramComponent** renders organizational chart visualization. + +> **Note**: If the diagram doesn't appear, press F12 to check the browser console for errors and verify both backend and frontend servers are running. + +## Troubleshooting + +### Database initialization issues + +**Symptom**: `Error: database "org_chart_db" does not exist` + +**Root Cause**: The initialization script has not been run, or the database user lacks creation privileges. + +**Resolution Steps**: +1. **Run Initialization**: Execute **npm run seed** in the **server** folder. +2. **PostgreSQL Service**: Ensure PostgreSQL is running on your system: + ```powershell + Get-Service -Name postgresql* + ``` +3. **Check Permissions**: Ensure the database user has **CREATEDB** rights. +4. **Environment Check**: Verify **DB_NAME** in **server/.env** matches the expected name. + +**Symptom**: `Error: password authentication failed` + +**Root Cause**: The password in **server/.env** does not match the PostgreSQL user password. + +**Resolution Steps**: +1. Open pgAdmin 4. +2. Right-click on user → **Properties** → **Definition**. +3. Enter a new password and save. +4. Update **DB_PASSWORD** in **server/.env** with the new password. +5. Restart the Node.js server with **npm run dev**. + +> **Tip**: Avoid special characters in PostgreSQL passwords to prevent shell escaping issues. + +### CORS configuration + +CORS (Cross-Origin Resource Sharing) errors occur when the frontend and backend run on different ports without proper permission configuration. + +**Symptom**: Browser console shows `Access to fetch at 'http://localhost:5000/api/layout' from origin 'http://localhost:5173' has been blocked by CORS policy` + +**Root Cause**: The backend CORS configuration does not include the frontend's port. + +**Resolution Steps**: +1. Check the frontend port (usually 5173). +2. Open **server/src/server.ts**. +3. Update the CORS origin array to include all frontend ports: + ```ts + app.use(cors({ + origin: ['http://localhost:5173', 'http://localhost:5174', 'http://localhost:3000'], + credentials: true + })); + ``` +4. Save the file and refresh the browser page. + +**Additional Check**: If using a different port, add it to the origins array. + +### Empty diagram rendering + +An empty diagram (no nodes visible) can result from API failures, empty database, or data binding issues. + +**Symptom**: Page loads successfully but diagram area is blank with no nodes displayed. + +**Diagnostic Steps**: + +1. **Verify API is responding**: + ```powershell + Invoke-WebRequest -Uri http://localhost:5000/api/layout -UseBasicParsing + ``` + **Expected**: JSON array with organizational chart data should be returned. + +2. **Check database has data**: + Open pgAdmin Query Tool and execute: + ```sql + SELECT COUNT(*) FROM org_chart_layout; + ``` + **Expected**: Should return the number of records inserted. + +3. **Inspect browser Network tab**: + - Press F12 → **Network** tab. + - Refresh the page. + - Look for the **layout** request. + - Status should be **200 OK**. + - **Preview** tab should show JSON data. + +4. **Check component state**: + - Add console logs in `OrganizationalLayout.tsx`: + ```javascript + useEffect(() => { + const loadData = async () => { + const layoutData = await fetchLayoutData(); + // Log data + console.log('Fetched data:', layoutData); + setData(layoutData); + }; + loadData(); + }, []); + ``` + - Verify data is being received and set correctly. + +**Common Resolution**: Most empty diagram issues are caused by the backend server not running or CORS blocking the API request. + +> Please find the sample in this [Github location](https://github.com/SyncfusionExamples/ej2-web-diagram-examples/tree/master/React/organizational-layout-postgresql) + + +## See Also + +- [Syncfusion® React Diagram Documentation](https://ej2.syncfusion.com/react/documentation/diagram/getting-started) +- [DataManager API Reference](https://ej2.syncfusion.com/react/documentation/data/getting-started) +- [Organizational Chart Layout](https://ej2.syncfusion.com/react/documentation/diagram/org-chart) +- [PostgreSQL Node.js Driver](https://node-postgres.com/) +- [Express REST API Best Practices](https://expressjs.com/en/guide/routing.html) \ No newline at end of file diff --git a/ej2-react/file-manager/file-system-provider.md b/ej2-react/file-manager/file-system-provider.md index cf3937a54b..e5b67f73f2 100644 --- a/ej2-react/file-manager/file-system-provider.md +++ b/ej2-react/file-manager/file-system-provider.md @@ -63,102 +63,191 @@ After setting the root directory of the file system, just build and run the proj ## Azure cloud file system provider -The Azure cloud file system provider allows the users to access and manage the blobs in the Azure blob storage. To get started, clone the [azure-aspcore-file-provider](https://github.com/SyncfusionExamples/azure-aspcore-file-provider) using the following command +### Introduction to Azure Blob Storage - ```ts +Azure Blob Storage is Microsoft Azure's object storage solution for the cloud, optimized for storing massive amounts of unstructured data. In this guide, the Syncfusion React File Manager connects to Blob Storage through an ASP.NET Core backend so you can securely browse and perform file operations in the File Manager component. - git clone https://github.com/SyncfusionExamples/azure-aspcore-file-provider azure-aspcore-file-provider +### Prerequisites - ``` +Before you integrate Azure Blob Storage with the Syncfusion React File Manager, ensure you have: +- An active Microsoft Azure subscription +- A Storage Account with Blob service enabled +- A Blob Container and an optional root folder inside that container +- Azure credentials: `accountName`, `accountKey`, and `blobName` -After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, register the Azure storage by passing details like name, password, and blob name to the Register Azure method in the File Manager controller. +### Setting Up Azure Blob Storage - ```ts +- Sign in to the [Azure Portal](https://portal.azure.com/) and [create a storage account](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?tabs=azure-portal) with Blob service enabled. +- [Create a Blob Container](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-portal?tabs=azure-portal#create-a-container) (example: files). See Azure docs for [container naming rules](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blobs-introduction#naming-and-referencing-containers-blobs-and-metadata). - void RegisterAzure(string accountName, string accountKey, string blobName) +### Backend Setup - ``` +Clone the [Azure File Provider](https://github.com/SyncfusionExamples/azure-aspcore-file-provider) using the following command, -Then, set the blob container and the root blob directory by passing the corresponding URLs as parameters in the setBlobContainer method as follows. +```bash +git clone https://github.com/SyncfusionExamples/ej2-azure-aspcore-file-provider ej2-azure-aspcore-file-provider +``` - ```ts - void setBlobContainer(string blobPath, string filePath) - ``` +> **Note:** This Azure Blob Storage provider for the Syncfusion React File Manager is intended for demonstration and evaluation only. Before using it in production, consult your security team and complete a security review. -> **Note:** Also, assign the same *blobPath URL* and *filePath URL* in [**AzureFileOperations** and **AzureUpload**](https://github.com/SyncfusionExamples/azure-aspcore-file-provider/blob/master/Controllers/AzureProviderController.cs) methods in the File Manager controller to determine the original path of the Azure blob. +To initialize a local service with the above-mentioned file operations, create a folder named `Controllers` in the server project. Then, create a `.cs` file in the `Controllers` folder and add the required file operation code from [AzureProviderController.cs](https://github.com/SyncfusionExamples/azure-aspcore-file-provider/blob/master/Controllers/AzureProviderController.cs). You can also find the method-level details for this provider in the same repository. -After setting the blob container references, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the **ajaxSettings** property of the File Manager component to the appropriate controller methods allows to manage the Azure blob storage. +### Registering Azure Credentials in the Provider - {% raw %} +After cloning, open the project in Visual Studio and restore the NuGet packages. Then, register Azure Storage by passing **accountName**, **accountKey**, and **blobName** to the `RegisterAzure` method in the `AzureProviderController.cs` file. - ```ts - // Initializing File Manager Azure cloud file system service. -
    -
    - - -
    -
    - ``` - {% endraw %} +```csharp +this.operation.RegisterAzure("<--accountName-->", "<--accountKey-->", "<--blobName-->"); +``` -> **NuGet:** Additionally, we have created a [**NuGet**](https://www.nuget.org/packages/Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core) package of **ASP.NET Core Azure file system provider**. +Then, set the blob container and the root blob directory by passing the corresponding URLs as parameters to the `SetBlobContainer` method, as shown below. -Please, use the following command to install the NuGet package in an application. +```csharp +public AzureProviderController(IHostingEnvironment hostingEnvironment) +{ + this.operation = new AzureFileProvider(); + blobPath = "<--blobPath-->"; + filePath = "<--filePath-->"; + ... + this.operation.SetBlobContainer(blobPath, filePath); +} +``` - ```ts +> **Note:** The **blobPath** represents a container path in Azure Blob Storage, and **filePath** refers to the file location path. For example, create a container named **blob** in the specified Azure Blob Storage account. Inside that container, create a folder named **Files** that contains all the files and folders to be displayed in the File Manager. Refer to the following paths as an example. - dotnet add package Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core - ``` +```csharp +public AzureProviderController(IHostingEnvironment hostingEnvironment) +{ + this.operation = new AzureFileProvider(); + blobPath = "https://azure_service_account.blob.core.windows.net/blob/"; + filePath = "https://azure_service_account.blob.core.windows.net/blob/Files"; + ... +} +``` + +### Configuring Syncfusion File Manager UI + +File Manager can be initialized using the `` tag. To include the File Manager component in application import the `FileManagerComponent` from `ej2-react-filemanager` package in `App.tsx` or `App.jsx`. Then add the File Manager component as shown in below code example. + +Now, build and run the Azure File Service provider project. It will be hosted in `http://localhost:{port}`. Map the [ajaxSettings](https://ej2.syncfusion.com/react/documentation/api/file-manager/index-default#ajaxsettings) of the File Manager component to the AzureProvider controller endpoints (Url, UploadUrl, DownloadUrl, GetImageUrl) to manage blobs in your Azure Blob Storage container. + +{% raw %} + +```ts +// Initializing File Manager Azure cloud file system service. +
    +
    + + +
    +
    +``` +{% endraw %} + +To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion® React File Manager component using the Azure cloud file system provider, initialize the Azure cloud provider in the controller. -> **Note:** To learn more about file actions that can be performed with Azure cloud file system Provider, refer to this [link](https://github.com/SyncfusionExamples/azure-aspcore-file-provider#key-features) +### Supported File Operations + +We have enabled below list of features that can be performed using Azure File Service provider, + +|Operation | Function | +|---|---| +| Upload |
    • [Directory upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#directoryupload)
    • [Sequential upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#sequentialupload)
    • [Chunk upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#chunksize)
    • [Auto upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#autoupload)
    | +| Access Control |
    • [Setting rules to files/folders](https://github.com/SyncfusionExamples/azure-aspcore-file-provider/blob/master/Models/AzureFileProvider.cs#L58)
    • [Supported rules](https://github.com/SyncfusionExamples/azure-aspcore-file-provider/blob/master/Models/Base/AccessDetails.cs#L65)
    | + +Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository. + +> **Note:** To learn more about the file actions supported by the Azure cloud file system provider, refer to the [key features](https://github.com/SyncfusionExamples/azure-aspcore-file-provider#key-features). ## Amazon S3 cloud file provider -The Amazon ***S3*** (*Simple Storage Service*) cloud file provider allows the users to access and manage a server hosted file system as collection of objects stored in the Amazon S3 Bucket. To get started, clone the [amazon-s3-aspcore-file-provider](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider) using the following command +### Introduction to Amazon S3 - ```ts - git clone https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider.git amazon-s3-aspcore-file-provider.git - ``` +Amazon Simple Storage Service (Amazon S3) is AWS's object storage service for storing and retrieving any amount of data. S3 is durable, scalable, and pay‑as‑you‑go. In this guide the Syncfusion React File Manager connects to S3 through an ASP.NET Core backend so you can securely browse and perform file operations in the File Manager component. -> **Note:** To learn more about creating and configuring an Amazon S3 bucket, refer to this [link](https://docs.aws.amazon.com/AmazonS3/latest/user-guide/create-configure-bucket.html). +### Prerequisites -After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register Amazon S3 client account details like *awsAccessKeyId*, *awsSecretKeyId* and *awsRegion* details in **RegisterAmazonS3** method in the File Manager controller to perform the file operations. +Before you integrate Amazon S3 with the Syncfusion React File Manager, ensure you have: + - An AWS Account + - A configured S3 Bucket + - AWS credentials: `awsAccessKeyId`, `awsSecretAccessKeyId`, `bucketRegion`, `awsRegion`. - ```ts - void RegisterAmazonS3(string bucketName, string awsAccessKeyId, string awsSecretAccessKey, string bucketRegion) - ``` +### Setting Up Amazon S3 -After registering the Amazon client account details, just build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the **ajaxSettings** property of the File Manager component to the appropriate controller methods allows to manage the Amazon ***S3*** (*Simple Storage Service*) bucket's objects storage. +#### Create an S3 Bucket - {% raw %} + - Open the [AWS Management Console guide](https://docs.aws.amazon.com/awsconsolehelpdocs/) and log into AWS Console -> Navigate to S3. + - Proceed by clicking `Create Bucket`. A bucket is a container for objects. An object is a file and any metadata that describes that file. The Amazon S3 provider requires a top-level root folder in your bucket to place all required files and subfolders inside this root. Click this [link](https://docs.aws.amazon.com/AmazonS3/latest/userguide/creating-buckets-s3.html) for more details. + - Provide a DNS-compliant bucket name. Click this [link](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html) for more details. + - Choose the AWS region. Click this [link](https://docs.aws.amazon.com/general/latest/gr/s3.html) for more details. - ```ts - // Initializing File Manager Amazon S3 cloud file system service. -
    -
    - - -
    -
    - ``` - {% endraw %} +### Backend Setup + +Clone the [Amazon S3 File Provider](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider) using the following command, + +```bash +git clone https://github.com/SyncfusionExamples/ej2-amazon-s3-aspcore-file-provider ej2-amazon-s3-aspcore-file-provider +``` + +> **Note:** This Amazon S3 provider for the Syncfusion React File Manager is intended for demonstration and evaluation only. Before using it consult your security team and complete a security review. -> **Note:** To learn more about the file actions that can be performed with Amazon S3 cloud file provider, refer to this [link](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider#key-features) +To initialize a local service with the above-mentioned file operations, create a folder named `Controllers` in the server project. Then, create a `.cs` file in the `Controllers` folder and add the required file operation code from [AmazonS3ProviderController.cs](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider/blob/master/Controllers/AmazonS3ProviderController.cs). You can also find the method-level details for this provider in the same repository. + +### Registering S3 Credentials in the Provider + +After cloning, open the project in Visual Studio and restore the NuGet packages. Then, register the Amazon S3 client details (for example, **bucketName**, **awsAccessKeyId**, **awsSecretAccessKeyId**, and **awsRegion**) in the `RegisterAmazonS3` method in the `AmazonS3ProviderController.cs` file. + +```csharp +this.operation.RegisterAmazonS3("<---bucketName--->", "<---awsAccessKeyId--->", "<---awsSecretAccessKey--->", "<---region--->"); +``` + +### Configuring Syncfusion File Manager UI + +File Manager can be initialized using the `` tag. To include the File Manager component in application import the `FileManagerComponent` from `ej2-react-filemanager` package in `App.tsx` or `App.jsx`. Then add the File Manager component as shown in below code example. + +Now, build and run the Amazon File Service provider project. It will be hosted in `http://localhost:{port}`. Map the [ajaxSettings](https://ej2.syncfusion.com/react/documentation/api/file-manager/index-default#ajaxsettings) of the File Manager component to the AmazonS3Provider controller endpoints (Url, UploadUrl, DownloadUrl, GetImageUrl) to manage blobs in your S3 bucket. + +{% raw %} + +```ts +// Initializing File Manager Amazon file service. +
    +
    + + +
    +
    +``` +{% endraw %} + +To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion® React File Manager component using the Amazon S3 cloud file provider, initialize the Amazon S3 cloud provider in the controller. + +### Supported File Operations + +We have enabled below list of features that can be performed using Amazon File Service provider, + +|Operation | Function | +|---|---| +| Upload |
    • [Directory upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#directoryupload)
    • [Sequential upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#sequentialupload)
    • [Chunk upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#chunksize)
    • [Auto upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#autoupload)
    | +| Access Control |
    • [Setting rules to files/folders](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider/blob/master/Models/AmazonS3FileProvider.cs#L51)
    • [Supported rules](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider/blob/master/Models/Base/AccessDetails.cs#L13)
    | + +Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository. + +> **Note:** To learn more about the file actions supported by the Amazon S3 Cloud File provider, refer to the [key features](https://github.com/SyncfusionExamples/amazon-s3-aspcore-file-provider#key-features). ## SharePoint file provider @@ -332,79 +421,99 @@ After configuring the connection, just build and run the project. Now, the proje > **Note:** To learn more about file actions that can be performed with SQL database file system provider, refer to this [link](https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider#key-features) +<<<<<<< HEAD ## Node.js file system provider The Node.js file system provider allows the users to manage the files and folders in a physical file system. It provides methods for performing all basic file operations like creating a folder, copy, move, delete, and download files and folders in the file system. We can use of the Node.js file system provider either by installing the [ej2-filemanager-node-filesystem](https://www.npmjs.com/package/@syncfusion/ej2-filemanager-node-filesystem) package or by cloning the [file system provider](https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem) from the GitHub. +======= +## Node JS file system provider -### Using ej2-filemanager-node-filesystem package - -* Install the ej2-filemanager-node-filesystem package by running the below command. - - ```ts - - npm install @syncfusion/ej2-filemanager-node-filesystem +### Introduction +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f - ``` +The Node JS file system provider lets File Manager perform all basic file operations like creating a folder, copy, move, delete, and download files and folders on a physical file system via a lightweight Node service. -* After installing the package, navigate to the ej2-filemanager-node-filesystem package folder within the node-modules -* Run the command **npm install** command. +### Backend Setup -### Cloning the ej2-filemanager-node-filesystem from GitHub +Clone the [Node JS provider](https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem) using the following command, -* Clone the ej2-filemanager-node-filesystem using the following command. +```bash - ```ts +git clone https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem.git node-filesystem-provider - git clone https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem.git node-filesystem-provider +``` - ``` +**Note:** This Node JS file system provider for the Syncfusion React File Manager is intended for demonstration and evaluation only. Before using it in production, consult your security team and complete a security review. -* After cloning, open the root folder and run the command **npm install** command. +After cloning, open the root folder and run the **npm install** command. After installing the packages, set the root folder directory of the physical file system in the package JSON under scripts sections as follows. - ```ts +```json - "start": "node filesystem-server.js -d D:/Projects" +"start": "node filesystem-server.js -d D:/Projects" - ``` +``` > **Note:** By default, the root directory will be configured to set `C:/Users` as the root directory. To set the port in which the project to be hosted and the root directory of the file system. Run the following command. - ```ts +```bash - set PORT=3000 && node filesystem-server.js -d D:/Projects +set PORT=3000 && node filesystem-server.js -d D:/Projects - ``` +``` > **Note:** By default, the service will run `8090` port. +<<<<<<< HEAD Now, just mapping the **ajaxSettings** property of the File Manager component to the appropriate file operation methods in the filesystem-server.js file will allow to manage the physical file system with Node.js file system provider. +======= +### Configuring Syncfusion File Manager UI +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f - {% raw %} +File Manager can be initialized using the `` tag. To include the File Manager component in application import the `FileManagerComponent` from `ej2-react-filemanager` package in `App.tsx` or `App.jsx`. Then add the File Manager component as shown in below code example. - ```ts +Map the [ajaxSettings](https://ej2.syncfusion.com/react/documentation/api/file-manager/index-default#ajaxsettings) of the File Manager component to the AzureProvider controller endpoints. - // File Manager sample with nodejs service. -
    -
    - - -
    -
    +{% raw %} - ``` - {% endraw %} +```typescript +<<<<<<< HEAD > **Note:** To learn more about file actions that can be performed with Node.js file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem#key-features) +======= +// File Manager sample with nodejs service. +
    +
    + + +
    +
    + +``` +{% endraw %} + +### Supported File Operations + +We have enabled below list of features that can be performed using Node JS File Service provider, + +|Operation | Function | +|---|---| +| Upload |
    • [Directory upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#directoryupload)
    • [Sequential upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#sequentialupload)
    • [Chunk upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#chunksize)
    • [Auto upload](https://ej2.syncfusion.com/react/documentation/api/file-manager/uploadsettingsmodel#autoupload)
    | +| Access Control |
    • [Setting rules to files/folders](https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem/blob/master/accessRules.json)
    | + +Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository. + +> **Note:** To learn more about the file actions supported by the Node JS File provider, refer to the [key features](https://github.com/SyncfusionExamples/ej2-filemanager-node-filesystem/blob/master/README.md#key-features) +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f ## Google Drive file system provider diff --git a/ej2-react/gantt/performance.md b/ej2-react/gantt/performance.md index ddc63879d8..80052a1d5e 100644 --- a/ej2-react/gantt/performance.md +++ b/ej2-react/gantt/performance.md @@ -75,6 +75,6 @@ The Gantt Chart component operates on a client-server basis, meaning data is sen ```csharp var serializer = new JavaScriptSerializer { MaxJsonLength = Int32.MaxValue }; ``` -## Microsoft excel limitation while exporting millions of records to excel file format +## Microsoft Excel limitation while exporting millions of records to excel file format By default, Microsoft Excel supports only 1,048,576 records per sheet. Therefore, exporting millions of records directly to Excel is not feasible. For more details on Microsoft Excel specifications and limits, you can refer to the [documentation](https://support.microsoft.com/en-gb/office/excel-specifications-and-limits-1672b34d-7043-467e-8e27-269d656771c3). It is recommended to export large datasets in CSV (Comma-Separated Values) or other formats that handle large data more efficiently than Excel. diff --git a/ej2-react/getting-started/gatsby.md b/ej2-react/getting-started/gatsby.md index e81dadbc91..39363fba65 100644 --- a/ej2-react/getting-started/gatsby.md +++ b/ej2-react/getting-started/gatsby.md @@ -88,7 +88,13 @@ This guide uses the [React Grid component](https://www.syncfusion.com/react-comp Themes for Syncfusion® React components can be applied using CSS or SASS from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). +<<<<<<< HEAD This example uses the `Tailwind 3` theme for the Grid component from the theme package. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: +======= +**Step 1: Create the style.css file** - Create a new file named `style.css` in the **src/pages/** directory. + +**Step 2: Import Syncfusion CSS styles** - Add the `Tailwind 3` theme imports to the **src/pages/style.css** file to style the Grid component and its dependencies. +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f {% tabs %} {% highlight bash tabtitle="npm" %} diff --git a/ej2-react/getting-started/nextjs.md b/ej2-react/getting-started/nextjs.md index 2bc8b98550..a860ce965d 100644 --- a/ej2-react/getting-started/nextjs.md +++ b/ej2-react/getting-started/nextjs.md @@ -102,6 +102,7 @@ yarn add @syncfusion/ej2-react-grids ## Import Syncfusion® CSS Styles +<<<<<<< HEAD Syncfusion® React component provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). This example uses the Tailwind 3 theme for the Grid component from the theme package. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: @@ -118,6 +119,9 @@ yarn add @syncfusion/@syncfusion/ej2-tailwind3-theme {% endhighlight %} {% endtabs %} +======= +Syncfusion® React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® React components to match the style of the application by referring to one of the built-in themes. +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f Import the **Tailwind 3** CSS styles for the Grid component and its dependent components in the **app/globals.css** file and remove the existing styles in that file, as shown below: diff --git a/ej2-react/getting-started/preact.md b/ej2-react/getting-started/preact.md index 173b794553..84ce05cbb9 100644 --- a/ej2-react/getting-started/preact.md +++ b/ej2-react/getting-started/preact.md @@ -95,6 +95,28 @@ Syncfusion® React component packages are av This guide uses the [React Grid component](https://www.syncfusion.com/react-components/react-data-grid) as an example. To install the React Grid component package, use the following command: +<<<<<<< HEAD +======= +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-react-grids --save + +{% endhighlight %} +{% highlight bash tabtitle="yarn" %} + +yarn add @syncfusion/ej2-react-grids + +{% endhighlight %} +{% endtabs %} + +## Import Syncfusion® CSS styles + +Themes for Syncfusion® React components can be added using CSS or SASS styles in the npm packages. Additional options are available via CDN or the [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). See the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for full details. + +This example uses the `Tailwind 3` theme, imported in the **src/style.css** file: + +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f {% tabs %} {% highlight bash tabtitle="npm" %} diff --git a/ej2-react/getting-started/react-remix-app.md b/ej2-react/getting-started/react-remix-app.md index 33614a4961..8da0a408ff 100644 --- a/ej2-react/getting-started/react-remix-app.md +++ b/ej2-react/getting-started/react-remix-app.md @@ -61,7 +61,11 @@ npm install @syncfusion/ej2-react-grids --save ## Adding CSS reference +<<<<<<< HEAD Syncfusion® React component provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). +======= +Import the Syncfusion® component themes in the `~/app/routes/home.tsx` file as shown below: +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f This example uses the `Tailwind 3` theme for the Grid component from the theme package. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: diff --git a/ej2-react/getting-started/sharepoint.md b/ej2-react/getting-started/sharepoint.md index 5da6807e48..ce1c757cdc 100644 --- a/ej2-react/getting-started/sharepoint.md +++ b/ej2-react/getting-started/sharepoint.md @@ -61,6 +61,7 @@ npm install @syncfusion/ej2-react-grids --save ## Import Syncfusion® CSS styles +<<<<<<< HEAD Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). This example uses the `Tailwind 3` theme for the Grid component from the theme package. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: @@ -78,12 +79,20 @@ yarn add @syncfusion/@syncfusion/ej2-tailwind3-theme {% endhighlight %} {% endtabs %} +======= +Themes for Syncfusion® React components can be applied using CSS files from npm packages, CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). Refer to the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for more detail. + +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f This example demonstrates importing the `tailwind3` theme CSS within the `App.tsx` file located at `~/src/webparts/app/components/App.tsx`: {% tabs %} {% highlight ts tabtitle="App.tsx" %} +<<<<<<< HEAD require('@syncfusion/ej2-tailwind3-theme/styles/grid/index.css'); +======= +require('@syncfusion/ej2-grids/styles/tailwind3.css'); +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f {% endhighlight %} {% endtabs %} diff --git a/ej2-react/getting-started/vite.md b/ej2-react/getting-started/vite.md index 9643209dba..591e96b928 100644 --- a/ej2-react/getting-started/vite.md +++ b/ej2-react/getting-started/vite.md @@ -55,7 +55,13 @@ yarn add @syncfusion/ej2-react-grids ## Import Syncfusion® CSS styles +<<<<<<< HEAD Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). +======= +Themes for Syncfusion® React components can be applied with CSS files supplied by the npm packages, CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme). + +By default, Vite projects include a `index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `index.css` file to prevent style conflicts. +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: diff --git a/ej2-react/markdown-editor/getting-started.md b/ej2-react/markdown-editor/getting-started.md index b17c5f73a2..398da436d2 100644 --- a/ej2-react/markdown-editor/getting-started.md +++ b/ej2-react/markdown-editor/getting-started.md @@ -29,6 +29,7 @@ Run the following commands to set up a React application: ```bash npm create vite@latest my-app -- --template react-ts ``` +<<<<<<< HEAD This command will prompt you to install the required packages and start the application. Select the options as shown below. @@ -39,10 +40,24 @@ As Syncfusion packages are not installed yet, currently, the `No` option will be ```bash cd my-app npm install +======= + +This command will prompt you to install the required packages and start the application. Select the options as shown below. + +![Markdown Editor Initial setup](../rich-text-editor/images/initial_setup.png) + +As Syncfusion packages are not installed yet, currently, the `No` option will be selected. Then, navigate to the project directory and install the dependencies using the following commands: + +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f +``` +cd my-app +npm install ``` > **Note:** To set up a React application with Nextjs or Remix, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) for more details. +> **Note:** To set up a React application with Nextjs or Remix, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) for more details. + ## Adding Syncfusion Rich Text Editor packages All the available Essential JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. @@ -91,6 +106,7 @@ Place the following Markdown Editor code in the **src/App.tsx**. {% tabs %} {% highlight ts tabtitle="App.tsx" %} {% include code-snippet/markdown-editor/getting-started-cs3/app/App.tsx %} +<<<<<<< HEAD {% endhighlight %} {% highlight js tabtitle="App.jsx" %} {% include code-snippet/markdown-editor/getting-started-cs3/app/App.jsx %} @@ -105,10 +121,30 @@ Place the following Markdown Editor code in the **src/App.tsx**. @import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; @import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css'; +======= +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f +{% endhighlight %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/markdown-editor/getting-started-cs3/app/App.jsx %} +{% endhighlight %} +{% highlight css tabtitle="App.css" %} + +@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css'; + {% endhighlight %} {% endtabs %} +<<<<<<< HEAD +======= +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f ## Run the application Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser. diff --git a/ej2-react/treegrid/getting-started.md b/ej2-react/treegrid/getting-started.md index 387b608789..5d4c40a563 100644 --- a/ej2-react/treegrid/getting-started.md +++ b/ej2-react/treegrid/getting-started.md @@ -8,7 +8,11 @@ documentation: ug domainurl: ##DomainURL## --- +<<<<<<< HEAD # Getting Started with React Tree Grid +======= +# Getting Started with React TreeGrid +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f This section outlines the steps to create a simple Essential JS 2 Tree Grid and demonstrates basic usage in a React application. @@ -40,9 +44,15 @@ Terminate the application, then run the following command: cd my-app ``` +<<<<<<< HEAD ## Adding Syncfusion® React Tree Grid packages To install the Tree Grid component, use the following command: +======= +## Adding Syncfusion® React TreeGrid packages + +To install the TreeGrid component, use the following command: +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f ``` npm install @syncfusion/ej2-react-treegrid --save @@ -95,9 +105,15 @@ The following CSS files are available in the **../node_modules/@syncfusion** pac @import "../node_modules/@syncfusion/ej2-react-treegrid/styles/tailwind3.css"; ``` +<<<<<<< HEAD ## Adding Tree Grid component The tree grid code should be placed in the **src/App.tsx** file. +======= +## Adding TreeGrid component + +The treegrid code should be placed in the **src/App.tsx** file. +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f {% tabs %} {% highlight js tabtitle="App.jsx" %} diff --git a/ej2-react/treegrid/preact.md b/ej2-react/treegrid/preact.md index 30bbe63cd3..294d572dcc 100644 --- a/ej2-react/treegrid/preact.md +++ b/ej2-react/treegrid/preact.md @@ -81,7 +81,11 @@ cd my-project With `my-project` ready using default settings, add Syncfusion® components to the project. +<<<<<<< HEAD ## Adding Syncfusion® React Tree Grid packages +======= +## Adding Syncfusion® React TreeGrid packages +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package. @@ -97,8 +101,11 @@ or yarn add @syncfusion/ej2-react-treegrid ``` +<<<<<<< HEAD > Before including Syncfusion styles, make sure to remove the default styles defined in **index.css**. This helps prevent unintended style overrides and ensures that Syncfusion components render correctly. +======= +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f ## Adding CSS reference You can add the CSS files required for the Syncfusion React Tree Grid component using one of the following methods. @@ -148,9 +155,13 @@ The following CSS files are available in the **../node_modules/@syncfusion** pac {% endhighlight %} {% endtabs %} +<<<<<<< HEAD ## Adding Tree Grid component Follow these steps to add the React Tree Grid component to the Preact project: +======= +## Adding TreeGrid component +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f 1\. Before adding the Tree Grid component to the markup, import the Tree Grid component in the **src/index.jsx** file. @@ -162,7 +173,11 @@ import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusio {% endhighlight %} {% endtabs %} +<<<<<<< HEAD 2\. Define the Tree Grid component with the [dataSource](https://helpej2.syncfusion.com/react/documentation/api/treegrid#datasource) property and column definitions. Declare the values for the `dataSource` property. +======= +2\. Define the TreeGrid component with the [dataSource](https://helpej2.syncfusion.com/react/documentation/api/treegrid#datasource) property and column definitions. Declare the values for the `dataSource` property. +>>>>>>> 8f3c51b893fb30a2292cc772a92ba38135a0569f {% tabs %} {% highlight js tabtitle="~/src/index.jsx" %} diff --git a/ej2-react/ui-kit/overview.md b/ej2-react/ui-kit/overview.md index 9592236e44..044f976114 100644 --- a/ej2-react/ui-kit/overview.md +++ b/ej2-react/ui-kit/overview.md @@ -21,7 +21,11 @@ The Essential® UI Kit for React comprises o Authentication