### Create FastAPI Server and Install Packages

Source: https://ej2.syncfusion.com/react/documentation/grid/connecting-to-backends/fastapi-server

This snippet shows the initial setup for a FastAPI server, including creating the main application instance and installing necessary packages like `uvicorn` and `sqlalchemy`.

```python
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost:3000",
    "http://localhost:8080",
    "http://localhost:4200",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
def main():
    return {"message": "Hello World"}
```

--------------------------------

### Complex Header Configuration Example

Source: https://ej2.syncfusion.com/react/documentation/treegrid/columns/headers

Demonstrates a more complex header setup with multiple levels and varied column properties.

```javascript
const columns = [
    { headerText: 'Product Details', columns: [
        { field: 'ProductID', headerText: 'Product ID', width: 120, textAlign: 'Right' },
        { field: 'ProductName', headerText: 'Product Name', width: 180 },
        { field: 'Category', headerText: 'Category', width: 150 }
    ]},
    { headerText: 'Pricing', columns: [
        { field: 'UnitPrice', headerText: 'Unit Price', width: 120, textAlign: 'Right' },
        { field: 'Quantity', headerText: 'Quantity', width: 100, textAlign: 'Right' },
        { field: 'Discount', headerText: 'Discount (%)', width: 120, textAlign: 'Right' }
    ]},
    { field: 'OrderDate', headerText: 'Order Date', width: 150, format: 'yMd' }
];
```

--------------------------------

### PDF Export with Custom Column Formatting (Example)

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

An example of applying custom formatting to a 'Size' column.

```javascript
let options = {
    columnFormats: [
        { field: 'Size', format: (value) => value.toFixed(2) + ' MB' }
    ]
};

// Apply these options during export
// treegridInstance.pdfExport(options);
```

--------------------------------

### PDF Export with Custom Page Size and Orientation (Example)

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

A concrete example of setting a custom page size and orientation for PDF export.

```javascript
let options = {
    pageSize: 'Custom',
    pageWidth: 792, // Letter width in points
    pageHeight: 612, // Letter height in points
    pageOrientation: 'Landscape'
};

// Apply these options during export
// treegridInstance.pdfExport(options);
```

--------------------------------

### PDF Export with Custom Header and Footer Content (Example)

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

An example demonstrating dynamic content in the PDF header and footer.

```javascript
let options = {
    header: {
        fromTemplate: true,
        template: "<div><p>Exported on: " + new Date().toLocaleString() + "</p></div>"
    },
    footer: {
        fromTemplate: true,
        template: "<div><p>End of Report</p></div>"
    }
};

// Apply these options during export
// treegridInstance.pdfExport(options);
```

--------------------------------

### PDF Export with Custom Header and Footer Styles (Example)

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

An example applying styles to the header and footer text.

```javascript
let options = {
    header: {
        fromTemplate: true,
        template: "<div style='text-align: center; font-size: 12pt;'>Report Header</div>"
    },
    footer: {
        fromTemplate: true,
        template: "<div style='text-align: right; font-size: 8pt;'>Confidential</div>"
    }
};

// Apply these options during export
// treegridInstance.pdfExport(options);
```

--------------------------------

### PDF Export with Custom Column Alignment (Example)

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

An example setting specific text alignments for columns.

```javascript
let options = {
    columnAlignments: [
        { field: 'Size', textAlign: 'Center' }
    ]
};

// Apply these options during export
// treegridInstance.pdfExport(options);
```

--------------------------------

### Exporting with Page Setup Options

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

Configure page setup options such as page orientation, margins, and paper size for the PDF export. This ensures the exported document fits the desired layout.

```javascript
treegrid.pdfExport({
  pageOrientation: 'Landscape',
  pageSize: 'A4',
  margin: {
    top: 50,
    bottom: 50,
    left: 50,
    right: 50
  }
});
```

--------------------------------

### PDF Export with Custom Page Margins (Example)

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

An example setting uniform margins for all sides of the PDF page.

```javascript
let options = {
    pageMargins: {
        top: 40,
        bottom: 40,
        left: 40,
        right: 40
    }
};

// Apply these options during export
// treegridInstance.pdfExport(options);
```

--------------------------------

### PDF Export with Custom Page Numbering Format (Example)

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

An example demonstrating custom page numbering format in the footer.

```javascript
let options = {
    footer: {
        fromTemplate: true,
        template: "<div>Page (Roman) \# of \#</div>"
        // Note: Actual Roman numeral conversion might require custom JS logic within the template
    }
};

// Apply these options during export
// treegridInstance.pdfExport(options);
```

--------------------------------

### PDF Export with Custom Cell Styles (Example)

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

An example of applying a specific style to cells in the 'Name' column.

```javascript
let options = {
    cellStyles: [
        { field: 'Name', style: { 'font-style': 'italic', 'color': 'purple' } }
    ]
};

// Apply these options during export
// treegridInstance.pdfExport(options);
```

--------------------------------

### Exporting with Specific Page Setup

Source: https://ej2.syncfusion.com/react/documentation/treegrid/excel-export/excel-export-options

Configure page setup options for the exported Excel file, such as orientation, paper size, and margins.

```javascript
exportOptions: {
    pageSetup: {
        orientation: 'landscape',
        paperSize: 'A4',
        margin: {
            top: 70,
            bottom: 70,
            left: 50,
            right: 50
        }
    }
}
```

--------------------------------

### Navigate to Project Directory and Install Dependencies

Source: https://ej2.syncfusion.com/react/documentation/ai-assistview

Change into the newly created project directory and install all project dependencies.

```bash
cd my-app
npm install
```

--------------------------------

### Clone SharePoint File Provider Example

Source: https://ej2.syncfusion.com/react/documentation/file-manager/file-system-provider

Clone the SharePoint file provider repository to get started. Navigate into the cloned directory to access the project files.

```bash
git clone https://github.com/SyncfusionExamples/sharepoint-aspcore-file-provider  sharepoint-aspcore-file-provider

cd sharepoint-aspcore-file-provider
```

--------------------------------

### Basic TreeGrid Header Configuration

Source: https://ej2.syncfusion.com/react/documentation/treegrid/columns/headers

Demonstrates the fundamental setup for TreeGrid headers, showing how to define columns and their basic properties.

```javascript
import * as React from 'react';
import { TreeGrid, Page } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './data';

export default class App extends React.Component {
  columns = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90 },
    { field: 'TaskName', headerText: 'Task Name', width: 180 },
    { field: 'StartDate', headerText: 'Start Date', width: 100 },
    { field: 'Duration', headerText: 'Duration', width: 110 },
  ];

  render() {
    return (
      <TreeGrid dataSource={sampleData} treeColumnIndex={1} childMapping="subtasks" allowPaging={true} columns={this.columns}>
        <Inject services={[Page]} />
      </TreeGrid>
    );
  }
}
```

--------------------------------

### Speed Dial with Radial Menu Configuration

Source: https://ej2.syncfusion.com/react/documentation/speed-dial/radial-menu

Configures the Speed Dial's radial menu with specific offset, direction, start angle, and end angle. This example shows a complete setup for rendering the component.

```jsx
import { SpeedDialComponent, SpeedDialItemModel, RadialSettingsModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' },
    { iconCss: 'e-icons e-edit' },
    { iconCss: 'e-icons e-save' }
  ];
  const radialSettings: RadialSettingsModel = { offset: '80px', direction: 'AntiClockwise', startAngle: 90, endAngle: 270 };

  return (
    <div>
      <div id="targetElement" style=></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode='Radial' position='MiddleRight' radialSettings={radialSettings} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
```

--------------------------------

### Navigate to Project Directory and Install Dependencies

Source: https://ej2.syncfusion.com/react/documentation/block-editor

Change into the newly created project directory and install its dependencies.

```bash
cd my-app
npm install

```

--------------------------------

### Install Yeoman

Source: https://ej2.syncfusion.com/react/documentation/grid/sharepoint

Install Yeoman globally. Yeoman is a scaffolding tool to help start new projects.

```bash
npm install yo --global
```

--------------------------------

### Exporting with All Options Combined

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

A comprehensive example showcasing the use of multiple PDF export options simultaneously for maximum customization.

```javascript
this.treegrid.pdfExport({
    fileName: "TreeGridExport.pdf",
    pageOrientation: 'Landscape',
    pageSize: 'A4',
    header: {
        fromTemplate: true,
        template: "<div><img src='logo.png' style='float: right; width: 100px;' /></div>"
    },
    footer: {
        fromTemplate: true,
        template: "<div>Page \"{{pageNumber}}\" of \"{{pageCount}}\"</div>"
    },
    columns: [
        { 'field': 'OrderID' },
        { 'field': 'EmployeeName' },
        { 'field': 'ShipCountry' }
    ],
    theme: {
        header: {
            fontColor: '#646464',
            font: '16px',
            fontWeight: '600',
            fontStyle: 'Normal'
        },
        record: {
            fontColor: '#646464',
            font: '14px',
            fontWeight: '400',
            fontStyle: 'Normal'
        }
    }
});
```

--------------------------------

### React Cascading Dropdown List Example

Source: https://ej2.syncfusion.com/react/documentation/drop-down-list/how-to/cascading

This snippet demonstrates a cascading dropdown list setup in React, including country, state, and city selections. It utilizes the `change` event to update dependent dropdowns and `dataBind` to reflect changes immediately. Ensure you have the necessary Syncfusion React DropDowns package installed.

```jsx
import { Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // country DropDownList instance
    countryObj;
    // state DropDownList instance
    stateObj;
    // city DropDownList instance
    cityObj;
    // define the country DropDownList data
    countryData = [
        { CountryName: 'Australia', CountryId: '2' },
        { CountryName: 'United States', CountryId: '1' }
    ];
    // define the state DropDownList data
    stateData = [
        { StateName: 'New York', CountryId: '1', StateId: '101' },
        { StateName: 'Virginia ', CountryId: '1', StateId: '102' },
        { StateName: 'Tasmania ', CountryId: '2', StateId: '105' }
    ];
    // define the city DropDownList data
    cityData = [
        { CityName: 'Albany', StateId: '101', CityId: 201 },
        { CityName: 'Beacon ', StateId: '101', CityId: 202 },
        { CityName: 'Emporia', StateId: '102', CityId: 206 },
        { CityName: 'Hampton ', StateId: '102', CityId: 205 },
        { CityName: 'Hobart', StateId: '105', CityId: 213 },
        { CityName: 'Launceston ', StateId: '105', CityId: 214 }
    ];
    // maps the country column to fields property
    countryField = { value: 'CountryId', text: 'CountryName' };
    // maps the state column to fields property
    stateField = { value: 'StateId', text: 'StateName' };
    // maps the city column to fields property
    cityField = { text: 'CityName', value: 'CityId' };
    onCountryChange() {
        // query the data source based on country DropDownList selected value
        this.stateObj.query = new Query().where('CountryId', 'equal', this.countryObj.value);
        // enable the state DropDownList
        this.stateObj.enabled = true;
        // clear the existing selection.
        this.stateObj.text = null;
        // bind the property changes to state DropDownList
        this.stateObj.dataBind();
        // clear the existing selection in city DropDownList
        this.cityObj.text = null;
        // disable the city DropDownList
        this.cityObj.enabled = false;
        // bind the property change to City DropDownList
        this.cityObj.dataBind();
    }
    onStateChange() {
        // query the data source based on state DropDownList selected value
        this.cityObj.query = new Query().where('StateId', 'equal', this.stateObj.value);
        // enable the city DropDownList
        this.cityObj.enabled = true;
        // clear the existing selection
        this.cityObj.text = null;
        // bind the property change to city DropDownList
        this.cityObj.dataBind();
    }
    render() {
        return (<div>
                {/* specifies the tag for render the country DropDownList component */}
                <DropDownListComponent id="country-ddl" ref={(scope) => { this.countryObj = scope; }} fields={this.countryField} dataSource={this.countryData} placeholder='Select a country' change={this.onCountryChange = this.onCountryChange.bind(this)}/>
                <br />

                 {/* specifies the tag for render the state DropDownList component */}
                 <DropDownListComponent id="state-ddl" ref={(scope) => { this.stateObj = scope; }} enabled={false} fields={this.stateField} dataSource={this.stateData} placeholder='Select a state' change={this.onStateChange = this.onStateChange.bind(this)}/>
                <br />

                 {/* specifies the tag for render the city DropDownList component */}
                 <DropDownListComponent id="city-ddl" ref={(scope) => { this.cityObj = scope; }} enabled={false} fields={this.cityField} dataSource={this.cityData} placeholder='Select a city'/>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

```

--------------------------------

### Initialize Remix Project Configuration

Source: https://ej2.syncfusion.com/react/documentation/getting-started/react-remix-app

This interactive prompt guides you through setting up your Remix project, including directory, Git initialization, and dependency installation.

```bash
dir  :: Where should we create your new project?
        quick-start

        ◼  Using basic template See https://remix.run/guides/templates for more
        ✔  Template copied

git  :: Initialize a new git repository?
        No

deps :: Install dependencies with npm?
        Yes

```

--------------------------------

### beforePrint Event

Source: https://ej2.syncfusion.com/react/documentation/api/bullet-chart

Triggers before the prints gets started.

```APIDOC
## beforePrint

### Description
Triggers before the prints gets started.

### Event Type
EmitType<IPrintEventArgs>
```

--------------------------------

### Create Express Server and Install Packages

Source: https://ej2.syncfusion.com/react/documentation/grid/connecting-to-backends/express-js-server

Initialize an Express.js server and install necessary packages like express, body-parser, and typescript.

```bash
npm init -y
npm install express body-parser typescript --save
npm install @types/express @types/body-parser --save-dev
```

--------------------------------

### TreeGrid with Minimal Column Configuration

Source: https://ej2.syncfusion.com/react/documentation/treegrid/columns/headers

A basic TreeGrid setup with only the essential columns defined.

```javascript
<ColumnDirective field='id' headerText='ID'/>
<ColumnDirective field='name' headerText='Name'/>
```

--------------------------------

### Basic Dialog Editing Setup

Source: https://ej2.syncfusion.com/react/documentation/treegrid/editing/dialog-editing

This snippet shows the fundamental setup for enabling dialog editing in a TreeGrid. It includes the necessary component imports and configuration for the edit settings.

```javascript
import * as React from 'react';
import {
  GridComponent,
  ColumnsDirective,
  ColumnDirective,
  Edit,
  Inject,
} from '@syncfusion/ej2-react-grids';
import { customersData } from './data';

const App = () => {
  return (
    <div className='control-pane'>
      <div className='control-section'>
        <GridComponent
          id='dialoggrid'
          dataSource={customersData}
          allowPaging={true}
          allowSorting={true}
          editSettings={{ allowEditing: true, allowDeleting: true, mode: 'Dialog' }}
          pageSettings={{ pageCount: 5 }}
        >
          <ColumnsDirective>
            <ColumnDirective
              field='OrderID'
              headerText='Order ID'
              width='120'
              textAlign='Right'
              isPrimaryKey={true}
            />
            <ColumnDirective
              field='CustomerID'
              headerText='Customer ID'
              width='150'
            />
            <ColumnDirective
              field='OrderDate'
              headerText='Order Date'
              width='130'
              format='yMd'
              textAlign='Right'
            />
            <ColumnDirective
              field='Freight'
              headerText='Freight'
              width='120'
              textAlign='Right'
              editType='numericedit'
              format='C2'
            />
            <ColumnDirective
              field='ShipCountry'
              headerText='Ship Country'
              width='150'
            />
          </ColumnsDirective>
          <Inject services={[Edit]} />
        </GridComponent>
      </div>
    </div>
  );
};
export default App;
```

--------------------------------

### Setting up the Flask Server

Source: https://ej2.syncfusion.com/react/documentation/grid/connecting-to-backends/flaskapi-server

This section covers the initial setup of a Flask server, including creating the server, installing necessary packages, configuring the application, and preparing sample data.

```python
from flask import Flask, jsonify, request
from flask_cors import CORS
import json

app = Flask(__name__)
CORS(app)

# Load data from sample data file
with open('data.json', 'r') as f:
    data = json.load(f)

@app.route('/api/data', methods=['GET'])
def get_data():
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)
```

```json
[
  {
    "OrderID": 10248,
    "CustomerID": "VINET",
    "EmployeeID": 5,
    "OrderDate": "1996-07-04T00:00:00.000Z",
    "ShipVia": 3,
    "Freight": 32.38,
    "ShipName": "Vins et alcools Chevalier",
    "ShipCity": "Reims",
    "ShipCountry": "France"
  },
  {
    "OrderID": 10249,
    "CustomerID": "TOMSP",
    "EmployeeID": 6,
    "OrderDate": "1996-07-05T00:00:00.000Z",
    "ShipVia": 1,
    "Freight": 11.61,
    "ShipName": "Toms Spezialitäten",
    "ShipCity": "Münster",
    "ShipCountry": "Germany"
  }
]
```

--------------------------------

### Define Project Name in Next.js Setup

Source: https://ej2.syncfusion.com/react/documentation/circular-gauge/nextjs-getting-started

During the Next.js project setup, you will be prompted to define the project name. This example shows how to set it to 'ej2-nextjs-circular-gauge'.

```bash
√ What is your project named? » ej2-nextjs-circular-gauge
```

--------------------------------

### Basic Dialog Editing Setup

Source: https://ej2.syncfusion.com/react/documentation/treegrid/editing/dialog-editing

This snippet shows the fundamental setup for enabling dialog editing in the TreeGrid. It includes the necessary configuration for the edit settings and toolbar.

```javascript
import * as React from 'react';
import {
  TreeGridComponent,
  ColumnsDirective,
  ColumnDirective,
  Edit,
  Inject,
} from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './data';

const App = () => {
  const editSettings = {
    allowEditing: true,
    allowAdding: true,
    allowDeleting: true,
    showDeleteConfirmDialog: true,
    mode: 'Dialog',
    allowRecordDeletion: true,
  };
  const toolbarOptions = {
    items: [
      'Add', 'Edit', 'Delete', 'Update', 'Cancel',
    ],
  };
  return (
    <TreeGridComponent
      dataSource={sampleData}
      id="TreeGrid"
      treeColumnIndex={1}
      editSettings={editSettings}
      toolbar={toolbarOptions}
    >
      <ColumnsDirective>
        <ColumnDirective field="id" headerText="ID" width="60" textAlign="Right" />
        <ColumnDirective field="name" headerText="Name" width="100" />
        <ColumnDirective field="duration" headerText="Duration" width="100" textAlign="Right" />
        <ColumnDirective field="rating" headerText="Rating" width="100" textAlign="Right" />
      </ColumnsDirective>
      <Inject services={[Edit]} />
    </TreeGridComponent>
  );
};
export default App;
```

--------------------------------

### Install Selected Syncfusion React Component Skills Interactively

Source: https://ej2.syncfusion.com/react/documentation/skills/component-skills

Use this command to interactively select and install specific Syncfusion React component skills. The terminal will guide you through selecting skills, agents, and installation scope.

```bash
npx skills add syncfusion/react-ui-components-skills
```

```bash
Select skills to install (space to toggle)
│  ◻ syncfusion-react-3d-chart (Implement Syncfusion React 3D Chart component from the @s...)
│  ◻ syncfusion-react-3d-circular-chart
│  ◻ syncfusion-react-accordion
│  ◻ syncfusion-react-accumulation-chart
│  ◻ syncfusion-react-ai-assistview
│  ◻ syncfusion-react-appbar
│  ◻ syncfusion-react-avatar
│  ◻ syncfusion-react-barcode
│  ◻ syncfusion-react-blockeditor
|  .....
```

```bash
│  ── Additional agents ─────────────────────────────
│  Search:  
│  ↑↓ move, space select, enter confirm
│
│ ❯ ○ Augment (.augment/skills)
│   ○ Claude Code (.claude/skills)
│   ○ OpenClaw (skills)
│   ○ CodeBuddy (.codebuddy/skills)
│   ○ Command Code (.commandcode/skills)
│   ○ Continue (.continue/skills)
│   ○ Cortex Code (.cortex/skills)
│   ○ Crush (.crush/skills)
|   ....

```

```bash
◆  Installation scope
│  ● Project (Install in current directory (committed with your project))
│  ○ Global

◆  Proceed with installation?
│  ● Yes / ○ No
```

--------------------------------

### Configure Application Entry Point

Source: https://ej2.syncfusion.com/react/documentation/grid/connecting-to-backends/fastapi-server

Sets up the main application entry point, including creating the database tables if they don't exist.

```python
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from sqlalchemy import create_engine, Column, Integer, String
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import sessionmaker

DATABASE_URL = "sqlite:///./test.db"

engine = create_engine(DATABASE_URL)
SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)

Base = declarative_base()

class Item(Base):
    __tablename__ = "items"

    id = Column(Integer, primary_key=True, index=True)
    name = Column(String, index=True)
    price = Column(Integer, index=True)
    quantity = Column(Integer, index=True)

Base.metadata.create_all(bind=engine)

app = FastAPI()

origins = [
    "http://localhost:3000",
    "http://localhost:8080",
    "http://localhost:4200",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
def main():
    return {"message": "Hello World"}
```

--------------------------------

### Basic Dialog Editing Setup

Source: https://ej2.syncfusion.com/react/documentation/treegrid/editing/dialog-editing

Initializes the TreeGrid with dialog editing enabled. Requires the `editSettings` and `toolbar` modules.

```javascript
import * as React from 'react';
import { TreeGrid, Page, Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';

const App = () => {
  let treegrid;
  const data = [
    { id: 1, name: 'Parent 1', code: 'P1', expanded: true },
    { id: 11, name: 'Child 1.1', code: 'C1.1', parentId: 1 },
    { id: 12, name: 'Child 1.2', code: 'C1.2', parentId: 1 },
    { id: 2, name: 'Parent 2', code: 'P2' },
    { id: 21, name: 'Child 2.1', code: 'C2.1', parentId: 2 },
    { id: 22, name: 'Child 2.2', code: 'C2.2', parentId: 2 },
  ];
  const editSettings = {
    allowEditing: true,
    allowAdding: true,
    allowDeleting: true,
    mode: 'Dialog',
    showDeleteConfirmDialog: true,
  };
  const toolbar = [
    'Add',
    'Edit',
    'Delete',
    'Update',
    'Cancel',
  ];
  return (
    <TreeGrid
      ref={ref => (treegrid = ref)}
      dataSource={data}
      idMapping= "id"
      parentIdMapping= "parentId"
      editSettings={editSettings}
      toolbar={toolbar}
      allowPaging={true}
    >
      <ColumnsDirective>
        <ColumnDirective field="id" headerText="ID" width="60" textAlign="Right" isPrimaryKey={true} />
        <ColumnDirective field="name" headerText="Name" width="150" />
        <ColumnDirective field="code" headerText="Code" width="100" />
      </ColumnsDirective>
      <Inject services={[Page, Edit, Toolbar]} />
    </TreeGrid>
  );
};
export default App;
```

--------------------------------

### getDoubleRange

Source: https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DSeries

Gets a range of values between the specified start and end points.

```APIDOC
## getDoubleRange

### Description
Gets a range of values between the specified start and end points. This method returns a Chart3DRangeValues object representing the range of values between the given start and end points.

### Parameters
#### Path Parameters
- **start** (number) - Required - The starting point of the range.
- **end** (number) - Required - The ending point of the range.

### Returns
Chart3DRangeValues
```

--------------------------------

### Initialize package.json and Install React

Source: https://ej2.syncfusion.com/react/documentation/getting-started/webpack-externals

Initialize a new Node.js project by creating a package.json file and then install the core React and ReactDOM libraries.

```bash
npm init -y

npm install react@18.2.0 react-dom@18.2.0
```

--------------------------------

### Complex Header Grouping Example

Source: https://ej2.syncfusion.com/react/documentation/treegrid/columns/headers

Demonstrates a multi-level header grouping structure for complex data hierarchies.

```javascript
const headerTexts = [
    { text: 'Identification', isGroupHeader: true, columns: [
        { text: 'Employee Code', width: 150 },
        { text: 'Employee Name', width: 180 }
    ] },
    { text: 'Job Information', isGroupHeader: true, columns: [
        { text: 'Designation', width: 150 },
        { text: 'Date of Joining', width: 180, textAlign: 'Right' }
    ] },
    { text: 'Performance Index', width: 180, textAlign: 'Right' }
];
```

--------------------------------

### Video Quick Toolbar Configuration with Imports

Source: https://ej2.syncfusion.com/react/documentation/rich-text-editor/toolbar/quick-toolbar

This example shows the complete React component setup for the Rich Text Editor, including necessary imports and the configuration for the video quick toolbar. It ensures all required services are injected for full functionality.

```typescript
import { HtmlEditor, Image, Inject, Link, QuickToolbar, Video, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
  let toolbarSettings: object = {
    items: ['Video']
  }
  let rteValue:string = "<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

  let quickToolbarSettings: object = {
      showOnRightClick: true,
      video: ['VideoReplace', 'VideoAlign', 'VideoRemove', 'VideoLayoutOption', 'VideoDimension']
  }

  return (
    <RichTextEditorComponent height={450} value={rteValue} toolbarSettings={toolbarSettings} quickToolbarSettings={quickToolbarSettings}>
      <Inject services={[Toolbar, Image, Link, Video, HtmlEditor, QuickToolbar]} />
    </RichTextEditorComponent>
  );
}

export default App;
```

--------------------------------

### Gantt Component Setup with Resource Data (JavaScript)

Source: https://ej2.syncfusion.com/react/documentation/gantt/resources

Configure the Gantt component with task fields, resource fields, and a list of resources. This example demonstrates a standard JavaScript setup.

```javascript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Selection } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {

    const taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        endDate: 'EndDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        resourceInfo: 'resources',
        parentID: 'ParentID'
    };

    const labelSettings = {
        leftLabel: 'TaskName',
        rightLabel: 'resources'
    };

    const resourceFields = {
        id: 'resourceId',
        name: 'resourceName',
        unit: 'Unit'
    };

    const columns = [
        { field: 'TaskID', visible: false },
        { field: 'TaskName', headerText: 'Task Name', width: '180' },
        { field: 'resources', headerText: 'Resources', width: '160' },
        { field: 'Duration', width: '100' }
    ];

    const projectStartDate = new Date('03/25/2019');
    const projectEndDate = new Date('07/28/2019');

    const resources = [
        { resourceId: 1, resourceName: 'Martin Tamer' },
        { resourceId: 2, resourceName: 'Rose Fuller' },
        { resourceId: 3, resourceName: 'Margaret Buchanan' },
        { resourceId: 4, resourceName: 'Fuller King' },
        { resourceId: 5, resourceName: 'Davolio Fuller' },
        { resourceId: 6, resourceName: 'Van Jack' },
        { resourceId: 7, resourceName: 'Fuller Buchanan' },
        { resourceId: 8, resourceName: 'Jack Davolio' },
        { resourceId: 9, resourceName: 'Tamer Vinet' },
        { resourceId: 10, resourceName: 'Vinet Fuller' },
        { resourceId: 11, resourceName: 'Bergs Anton' },
        { resourceId: 12, resourceName: 'Construction Supervisor' }
    ];

    return (
        <GanttComponent
            height="430px"
            dataSource={data}
            taskFields={taskFields}
            treeColumnIndex={1}
            projectStartDate={projectStartDate}
            projectEndDate={projectEndDate}
            labelSettings={labelSettings}
            resourceFields={resourceFields}
            resources={resources}
            columns={columns}
        >
            <Inject services={[Selection]} />
        </GanttComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### Basic DateRangePicker Initialization

Source: https://ej2.syncfusion.com/react/documentation/api/daterangepicker/index-default

A basic example of how to initialize the DateRangePickerComponent with start and end dates.

```html
<DateRangePickerComponent startDate={date} endDate={date}></DateRangePickerComponent>
```

--------------------------------

### Start Development Server

Source: https://ej2.syncfusion.com/react/documentation/appbar/getting-started

Command to run the development server.

```bash
npm run dev
```

--------------------------------

### Basic PDF Export Configuration

Source: https://ej2.syncfusion.com/react/documentation/treegrid/pdf-export/pdf-export-options

Demonstrates the fundamental setup for enabling PDF export in the TreeGrid. Ensure the 'pdfExport' module is imported.

```javascript
import * as React from 'react';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, PdfExport } from '@syncfusion/ej2-react-treegrid';

function App() {
  let treegrid;
  const toolbarClick = (args) => {
    if (args.item.id === 'PdfExport') {
      treegrid.pdfExport();
    }
  };
  return (
    <div>
      <TreeGridComponent ref={tgrid => treegrid = tgrid} toolbar={['PdfExport']} allowPaging={true} >
        <ColumnsDirective>
          <ColumnDirective field='ID' headerText='ID' width='60' textAlign='Right'/>
          <ColumnDirective field='Name' headerText='Name' width='100'/>
          <ColumnDirective field='Size' headerText='Size' width='80' textAlign='Right'/>
          <ColumnDirective field='Date' headerText='Date' width='100' format='yMd' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[PdfExport]}/>
      </TreeGridComponent>
    </div>
  );
}
export default App;
```

--------------------------------

### TypeScript Setup for Scheduler Localization

Source: https://ej2.syncfusion.com/react/documentation/schedule/localization

This TypeScript example shows the setup for localizing the Syncfusion React Schedule component. It includes type definitions for AJAX responses and locale data loading.

```typescript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, Day, Week, WorkWeek, Month, Inject,
  ViewsDirective, ViewDirective, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { Ajax, L10n, loadCldr } from '@syncfusion/ej2-base';
import frNumberData from '@syncfusion/ej2-cldr-data/main/fr-CH/numbers.json';
import frtimeZoneData from '@syncfusion/ej2-cldr-data/main/fr-CH/timeZoneNames.json';
import frGregorian from '@syncfusion/ej2-cldr-data/main/fr-CH/ca-gregorian.json';
import frNumberingSystem from '@syncfusion/ej2-cldr-data/supplemental/numberingSystems.json';
loadCldr(frNumberData, frtimeZoneData, frGregorian, frNumberingSystem);

let localeTexts: string;
let ajax: Ajax = new Ajax('./locale.json', 'GET', false);
ajax.onSuccess = (value: string) => {
  localeTexts = value;
};
ajax.send();
L10n.load(JSON.parse(localeTexts));
```

--------------------------------

### Start the Flask Backend Server

Source: https://ej2.syncfusion.com/react/documentation/grid/connecting-to-backends/flaskapi-server

Instructions to start the Flask backend server from the command line.

```bash
python app.py
```

--------------------------------

### React Grid with WebMethodAdaptor Setup

Source: https://ej2.syncfusion.com/react/documentation/grid/connecting-to-adaptors/web-method-adaptor

This code demonstrates the basic setup of a React Grid component utilizing the WebMethodAdaptor. Ensure you have installed the necessary Syncfusion packages and added the CSS styles.

```jsx
import * as React from 'react';
import {
  GridComponent,
  ColumnsDirective,
  ColumnDirective,
  Page,
  Inject,
} from '@syncfusion/ej2-react-grids';
import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data';

const App = () => {
  const data = new DataManager({
    url: '/api/Employees',
    adaptor: WebMethodAdaptor,
  });

  return (
    <GridComponent dataSource={data} allowPaging={true}>
      <ColumnsDirective>
        <ColumnDirective field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right" />
        <ColumnDirective field="FirstName" headerText="First Name" width="150" />
        <ColumnDirective field="LastName" headerText="Last Name" width="150" />
        <ColumnDirective field="City" headerText="City" width="130" />
        <ColumnDirective field="Country" headerText="Country" width="150" />
      </ColumnsDirective>
      <Inject services={[Page]} />
    </GridComponent>
  );
};

export default App;
```

--------------------------------

### Start development server

Source: https://ej2.syncfusion.com/react/documentation/3d-chart

Run the development server to compile and serve the React application locally.

```bash
npm run dev

```

--------------------------------

### Create React Application

Source: https://ej2.syncfusion.com/react/documentation/circular-gauge/getting-started

Commands to initialize a new React project and navigate to its directory.

```bash
create-react-app quickstart
```

```bash
cd quickstart
```