diff --git a/ej2-react/dialog/summary.md b/ej2-react/dialog/summary.md
deleted file mode 100644
index 22c6caf94d..0000000000
--- a/ej2-react/dialog/summary.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: post
-title: Summary in React Dialog component | Syncfusion
-description: Learn here all about Summary in Syncfusion React Dialog component of Syncfusion Essential JS 2 and more.
-control: Summary
-platform: ej2-react
-documentation: ug
-domainurl: ##DomainURL##
----
-
-* [Getting Started](dialog/getting-started.md)
-* [Getting Started using functional component](dialog/getting-started-functional.md)
-* [Templates](dialog/template.md)
-* [Animation](dialog/animation.md)
-* [Resizing](dialog/resize.md)
-* [Localization](dialog/localization.md)
-* [Accessibility](dialog/accessibility.md)
-* [Style and appearance](dialog/style.md)
-* [Create nested Dialog](dialog/how-to/create-nested-dialog.md)
-* [Position the Dialog in center of the page on scrolling](dialog/how-to/position-the-dialog-on-center-of-the-page-on-scrolling.md)
-* [Load Dialog content using AJAX](dialog/how-to/load-dialog-content-using-ajax.md)
-* [Render a Dialog without header](dialog/how-to/render-a-dialog-without-header.md)
-* [Show Dialog with fullscreen](dialog/how-to/show-dialog-with-full-screen.md)
-* [Display a Dialog with custom position](dialog/how-to/display-a-dialog-with-custom-position.md)
-* [Prevent closing of modal Dialog](dialog/how-to/prevent-closing-of-modal-dialog.md)
-* [Prevent focus on the first element](dialog/how-to/prevent-the-focus-on-the-first-element.md)
-* [Prevent opening of the dialog](dialog/how-to/prevent-opening-of-the-dialog.md)
-* [Read all values from dialog on button click](dialog/how-to/read-all-the-values-from-dialog-on-button-click.md)
-* [Customize the Dialog appearance](dialog/how-to/customize-the-dialog-appearance.md)
-* [Close Dialog when click outside of its region](dialog/how-to/close-dialog-while-click-on-outside-of-dialog.md)
-* [Add icons to Dialog buttons](dialog/how-to/add-an-icons-to-dialog-buttons.md)
-* [Add minimize and maximize buttons to Dialog header](dialog/how-to/add-a-minimize-maximize-buttons.md)
-* [Setting maxHeight to the Dialog](dialog/how-to/setting-max-height-to-the-dialog.md)
-* [React hooks with Dialog](dialog/how-to/react-hooks-dialog.md)
-* [Migration from Essential JS 1](dialog/ej1-api-migration.md)
\ No newline at end of file
diff --git a/ej2-react/drop-down-button/getting-started.md b/ej2-react/drop-down-button/getting-started.md
index 2188c46baa..0f59e32d4f 100644
--- a/ej2-react/drop-down-button/getting-started.md
+++ b/ej2-react/drop-down-button/getting-started.md
@@ -84,7 +84,7 @@ enableRipple(true);
function App() {
return (
-
);
diff --git a/ej2-react/linear-gauge/getting-started.md b/ej2-react/linear-gauge/getting-started.md
index 6c054a5fa9..a788b79f60 100644
--- a/ej2-react/linear-gauge/getting-started.md
+++ b/ej2-react/linear-gauge/getting-started.md
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
# Getting Started with React Linear Gauge
-
+This section explains the steps required to create a simple React Linear Gauge component and demonstrate its basic usage in a React environment.
-This section explains the steps required to create a Linear Gauge and demonstrates the basic usage of the Linear Gauge component.
+> Ready to streamline your Syncfusion® React development? Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistant/overview).
-You can explore some useful features in the Linear Gauge component using the following video.
+To get started quickly with React Linear Gauge, you can watch this video:
{% youtube "https://www.youtube.com/watch?v=PTBeKSNHp1k" %}
@@ -22,7 +22,7 @@ You can explore some useful features in the Linear Gauge component using the fol
Following is the list of minimum dependencies required to use the Linear Gauge.
-```javascript
+```
+-- @syncfusion/ej2-react-lineargauge
|-- @syncfusion/ej2-lineargauge
|-- @syncfusion/ej2-base
@@ -31,9 +31,9 @@ Following is the list of minimum dependencies required to use the Linear Gauge.
|-- @syncfusion/ej2-react-base
```
-## Installation and configuration
+## Setup for local development
-To set up a React application quickly, use Vite (`npm create vite@latest`), which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools such as `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite supports both JavaScript and TypeScript templates and optimizes the application for production.
+Easily set up a React application using `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
@@ -42,14 +42,18 @@ To create a new React application, run the following command.
```bash
npm create vite@latest my-app
```
-To set up a React application in a TypeScript environment, run the following command.
+
+This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
+
+To set up a React application in TypeScript environment, run the following command.
```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev
```
-To set up a React application in a JavaScript environment, run the following command.
+
+To set up a React application in JavaScript environment, run the following command.
```bash
npm create vite@latest my-app -- --template react
@@ -57,70 +61,59 @@ cd my-app
npm run dev
```
-### Adding Syncfusion® packages
+## Adding Syncfusion® React Linear Gauge packages
-All the available Essential® JS 2 packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install Linear Gauge package, use the following command.
+All the available Essential® JS 2 packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install the Linear Gauge component, use the following command.
```
npm install @syncfusion/ej2-react-lineargauge --save
```
-### Adding Linear Gauge component to the Project
+> The –save will instruct NPM to include the Linear Gauge package inside of the dependencies section of the package.json.
+
+## Adding Linear Gauge component
+
+The React Linear Gauge component can be added to the application by following these steps. To get started, add the Linear Gauge component to the **src/App.tsx** file using the following code.
-Now, the Linear Gauge component can be added in the application. To initialize the Linear Gauge control in the React application, import the Linear Gauge control in the **src/App.js** or **src/App.tsx** as per the application. Please use the below code to include the Linear Gauge component in the application.
+The following Linear Gauge code should be placed in the **src/App.tsx** file.
-```ts
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
-import React from 'react';
import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
+import * as React from 'react';
-export function App() {
- return ();
+function App() {
+ return
}
-
export default App;
-```
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
-### Run the application
+import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
+import * as React from 'react';
-Run the `npm run dev` command in the console to start the development server. This command compiles and serves the application locally; the browser may open automatically depending on the development server configuration.
+function App() {
+ return
+}
+export default App;
-```
-npm run dev
-```
+{% endhighlight %}
+{% endtabs %}
## Module Injection
-Linear Gauge component are segregated into individual feature-wise modules. In order to use a particular feature,
-inject its feature service in the **AppModule**. Please find the feature service name and description as follows.
-
-* `Annotations` - Inject this module in to `services` to use annotation feature.
-* `GaugeTooltip` - Inject this module in to `services` to use tooltip feature.
-
-These modules should be injected into the `services` section as follows,
-
-
+React Linear Gauge component features are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the App. The annotation and tooltip features of the Linear Gauge are used in the current application. The relevant feature service names and descriptions are listed below.
- ```ts
- import * as React from "react";
- import * as ReactDOM from "react-dom";
- import { LinearGaugeComponent, Annotations, GaugeTooltip, Inject } from '@syncfusion/ej2-react-lineargauge';
+* `Annotations` - Inject this module to use annotation feature.
+* `GaugeTooltip` - Inject this module to use tooltip feature.
- export function App(){
- return(
-
-
- );
- }
- const root = ReactDOM.createRoot(document.getElementById('container'));
- root.render();
-
- ```
+These modules should be injected into the Linear Gauge using the Inject directive.
## Adding the Linear Gauge Title
-The title can be added to the Linear Gauge component using the [`title`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/linearGaugeModel#title-string) property in the Linear Gauge.
+The title can be added to the Linear Gauge component using the [`title`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/linearGaugeModel#title-string) property in the Linear Gauge. Enable the title by setting the `title` property to display a meaningful heading for the gauge.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -133,9 +126,9 @@ The title can be added to the Linear Gauge component using the [`title`](https:/
{% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs1" %}
-## Axis Range
+## Setting the Axis Range
-The range of the axis can be set using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/axis#minimum-number) and [`maximum`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/axis#maximum-number) properties in the Linear Gauge.
+The range of the axis can be set using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/axis#minimum-number) and [`maximum`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/axis#maximum-number) properties in the Linear Gauge. This defines the start and end values that will be displayed on the gauge axis.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -148,6 +141,8 @@ The range of the axis can be set using the [`minimum`](https://ej2.syncfusion.co
{% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs2" %}
+## Customizing Axis Labels
+
To denote the axis values with temperature units, add the °C as suffix to each label. This can be achieved by setting the **{value}°C** to the [`format`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/labelModel#format-string) property in the [`labelStyle`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/axis#labelstyle-labelmodel) object of the axis. Here, **{value}** acts as a placeholder for each axis label.
To change the pointer value from the default value of the gauge, set the [`value`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/pointer#value-number) property in [`pointers`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/pointerModel) object of the axis.
@@ -163,9 +158,9 @@ To change the pointer value from the default value of the gauge, set the [`value
{% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs3" %}
-## Setting the value of the pointer
+## Setting the Pointer Value
-The pointer value is changed in the below sample using the [`value`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/pointer#value-number) property in [`pointers`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/pointer) object of the axis.
+The pointer value is changed in the below sample using the [`value`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/pointer#value-number) property in [`pointers`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/pointer) object of the axis. The pointer can be customized with different colors using the `color` property to make it visually distinct.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -177,4 +172,34 @@ The pointer value is changed in the below sample using the [`value`](https://ej2
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs4" %}
+
+## Run the application
+
+Run the `npm run dev` command in the terminal to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
+
+```
+npm run dev
+```
+
+The output appears as follows.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/linear-gauge/getting-started-cs4/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/linear-gauge/getting-started-cs4/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs4" %}
+
+> Refer to the [React Linear Gauge](https://www.syncfusion.com/react-components/react-linear-gauge) feature tour page for its groundbreaking feature representations. You can also explore our [React Linear Gauge Component example](https://ej2.syncfusion.com/react/demos/#/material3/linear-gauge/default) that shows how to render the Linear Gauge in React.
+
+## See Also
+
+* [Linear Gauge Axis Customization](./axis)
+* [Linear Gauge Pointers](./pointers)
+* [Linear Gauge Ranges](./ranges)
+* [Linear Gauge Annotations](./annotations)
\ No newline at end of file
diff --git a/ej2-react/maps/getting-started.md b/ej2-react/maps/getting-started.md
index 020e59a809..3e4b41b099 100644
--- a/ej2-react/maps/getting-started.md
+++ b/ej2-react/maps/getting-started.md
@@ -1,7 +1,7 @@
---
layout: post
title: Getting started with React Maps component | Syncfusion
-description: Checkout and learn about Getting started with React Maps component of Syncfusion Essential JS 2 and more details.
+description: Check out and learn about Getting started with React Maps component of Syncfusion Essential JS 2 and more details.
control: Getting started
platform: ej2-react
documentation: ug
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Getting Started with React Maps Library component
-This section explains the steps required to create a map and demonstrates the basic usage of the maps component.
+This section explains the steps required to create a map and demonstrates the basic usage of the Maps component.
You can explore some useful features in the Maps component using the following video.
@@ -20,7 +20,7 @@ You can explore some useful features in the Maps component using the following v
Below is the list of minimum dependencies required to use the Maps.
-```javascript
+```
|-- @syncfusion/ej2-react-maps
|-- @syncfusion/ej2-maps
|-- @syncfusion/ej2-base
@@ -32,23 +32,27 @@ Below is the list of minimum dependencies required to use the Maps.
## Installation and Configuration
-To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
+To easily set up a React application, use the Vite CLI (`npm create vite`), which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
-> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
+> **Note:** To create a React application using `create-react-app` instead, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
To create a new React application, run the following command.
```bash
npm create vite@latest my-app
```
-To set-up a React application in TypeScript environment, run the following command.
+This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
+
+
+
+To set up a React application in a TypeScript environment, run the following command.
```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev
```
-To set-up a React application in JavaScript environment, run the following command.
+To set up a React application in a JavaScript environment, run the following command.
```bash
npm create vite@latest my-app -- --template react
@@ -56,43 +60,49 @@ cd my-app
npm run dev
```
-
### Adding Syncfusion® packages
-All the available Essential® JS 2 packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install Maps package, use the following command.
+All the available Essential® JS 2 packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry.
+To install the Syncfusion® Maps package, use the following command.
-```
+```bash
npm install @syncfusion/ej2-react-maps --save
```
+> The --save will instruct NPM to include the Maps package inside the dependencies section of the package.json.
+
+
### Add Map to the Project
-Now, the Maps component can be added in the application. To initialize the Maps component in the React application, import the **MapsComponent** into the **src/App.js**. If you are using TypeScript, you can import the **MapsComponent** into the **src/App.tsx**. You can choose the appropriate option based on your application. In the following code, the **MapsComponent** is included in the **src/App.js** file.
+Now, the Maps component can be added to the application. To initialize the Maps component in the React application, import the **MapsComponent** into **src/App.js**. If you are using TypeScript, you can import the **MapsComponent** into **src/App.tsx**. You can choose the appropriate option based on your application. In the following code, the **MapsComponent** is included in the **src/App.js** file.
+
+> **Note:** Before running this code, download the `world_map.ts` file from the link provided below and place it in your project's src folder.
```ts
- import { world_map } from './world_map.ts';
- import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
-
- function App() {
- return (
-
+ );
+}
+
+export default App;
```
-> Refer to the `world_map` dataset here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1557035892
+> **Note:** Refer to the `world_map` dataset here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1557035892
### 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.
+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.
```bash
npm run dev
@@ -100,7 +110,7 @@ npm run dev
## Module Injection
-The Maps component is divided into feature-specific modules. To use a feature, inject its module with the `Inject` method. The available modules and their purposes are:
+The Maps component is divided into feature-specific modules. To use a feature, inject its module with the `Inject` method. You only need to inject the modules for features you are actually using in your application. The available modules and their purposes are:
* Annotations - Inject this provider to use annotations feature.
* Bubble - Inject this provider to use bubble feature.
@@ -121,36 +131,49 @@ For example, to use the tooltip, data label, and legend features, import the cor
import * as React from 'react';
import { MapsComponent, Inject, DataLabel, Legend, MapsTooltip } from '@syncfusion/ej2-react-maps';
-export function App() {
- return (
-
- );
- }
+export function App() {
+ return (
+
+
+
+ );
+}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render();
-
```
## Render shapes from GeoJSON data
-This section shows how to bind GeoJSON data to a layer.
-
- ```ts
+This section shows how to bind GeoJSON data to a layer. The following example demonstrates the structure of GeoJSON data:
- let usMap: Object =
- {
- "type": "FeatureCollection",
- "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
- "features": [
- { "type": "Feature", "properties": { "iso_3166_2": "MA", "name": "Massachusetts", "admin": "United States of America" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -70.801756294617277, 41.248076234530558 ]] ] ] }
- }
- ]
- };
-
- ```
+```ts
+let usMap: Object = {
+ "type": "FeatureCollection",
+ "crs": {
+ "type": "name",
+ "properties": {
+ "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
+ }
+ },
+ "features": [
+ {
+ "type": "Feature",
+ "properties": {
+ "iso_3166_2": "MA",
+ "name": "Massachusetts",
+ "admin": "United States of America"
+ },
+ "geometry": {
+ "type": "MultiPolygon",
+ "coordinates": [ [ [ [ -70.801756294617277, 41.248076234530558 ] ] ] ]
+ }
+ }
+ ]
+};
+```
-Map elements are rendered within layers. Add a layer collection to the Maps using the [`layers`](../api/maps#layers) property, then bind the GeoJSON data to the [`shapeData`](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#shapedata) property.
+Map elements are rendered within layers. Add a layer collection to the Maps using the [`layers`](https://ej2.syncfusion.com/react/documentation/api/maps#layers) property, then bind the GeoJSON data to the [`shapeData`](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#shapedata) property. While the above example shows a US map structure, the following code demonstrates rendering with world map data.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -171,11 +194,11 @@ The following layer properties are used to bind a data source to the map:
* [shapeDataPath](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#shapedatapath)
* [shapePropertyPath](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#shapepropertypath)
-The `dataSource` property takes collection value as input. For example, the list of objects can be provided as input. This data is further used in tooltip, data label, bubble, legend and in color mapping.
+The `dataSource` property takes a collection value as input. For example, a list of objects can be provided as input. This data is further used in tooltip, data label, bubble, legend and in color mapping.
The [shapeDataPath](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#shapedatapath) property refers to the field in the [dataSource](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#datasource) that identifies a shape. The [shapePropertyPath](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#shapepropertypath) property refers to the field in `shapeData` that matches [shapeDataPath](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#shapedatapath). When these values match, the corresponding object from the [dataSource](https://ej2.syncfusion.com/react/documentation/api/maps/layerSettingsModel#datasource) is bound to the shape.
-The JSON object "electionData" is used as data source below.
+The JSON object "uncountries" is used as data source below.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -188,14 +211,14 @@ The JSON object "electionData" is used as data source below.
{% previewsample "page.domainurl/code-snippet/maps/default-map-cs34" %}
->Note: Refer the value of the data source of [`world-map.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1260719407) and [`data.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/data445116385) here.
+>**Note:** Refer to the value of the data source [`world-map.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1260719407) and [`data.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/data445116385) here.
## Apply Color Mapping
-The Color Mapping feature supports customization of shape colors based on the underlying value of shape received from bounded data.
+The Color Mapping feature supports customization of shape colors based on the underlying value of shape received from the bound data.
Specify the field name from which the values have to be compared for the shapes in [`colorValuePath`](https://ej2.syncfusion.com/react/documentation/api/maps/shapeSettingsModel#colorvaluepath) property in [`shapeSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/shapeSettingsModel).
-Specify color and value in [`colorValuePath`](https://ej2.syncfusion.com/react/documentation/api/maps/shapeSettingsModel#colorvaluepath) property. Here '#D84444' is specified for 'Trump' and '#316DB5' is specified for 'Clinton'.
+Specify color and value in [`colorMapping`](https://ej2.syncfusion.com/react/documentation/api/maps/colorMappingSettingsModel) property. Here '#D84444' is specified for 'Permanent' and '#316DB5' is specified for 'Non-Permanent' membership types.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -208,12 +231,11 @@ Specify color and value in [`colorValuePath`](https://ej2.syncfusion.com/react/d
{% previewsample "page.domainurl/code-snippet/maps/default-map-cs35" %}
-> Note: Refer the value of the data source of [`world-map.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1260719407) and [`data.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/data445116385) here.
+>**Note:** Refer to the value of the data source [`world-map.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1260719407) and [`data.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/data445116385) here.
## Add Title for Maps
-You can add a title using [`titleSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/titleSettingsModel) property to the map to provide quick
-information to the user about the shapes rendered in the map.
+You can add a title using [`titleSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/titleSettingsModel) property to the map to provide quick information to the user about the shapes rendered in the map.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -226,12 +248,11 @@ information to the user about the shapes rendered in the map.
{% previewsample "page.domainurl/code-snippet/maps/default-map-cs36" %}
-> Note: Refer the value of the data source of [`world-map.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1260719407) and [`data.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/data445116385) here.
+>**Note:** Refer to the value of the data source [`world-map.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1260719407) and [`data.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/data445116385) here.
## Enable Legend
-You can show legend for the maps by setting true to the [`visible`](https://ej2.syncfusion.com/react/documentation/api/maps/legendSettingsModel#visible)property in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/legendSettingsModel) object and by injecting the `Legend`
-service using `Inject` tag.
+You can show a legend for the maps by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/maps/legendSettingsModel#visible) property as `true` in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/legendSettingsModel) object and by injecting the `Legend` service using `Inject` tag.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -244,12 +265,11 @@ service using `Inject` tag.
{% previewsample "page.domainurl/code-snippet/maps/default-map-cs37" %}
-> Note: Refer the value of the data source of [`world-map.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1260719407) and [`data.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/data445116385) here.
+>**Note:** Refer to the value of the data source [`world-map.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1260719407) and [`data.ts`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/data445116385) here.
## Add Data Label
-You can add data labels to show additional information of the shapes in map. This can be achieved by
-setting [`visible`](https://ej2.syncfusion.com/react/documentation/api/maps/dataLabelSettingsModel#visible) property to true in the [`dataLabelSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/dataLabelSettingsModel) object and by injecting `DataLabel` service using `Inject` tag.
+You can add data labels to show additional information of the shapes in the map. This can be achieved by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/maps/dataLabelSettingsModel#visible) property to `true` in the [`dataLabelSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/dataLabelSettingsModel) object and by injecting the `DataLabel` service using `Inject` tag.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -265,7 +285,7 @@ setting [`visible`](https://ej2.syncfusion.com/react/documentation/api/maps/data
## Enable Tooltip
The tooltip is useful when you cannot display information by using the data labels due to space constraints.
-You can enable tooltip by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/maps/tooltipSettingsModel#visible) property as true in [`tooltipSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/tooltipSettingsModel) object and by injecting `MapsTooltip` service using `Inject` tag.
+You can enable tooltip by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/maps/tooltipSettingsModel#visible) property to `true` in [`tooltipSettings`](https://ej2.syncfusion.com/react/documentation/api/maps/tooltipSettingsModel) object and by injecting `MapsTooltip` service using `Inject` tag.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
diff --git a/ej2-react/maps/images/Initial-setup.jpg b/ej2-react/maps/images/Initial-setup.jpg
new file mode 100644
index 0000000000..1674d00088
Binary files /dev/null and b/ej2-react/maps/images/Initial-setup.jpg differ
diff --git a/ej2-react/mention/getting-started.md b/ej2-react/mention/getting-started.md
index 7e9888c286..bed8076445 100644
--- a/ej2-react/mention/getting-started.md
+++ b/ej2-react/mention/getting-started.md
@@ -95,8 +95,8 @@ export default class App extends React.Component<{}, {}> {
@@ -205,6 +205,19 @@ function App () {
export default App;
```
+Add the following CSS to your project's stylesheet:
+
+```css
+#mentionElement {
+ min-height: 100px;
+ border: 1px solid #d7d7d7;
+ border-radius: 4px;
+ padding: 8px;
+ font-size: 14px;
+ width: 600px;
+}
+```
+
## Run the application
Run the `npm run dev` command in the terminal 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/progress-button/getting-started.md b/ej2-react/progress-button/getting-started.md
index a9cc3e061e..e5afdcbd49 100644
--- a/ej2-react/progress-button/getting-started.md
+++ b/ej2-react/progress-button/getting-started.md
@@ -80,7 +80,7 @@ import * as React from 'react';
import './App.css';
function App() {
- return (
+ return (
);
diff --git a/ej2-react/radio-button/getting-started.md b/ej2-react/radio-button/getting-started.md
index 02daf8f676..9dfe93a387 100644
--- a/ej2-react/radio-button/getting-started.md
+++ b/ej2-react/radio-button/getting-started.md
@@ -78,7 +78,7 @@ import * as React from 'react';
import './App.css';
function App() {
- return (
+ return (
);
}
diff --git a/ej2-react/schedule/django-with-mysql.md b/ej2-react/schedule/django-with-mysql.md
new file mode 100644
index 0000000000..a62b2a11e7
--- /dev/null
+++ b/ej2-react/schedule/django-with-mysql.md
@@ -0,0 +1,583 @@
+---
+layout: post
+title: React Scheduler with Django REST Framework | Syncfusion
+description: Integrate Syncfusion React Scheduler with MySQL and Django REST Framework to perform seamless CRUD operations.
+control: Schedule
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Syncfusion React Scheduler with Django REST Framework (DRF)
+
+The Syncfusion [React Scheduler](https://ej2.syncfusion.com/react/documentation/schedule/getting-started) combined with Django REST Framework and MySQL provides a robust, scalable data‑driven application architecture. The Syncfusion React Scheduler delivers a rich, high‑performance client‑side experience.
+
+**What is Django REST Framework?**
+
+[Django](https://docs.djangoproject.com/en/6.0) is a high‑level Python web framework used to build secure and scalable backend applications quickly. It includes built‑in features such as database ORM, URL routing, authentication, and security, allowing developers to focus on application logic instead of repetitive setup.
+
+[Django REST Framework (DRF)](https://www.django-rest-framework.org/) extends Django to build RESTful APIs that return data in JSON format. It simplifies creating APIs with support for serializers, authentication, and CRUD operations, making it well suited for frontend applications like React.
+
+**What is MySQL?**
+
+MySQL is an open‑source relational database management system (RDBMS) used to store and manage structured data efficiently. It enables applications to perform core database operations such as creating, reading, updating, and deleting data using SQL, making it a popular choice for web applications, enterprise systems, and backend services. MySQL is known for its reliability, performance, scalability, and ease of integration with modern programming languages and frameworks.
+
+## Prerequisites
+
+- **Node.js** LTS (v20.19.6+), npm/yarn.
+- **React** 18+ (Vite).
+- **Python** 3.11+.
+- **Django** 5.2+, **Django REST Framework**.
+- **MySQL** 5.7+.
+
+## Setting up the Django REST Framework for MySQL
+
+The Django REST Framework backend serves as the core data service, managing API requests that provide the data powering the Syncfusion React Scheduler.
+
+### Step 1: Set up the Django REST Framework server and install required packages
+
+**Instructions:**
+1. Open a terminal (for example, an integrated terminal in Visual Studio Code or Windows Command prompt opened with Win+R, or macOS Terminal launched with Cmd+Space ).
+
+2. Before creating the `Django` project, Create a folder named `backend` and set up a virtual environment. A virtual environment keeps project dependencies isolated, ensuring that package installations do not affect other projects.
+
+ The following commands create and activate the environment:
+
+ ```bash
+ mkdir backend
+ cd backend
+ python -m venv .venv
+ .venv\Scripts\activate # Mac/Linux: source .venv/bin/activate
+ ```
+3. Once the virtual environment is active, install the required packages for Django REST Framework and MySQL support:
+
+ ```bash
+ pip install django-cors-headers djangorestframework pymysql dj-database-url mysqlclient
+ ```
+ - `mysqlclient` enables `Django` to connect to MySQL using `native C` extensions.
+ - For `Django` settings reference, see [databases](https://docs.djangoproject.com/en/6.0/ref/settings/#databases).
+
+4. Initialize the `Django` project and Application:
+
+ For this guide, a `Django` project named **scheduler** is created, along with a new application module, using the following commands:
+
+ ```bash
+ python -m django startproject scheduler .
+ python manage.py startapp schedulerCrud
+ ```
+The **schedulerCrud** folder is now created. This initializes the project structure and creates the scheduler app, which will contain the models, views, and API logic for the Django REST Framework backend.
+
+### Step 2: Configure Django settings
+
+The file **scheduler/settings.py** is automatically generated when a Django project is created.
+
+This step updates the file to establish the MySQL connection and enable essential Django REST Framework features such as CORS and REST APIs.
+
+**Instructions:**
+
+1. Open the **scheduler/settings.py** file.
+2. Define the MySQL database connection:
+
+ The **DATABASES** section configure Django to connect to MySQL.
+
+ [settings.py]
+
+ ```python
+ DATABASES = {
+ "default": {
+ "ENGINE": "django.db.backends.mysql",
+ "NAME": "eventsdb",
+ "USER": "django_user",
+ "PASSWORD": "Django@123",
+ 'HOST': 'localhost', # Or an IP Address that your DB is hosted on
+ 'PORT': '3306',
+ },
+ }
+ ```
+ **Line breakdown:**
+ - **ENGINE**: Database backend; for MySQL in Django, set to `"django.db.backends.mysql"`. This tells Django to use the MySQL database engine.
+ - **NAME**: Name of the MySQL database to connect to (e.g., **eventsdb**).
+ - **USER**: MySQL database user that Django will use to authenticate (e.g., **django_user**).
+ - **PASSWORD**: Password for the specified MySQL user.
+ - **HOST**: Hostname or IP address where the MySQL server is running (commonly **localhost** for local development).
+ - **PORT**: Port number on which the MySQL server listens (default is **3306**).
+
+
+3. Add required applications:
+
+ Add the required packages to the **INSTALLED_APPS** list to enable REST APIs, CORS, and the schedulerCrud application:
+
+ [settings.py]
+
+ ```python
+ INSTALLED_APPS = [
+ 'django.contrib.admin',
+ 'django.contrib.auth',
+ 'django.contrib.contenttypes',
+ 'django.contrib.sessions',
+ 'django.contrib.messages',
+ 'django.contrib.staticfiles',
+ 'corsheaders',
+ 'rest_framework',
+ 'schedulerCrud.apps.SchedulercrudConfig'
+ ]
+ ```
+ **Purpose of key apps:**
+ - **rest_framework** - Core Django REST Framework functionality support.
+ - **corsheaders** - Cross‑origin access for frontend frameworks.
+ - **schedulerCrud** - Handles the backend logic for creating, reading, updating, and deleting scheduler-related data (events) and exposes these operations through REST APIs.
+
+
+4. Configure middleware:
+
+ Middleware processes incoming requests.
+
+ [settings.py]
+
+ ```python
+ MIDDLEWARE = [
+ 'corsheaders.middleware.CorsMiddleware',
+ 'django.middleware.security.SecurityMiddleware',
+ 'django.contrib.sessions.middleware.SessionMiddleware',
+ 'django.middleware.common.CommonMiddleware',
+ 'django.contrib.auth.middleware.AuthenticationMiddleware',
+ 'django.contrib.messages.middleware.MessageMiddleware',
+ 'django.middleware.clickjacking.XFrameOptionsMiddleware',
+ ]
+ ```
+ > Place "CORS" middleware near the top so preflight requests are handled correctly.
+
+5. Enable "CORS" for the React development server:
+
+ Add the React dev origin so the browser can call the API during development.
+
+ [settings.py]
+
+ ```python
+ CORS_ALLOWED_ORIGINS = [
+ "http://localhost:5173",
+ ]
+ ```
+ This prevents cross‑origin access errors while the frontend calls backend APIs during development.
+
+### Step 3: Define models
+
+A Django model defines the way data is stored and accessed in the database. Each model maps to a database table and exposes its fields as structured records that can be queried, created, updated, and deleted by the application and API.
+
+**Instructions:**
+1. Open the (**schedulerCrud/models.py**) file. This file contains the model definitions for the scheduler app.
+
+2. Add the "ScheduleEvents" model.
+
+ The model describes the table structure, including fields for Id, Subject, StartTime, EndTime and Description.
+
+ [schedulerCrud/models.py]
+
+ ```python
+
+ from django.db import models
+
+ class ScheduleEvents(models.Model):
+ Id = models.IntegerField(primary_key=True)
+ Subject = models.CharField(max_length=200, null=True, blank=True)
+ StartTime = models.DateTimeField()
+ EndTime = models.DateTimeField()
+ StartTimezone = models.CharField(max_length=200, null=True, blank=True)
+ EndTimezone = models.CharField(max_length=200, null=True, blank=True)
+ Location = models.CharField(max_length=200, null=True, blank=True)
+ Description = models.CharField(max_length=200, null=True, blank=True)
+ IsAllDay = models.BooleanField()
+ RecurrenceID = models.IntegerField(null=True, blank=True)
+ FollowingID = models.IntegerField(null=True, blank=True)
+ RecurrenceRule = models.CharField(max_length=200, null=True, blank=True)
+ RecurrenceException = models.CharField(max_length=200, null=True, blank=True)
+ IsReadonly = models.BooleanField(null=True, blank=True)
+ IsBlock = models.BooleanField(null=True, blank=True)
+
+ class Meta:
+ db_table = 'schedule_events'
+ ```
+
+3. Create database migrations:
+
+ Django migrations are the mechanism that convert model definitions into real MySQL tables and columns. Whenever a model is created or modified, migrations ensure the database structure stays updated.
+
+ - **Generate a new migration**
+
+ Open the Visual Studio Code Terminal, navigate to the `backend` folder and run the following command:
+
+ ```bash
+ python manage.py makemigrations
+ ```
+ **Explanation:**
+ - Scans the **models.py** file for any new or updated models.
+ - Creates a migration file inside the (**schedulerCrud/migrations**) folder.
+ - This migration file acts as a blueprint describing the required database changes.
+
+ - **Apply the migration to the database**
+
+ After the migration file is created, run the next command:
+
+ ```bash
+ python manage.py migrate
+ ```
+ **Explanation:**
+ - Reads the migration blueprint created earlier.
+ - Creates the required MySQL tables.
+ - Adds all fields defined in the model.
+ - Updates or modifies existing tables if the model structure changed.
+
+ This step updates the actual database and ensures the structure matches the "ScheduleEvents" model.
+
+ - **Purpose of migrations:**
+
+ Migrations act as a bridge between the `Python` models and the MySQL database.
+ - Every change in a model (new field, renamed field, removed field, new model) is recorded as a migration.
+ - These changes are applied safely without writing SQL manually.
+ - The database structure remains consistent across all environments (development, staging, production).
+ - Whenever a model is modified in the future:
+ ```bash
+ makemigrations → migrate
+ ```
+ This sequence updates the database schema automatically.
+
+### Step 4: Configure API routing
+
+API routing defines the URLs through which the application exposes CRUD operations for schedule-events records.
+
+A Django REST Framework router automatically generates RESTful routes for the scheduler application, allowing the API to handle retrieving, creating, updating, and deleting records under a single endpoint.
+
+**Instructions:**
+1. Open the following auto generated file named (**scheduler/urls.py**). This file controls all top‑level routes in the Django project.
+
+2. Register the "GetData" and "UpdateData" with a Django REST Framework router:
+
+ [scheduler/urls.py]
+
+ ```python
+
+ from django.urls import path, re_path
+ from schedulerCrud import views
+ from django.contrib import admin
+
+ # urls.py
+ urlpatterns = [
+ path('Home/GetData', views.GetData),
+ path('Home/UpdateData', views.UpdateData),
+ path('admin/', admin.site.urls),
+ ]
+ ```
+
+### Step 5: Serializer implementation
+
+1. Create the serializer that converts ScheduleEvents model instances to/from JSON and validates incoming API data. This enables Django REST Framework to reliably handle create, read, update, and delete operations.
+
+2. Create a following file named **serializers.py** in **schedulerCrud** folder.
+
+ [schedulerCrud/serializers.py]
+
+ ```python
+ from rest_framework import serializers
+ from schedulerCrud.models import ScheduleEvents
+
+ class ScheduleEventsSerializer(serializers.ModelSerializer):
+ class Meta:
+ model = ScheduleEvents
+ fields = '__all__'
+ ```
+### Step 6: View implementation
+
+The final part is the Views, which receives all incoming requests and routes them to the appropriate custom services. Update (**schedulerCrud/views.py**) with the following code to properly wire all services to the views:
+
+[schedulerCrud/views.py]
+```python
+from rest_framework.parsers import JSONParser
+from django.http.response import JsonResponse
+from schedulerCrud.serializers import ScheduleEventsSerializer
+from schedulerCrud.models import ScheduleEvents
+
+def GetData(request):
+
+ schedule_events = ScheduleEvents.objects.all()
+ schedule_events_serializer=ScheduleEventsSerializer(schedule_events,many=True)
+ return JsonResponse(schedule_events_serializer.data,safe=False)
+
+def UpdateData(request):
+ if request.method == 'POST':
+ data = JSONParser().parse(request)
+ if 'added' in data and len(data['added']) > 0:
+ for item in data['added']:
+ schedule_events_serializer = ScheduleEventsSerializer(data=item)
+ if schedule_events_serializer.is_valid():
+ schedule_events_serializer.save()
+ else:
+ return JsonResponse(schedule_events_serializer.errors, safe=False, status=400)
+
+ if 'changed' in data and len(data['changed']) > 0:
+ for item in data['changed']:
+ event = ScheduleEvents.objects.get(pk=item['Id'])
+ schedule_events_serializer = ScheduleEventsSerializer(event, data=item)
+ if schedule_events_serializer.is_valid():
+ schedule_events_serializer.save()
+ else:
+ return JsonResponse(schedule_events_serializer.errors, safe=False, status=400)
+
+ if 'deleted' in data and len(data['deleted']) > 0:
+ for item in data['deleted']:
+ event = ScheduleEvents.objects.get(pk=item['Id'])
+ event.delete()
+
+ return GetData(request)
+
+ else:
+ return JsonResponse({"error": "Invalid method"}, status=405)
+
+
+```
+
+## Integrate Syncfusion React Scheduler with Django REST Framework
+
+The Syncfusion React Scheduler is a powerful, high‑performance component designed to display and manage time‑based data such as appointments, meetings, and events. It provides rich scheduling capabilities, including multiple calendar views, event editing, recurring events, drag‑and‑drop interactions, and date‑based navigation. Follow these steps to render the Scheduler and integrate it with a Django backend for seamless event management.
+
+### Step 1 : Creating the React Schedule application
+
+Create a new React application using `create vite@latest`, which provides a faster development environment, smaller bundle sizes, and optimized builds.
+
+Open a Visual Studio Code terminal or Command prompt and run the below command:
+
+```bash
+npm create vite@latest Schedule -- --template react-ts
+cd Schedule
+```
+This command creates a React application named **Schedule** with the essential folder structure and files required to begin development immediately.
+
+The integration process begins by installing the required Syncfusion React Scheduler packages before establishing the DRF API.
+
+### Step 2: Install Syncfusion Scheduler packages
+
+Install the necessary Syncfusion packages using the below command in Visual Studio Code terminal or Command prompt:
+
+```bash
+npm install @syncfusion/ej2-react-schedule --save
+```
+- **@syncfusion/ej2-react-schedule** – Required package for integrating the Syncfusion Scheduler component in React.
+
+### Step 3: Including required Syncfusion stylesheets
+
+Once the dependencies are installed, the required CSS files are made available in the (**../node_modules/@syncfusion**) package directory, and the corresponding CSS references are included in the **App.css** file.
+
+[src/App.css]
+
+```css
+
+@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
+@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css";
+@import "../node_modules/@syncfusion/ej2-dropdowns/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-react-schedule/styles/tailwind3.css";
+```
+
+For this project, the `tailwind3` theme is used. A different theme can be selected or the existing theme can be customized based on project requirements. Refer to the [Syncfusion React Components Appearance](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation to learn more about theming and customization options.
+
+### Step 4: Configure DataManager with Django REST Framework (DRF)
+
+The Syncfusion [DataManager](https://ej2.syncfusion.com/react/documentation/data/getting-started) acts as a communication layer between the React Scheduler and backend services. It sends all Scheduler operations—such as reading data and performing CRUD actions to the server in a standardized format.
+
+The [UrlAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors/url-adaptor) is a built‑in adaptor that formats requests for REST-style endpoints, like the Django REST Framework API. It serializes all Scheduler actions and posts them to the DRF API endpoint, then processes the JSON responses returned by the server.
+
+When using `DataManager` with `UrlAdaptor`, the server is expected to return a specific response structure:
+
+- **result**: The list of data displayed in the current view, supporting on‑demand loading for large datasets.
+
+This response format ensures seamless interaction between the React Scheduler and backend services, enabling all data operations to work consistently.
+
+**Instructions:**
+1. Open the **App.tsx** file.
+2. Create a `DataManager` instance with the `UrlAdaptor` inside the React component and point it to the DRF endpoint. This `DataManager` will serialize all Scheduler interactions (data and CRUD) and post them to the DRF server.
+
+ [App.tsx]
+
+ ```ts
+ import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
+
+ let dataManager: DataManager = new DataManager({
+ url: 'http://127.0.0.1:8000/Home/GetData',
+ crudUrl: 'http://127.0.0.1:8000/Home/UpdateData',
+ adaptor: new UrlAdaptor(),
+ crossDomain: true
+ });
+
+ ```
+ **Explanation:**
+ - **url** – Base API endpoint used to **fetch data**. This endpoint returns the initial dataset displayed in the component (e.g., a `GET` request to retrieve records).
+ - **crudUrl** – API endpoint used to perform **Create, Update, and Delete** operations. Insert, update, and delete requests are sent to this URL (often via `POST` with action-specific payloads).
+ - **adaptor** – Specifies how component operations are translated into HTTP requests.
+ - `UrlAdaptor` converts scheduler operations into **standard REST-like requests** compatible with typical backends (e.g., Django/ASP.NET/Node).
+ - **crossDomain** – Enables communication with a backend running on a different port.
+
+3. Configure the Scheduler Component.
+
+ [App.tsx]
+
+ ```ts
+
+ import React from 'react';
+ import './App.css';
+ import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, DragAndDrop, Resize, type EventSettingsModel } from '@syncfusion/ej2-react-schedule';
+
+
+ function App() {
+ const eventSettings: EventSettingsModel= { dataSource: dataManager };
+ return (
+
+
+
+ );
+ }
+
+ export default App;
+ ```
+## Performing CRUD operations
+
+The Scheduler Application provides full CRUD (Create, Read, Update, Delete) capabilities for managing scheduling data. Users can create new schedule entries, modify existing records, or remove events. All operations are processed through the application’s interface and are reliably persisted to the backend database via Django REST Framework (DRF), ensuring accurate and up‑to‑date scheduling information across the system.
+
+### Insert
+
+**Insert** creates a new **schedule event** in the database using the values provided from the Scheduler.
+
+```python
+
+def UpdateData(request):
+ if request.method == 'POST':
+ data = JSONParser().parse(request)
+
+ if 'added' in data and len(data['added']) > 0:
+ for item in data['added']:
+ schedule_events_serializer = ScheduleEventsSerializer(data=item)
+ if schedule_events_serializer.is_valid():
+ schedule_events_serializer.save()
+ else:
+ return JsonResponse(schedule_events_serializer.errors, safe=False, status=400)
+
+ return GetData(request)
+
+ else:
+ return JsonResponse({"error": "Invalid method"}, status=405)
+```
+**Explanation:**
+- When a user creates a new event in the Scheduler, it posts a payload that includes an added array with one or more new event objects.
+- On the server, each object in added is validated by ScheduleEventsSerializer and saved inside a transaction to ensure consistency.
+- After creation, the endpoint returns the latest event list, allowing the Scheduler to immediately show the server‑authoritative data (including any database defaults).
+
+**Below image shows the inserted data passed to the DRF:**
+
+
+
+
+### Update
+
+**Update** modifies an existing **schedule event** using the edited values sent from the Scheduler.
+
+```python
+
+def UpdateData(request):
+ if request.method == 'POST':
+ data = JSONParser().parse(request)
+
+ if 'changed' in data and len(data['changed']) > 0:
+ for item in data['changed']:
+ event = ScheduleEvents.objects.get(pk=item['Id'])
+ schedule_events_serializer = ScheduleEventsSerializer(event, data=item)
+ if schedule_events_serializer.is_valid():
+ schedule_events_serializer.save()
+ else:
+ return JsonResponse(schedule_events_serializer.errors, safe=False, status=400)
+
+ return GetData(request)
+
+ else:
+ return JsonResponse({"error": "Invalid method"}, status=405)
+```
+
+**Explanation:**
+
+- The endpoint locates the target event by its primary key Id.
+- The serializer validates the new values and writes changes atomically within the same transaction as inserts.
+- The endpoint returns the refreshed dataset so the Scheduler remains synchronized with server data.
+
+**Below image shows the updated data passed to the DRF:**
+
+
+
+### Delete:
+
+**Delete** removes an existing **schedule event** identified by its primary key sent by the Scheduler.
+
+```python
+
+def UpdateData(request):
+ if request.method == 'POST':
+ data = JSONParser().parse(request)
+
+ if 'deleted' in data and len(data['deleted']) > 0:
+ for item in data['deleted']:
+ event = ScheduleEvents.objects.get(pk=item['Id'])
+ event.delete()
+
+ return GetData(request)
+
+ else:
+ return JsonResponse({"error": "Invalid method"}, status=405)
+```
+
+**Explanation**:
+
+- The Scheduler posts a deleted array with one or more items containing the identifier Id.
+- The endpoint deletes each matching event inside the same transaction, ensuring the operation is consistent with any other changes posted together.
+- After deletion, the endpoint returns the updated event list for immediate UI refresh.
+
+**Below image shows the deleted key passed to the DRF:**
+
+
+
+## Running the application
+
+Open a terminal or Command prompt. Start the backend server first, and then run the React Schedule.
+
+### Run the backend
+
+Run the following commands to start the server:
+
+```bash
+python manage.py makemigrations
+python manage.py migrate
+python manage.py runserver 8000
+```
+
+### Run the schedule
+
+Execute the below commands to run the Scheduler application:
+
+```bash
+npm run dev
+```
+
+> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/react-scheduler-crud-django-mysql).
+
+
+## Summary
+
+This guide walks through the following key areas:
+
+1. Prerequisites. [🔗](#prerequisites)
+2. Setting up the Django REST Framework for MySQL. [🔗](#setting-up-the-django-rest-framework-for-mysql)
+3. Create and configure the React application with the Syncfusion React Scheduler. [🔗](#integrate-syncfusion-react-scheduler-with-django-rest-framework)
+4. Performing CRUD operations. [🔗](#performing-crud-operations)
+5. Run the Django and React applications locally for development. [🔗](#running-the-application)
+
+The application now offers a reliable, scalable solution for managing scheduler events with a robust Django REST API on MySQL and a Syncfusion React Scheduler front end.
diff --git a/ej2-react/schedule/images/react-mongodb-architecture.png b/ej2-react/schedule/images/react-mongodb-architecture.png
new file mode 100644
index 0000000000..0a56057ea1
Binary files /dev/null and b/ej2-react/schedule/images/react-mongodb-architecture.png differ
diff --git a/ej2-react/schedule/images/react-mongodb-connection.png b/ej2-react/schedule/images/react-mongodb-connection.png
new file mode 100644
index 0000000000..faaae16183
Binary files /dev/null and b/ej2-react/schedule/images/react-mongodb-connection.png differ
diff --git a/ej2-react/schedule/images/react-mongodb-connectivity.png b/ej2-react/schedule/images/react-mongodb-connectivity.png
new file mode 100644
index 0000000000..237468fbdf
Binary files /dev/null and b/ej2-react/schedule/images/react-mongodb-connectivity.png differ
diff --git a/ej2-react/schedule/images/react-mongodb-database-collection.png b/ej2-react/schedule/images/react-mongodb-database-collection.png
new file mode 100644
index 0000000000..79e3846260
Binary files /dev/null and b/ej2-react/schedule/images/react-mongodb-database-collection.png differ
diff --git a/ej2-react/schedule/images/react-mongodb-db-output.png b/ej2-react/schedule/images/react-mongodb-db-output.png
new file mode 100644
index 0000000000..916d2ccd84
Binary files /dev/null and b/ej2-react/schedule/images/react-mongodb-db-output.png differ
diff --git a/ej2-react/schedule/images/react-mongodb-scheduler-output.png b/ej2-react/schedule/images/react-mongodb-scheduler-output.png
new file mode 100644
index 0000000000..36930dceed
Binary files /dev/null and b/ej2-react/schedule/images/react-mongodb-scheduler-output.png differ
diff --git a/ej2-react/schedule/images/scheduler-django-crud-added.png b/ej2-react/schedule/images/scheduler-django-crud-added.png
new file mode 100644
index 0000000000..6408c987e6
Binary files /dev/null and b/ej2-react/schedule/images/scheduler-django-crud-added.png differ
diff --git a/ej2-react/schedule/images/scheduler-django-crud-changed.png b/ej2-react/schedule/images/scheduler-django-crud-changed.png
new file mode 100644
index 0000000000..f8f8d2adc5
Binary files /dev/null and b/ej2-react/schedule/images/scheduler-django-crud-changed.png differ
diff --git a/ej2-react/schedule/images/scheduler-django-crud-deleted.png b/ej2-react/schedule/images/scheduler-django-crud-deleted.png
new file mode 100644
index 0000000000..8e6f0a4570
Binary files /dev/null and b/ej2-react/schedule/images/scheduler-django-crud-deleted.png differ
diff --git a/ej2-react/schedule/mongodb-integration.md b/ej2-react/schedule/mongodb-integration.md
new file mode 100644
index 0000000000..139f83f973
--- /dev/null
+++ b/ej2-react/schedule/mongodb-integration.md
@@ -0,0 +1,495 @@
+---
+layout: post
+title: Getting started with React Schedule and MongoDB | Syncfusion
+description: Checkout and learn about Getting started with React Schedule component of Syncfusion Essential JS 2 with MongoDB.
+control: Scheduler
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Getting started with Syncfusion React Scheduler and MongoDB
+
+The Syncfusion [React Scheduler](https://ej2.syncfusion.com/react/documentation/schedule/getting-started) combined with MongoDB provides a robust, scalable, and flexible data-driven application architecture suitable for modern event-management systems.
+
+MongoDB's schema-less design seamlessly supports complex scheduling data, making it ideal for storing events, resources, recurrence rules, and user-specific calendar configurations.
+
+## What is MongoDB?
+
+[MongoDB](https://www.mongodb.com/) is a highly scalable, document-oriented NoSQL database designed to store and manage large volumes of flexible, JSON-like data. It enables developers to work with dynamic schemas, making it easy to model complex and evolving application data without rigid table structures.
+
+## Overview
+This integration enables full CRUD (Create, Read, Update, Delete) operations for calendar events using:
+
+* Frontend: **React + Syncfusion React Scheduler**
+* Backend: **Node.js + Express**
+* Database: **MongoDB**
+* Communication: **REST APIs via Syncfusion DataManager**
+
+Users can create, edit, and delete appointments in the Scheduler UI, with all changes persisted in MongoDB.
+
+## Prerequisites
+
+Before getting started, ensure the following prerequisites are met:
+
+* **Node.js ≥ 20.19.0**
+Required for optimal performance and full compatibility with MongoDB Node.js Driver v7.0 and modern ES features.
+
+* **MongoDB (Latest Stable Version)**
+Required for storing and retrieving application data. Supports both local installation and MongoDB Atlas.
+
+## Architecture Diagram
+
+
+## Database Setup
+Follow the steps below to set up the MongoDB database for the application:
+
+1. Download the MongoDB Community Edition from the official website: [MongoDB](https://www.mongodb.com/try/download/community)
+
+2. Install MongoDB by following the platform‑specific installation instructions (Windows / macOS / Linux).
+
+3. Launch MongoDB Compass after successful installation.
+
+4. Open MongoDB Compass and connect the default connection string: `mongodb://localhost:27017`
+
+*Image illustrating the MongoDB connection string*
+
+5. Create a new Database `mydb` and a Collection `ScheduleData` in default connection string.
+
+*Image illustrating the MongoDB database & collection*
+
+6. Confirm that MongoDB Compass shows the database in the connected state, as illustrated in the screenshot.
+
+*Image illustrating the MongoDB connectivity*
+
+## Create a React Application
+To create a new `React` application, use the Vite build tool, which provides faster startup, hot reload, and better performance for modern React applications.
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npm create vite@latest
+
+{% endhighlight %}
+{% highlight bash tabtitle="YARN" %}
+
+yarn create vite
+
+{% endhighlight %}
+{% endtabs %}
+
+Running one of the above commands will prompt you to configure the project as shown below.
+
+### Step 1: Define the project name:
+For example, let us name the project `react-app`.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+√ Project name: » **react-app**
+
+{% endhighlight %}
+{% endtabs %}
+
+### Step 2: Select the required configurations:
+
+Choose React as the framework and TypeScript as the variant for better type safety and maintainability.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+√ Select a framework: » **React**
+√ Select a variant: » **TypeScript**
+
+{% endhighlight %}
+{% endtabs %}
+
+**Note:**
+You can also create the React application with TypeScript directly using the Vite template, as shown below.
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npm create vite@latest react-app -- --template react-ts
+
+{% endhighlight %}
+{% highlight bash tabtitle="YARN" %}
+
+yarn create vite react-app --template react-ts
+
+{% endhighlight %}
+{% endtabs %}
+
+### Step 3: Confirm additional Vite options:
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+√ Use rolldown-vite (Experimental)?: » **No**
+√ Install with npm and start now? » **Yes**
+
+{% endhighlight %}
+{% endtabs %}
+
+After executing the above commands, the application will be available at: `http://localhost:5173`
+
+The React application is now created and running with default settings.
+Next, we will proceed with integrating Syncfusion® React Scheduler component into the project after setting up the server.
+
+### Step 4: Terminate & navigate to the project directory:
+Once the project is created successfully, stop the running state of the application and move into the application folder using the following command.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+ctrl + c
+cd react-app
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Server Application
+
+### Step 1: Install required libraries:
+To set up the backend for the application, Install the required packages and make a new directory for server in the React project folder `react-app/` itself.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+npm install express mongodb cors
+
+{% endhighlight %}
+{% endtabs %}
+
+* Express – A minimal and flexible web framework used to build API endpoints
+* MongoDB (Node.js Driver) – The official MongoDB driver that allows your server to communicate with the database
+* CORS – A package that enables your application (running on a different port) to access the server’s API
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+mkdir server
+
+{% endhighlight %}
+{% endtabs %}
+
+### Step 2: Create a file **server.js**:
+Create a new file named `server.js` inside the directory `server` created above and add the following code to set up the server.
+
+{% tabs %}
+{% highlight js tabtitle="server.js" %}
+
+const { MongoClient } = require('mongodb');
+const express = require('express');
+const cors = require('cors');
+
+const app = express();
+const mongoUrl = 'mongodb://127.0.0.1:27017/';
+const PORT = 5000;
+
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+
+// CORS configuration
+app.use(cors({
+origin: 'http://localhost:5173',
+methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
+allowedHeaders: ['Content-Type'],
+credentials: false
+}));
+
+app.listen(PORT, () => {
+console.log(`✅ Server running on http://localhost:${PORT}`);
+});
+
+(async () => {
+const client = new MongoClient(mongoUrl);
+await client.connect();
+const db = client.db('mydb');
+const collection = db.collection('ScheduleData');
+
+// Fetch all scheduler events
+app.post('/GetData', async (req, res) => {
+ try {
+ const data = await collection.find({}).toArray();
+ res.json(data);
+ } catch (err) {
+ res.status(500).json({ error: err.message });
+ }
+});
+
+// Handle batch CRUD operations
+app.post('/BatchData', async (req, res) => {
+ try {
+ const body = req.body;
+ let events = [];
+
+ // INSERT
+ if (body.action === 'insert' || (body.added && body.added.length)) {
+ events = body.added || [body.value];
+ for (const e of events) {
+ e.StartTime = new Date(e.StartTime);
+ e.EndTime = new Date(e.EndTime);
+ await collection.insertOne(e);
+ }
+ }
+
+ // UPDATE
+ if (body.action === 'update' || (body.changed && body.changed.length)) {
+ events = body.changed || [body.value];
+ for (const e of events) {
+ delete e._id; // Critical: remove _id to avoid immutable field error
+ e.StartTime = new Date(e.StartTime);
+ e.EndTime = new Date(e.EndTime);
+ await collection.updateOne(
+ { Id: e.Id },
+ { $set: e }
+ );
+ }
+ }
+
+ // DELETE
+ if (body.action === 'remove' || (body.deleted && body.deleted.length)) {
+ events = body.deleted || [{ Id: body.key }];
+ for (const e of events) {
+ await collection.deleteOne({ Id: e.Id });
+ }
+ }
+
+ res.json(body);
+ } catch (err) {
+ res.status(500).json({ error: err.message });
+ }
+});
+})();
+
+{% endhighlight %}
+{% endtabs %}
+
+Here database name is `mydb` and collection name is `ScheduleData`, both were previously created during the database setup process
+
+### Step 3: Add **server script** to `package.json`:
+To enable running the Node.js backend directly from the React project’s root, add the following script inside your root `package.json` under the "scripts" section.
+
+{% tabs %}
+{% highlight json tabtitle="package.json" %}
+
+"scripts": {
+ "server": "node ./server/server.js"
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Integrating Syncfusion React Scheduler
+This section integrates [Syncfusion React Scheduler](https://www.syncfusion.com/react-components/react-scheduler) to the above created application.
+
+### Step 1: Install required libraries:
+Install the required [Syncfusion React Scheduler package](https://www.npmjs.com/package/@syncfusion/ej2-react-schedule) by the following command.
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npm install @syncfusion/ej2-react-schedule
+
+{% endhighlight %}
+{% highlight bash tabtitle="YARN" %}
+
+yarn add @syncfusion/ej2-react-schedule
+
+{% endhighlight %}
+{% endtabs %}
+
+### Step 2: Add CSS references:
+Add CSS references for the Scheduler in `src/App.css`.
+
+{% tabs %}
+{% highlight css tabtitle="App.css" %}
+
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-react-schedule/styles/material.css";
+
+{% endhighlight %}
+{% endtabs %}
+
+### Step 3: Add the Schedule component:
+In the `src/App.tsx` file, use the following code snippet to render the Syncfusion React Schedule component and import `App.css` to apply styles to the scheduler.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+
+import React from 'react';
+import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';
+import './App.css';
+
+export default class App extends React.Component<{}, {}> {
+ public scheduleObj: ScheduleComponent = new ScheduleComponent({});
+
+ public render() {
+ return (
+
+
+ );
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+* The Scheduler is connected to a backend service using **Syncfusion’s DataManager**, a powerful data-handling component built to seamlessly manage remote data operations.
+* DataManager is configured with two API endpoints:
+ * url → to read event data
+ * crudUrl → to handle create, update, and delete actions
+* The UrlAdaptor ensures standard REST-style communication with your server.
+* Once this is set, the Scheduler automatically sends requests when users add, edit, drag, resize, or delete events.
+* The server processes these operations and returns updated event data, allowing the Scheduler to stay perfectly in sync with the backend.
+
+## Run the Application
+
+**Note**:
+If your project’s package.json contains **"type": "module"**, remove it before running the server.
+This project uses CommonJS (require), not ES modules—keeping "type": "module" will cause Node.js to throw a “require is not defined in ES module scope” error.
+
+### Step 1: Start the Backend Server:
+From the project directory `react-app/`, start the backend server.
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npm run server
+
+{% endhighlight %}
+{% highlight bash tabtitle="YARN" %}
+
+yarn server
+
+{% endhighlight %}
+{% endtabs %}
+
+Once started, the Node.js backend will be available at:
+http://localhost:5000/
+
+### Step 2: Start the React Application:
+Open a new terminal window from the same `react-app/` directory and run the React application.
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npm run dev
+
+{% endhighlight %}
+{% highlight bash tabtitle="YARN" %}
+
+yarn run dev
+
+{% endhighlight %}
+{% endtabs %}
+
+After the build completes, the React application will run at:
+http://localhost:4200/
+
+You can now create, read, update, and delete events directly in the **Syncfusion React Scheduler**.
+All changes will be reflected in the connected **MongoDB** database in real time.
+
+## Output Preview
+**Syncfusion React Scheduler**
+
+*Image illustrating the Syncfusion React Scheduler*
+
+**Syncfusion React Scheduler Events in MongoDB**
+
+*Image illustrating the Syncfusion React Scheduler Events in MongoDB*
+
+## Common Pitfalls & Solutions
+
+1. **CORS issues (blocked by CORS):** Ensure app.use(cors(...)) is registered before routes and that origin matches your React dev URL. Set credentials: true only if you send cookies/Authorization and then also configure DataManager to send them.
+
+2. **Dates stored as strings:** Convert StartTime/EndTime to Date objects on the server before inserting/updating. Otherwise, Scheduler rendering/timezone math may be off.
+
+3. **Immutable _id error on updates:** Delete _id from payload before calling updateOne. The MongoDB driver does not allow changing _id.
+
+4. **Missing CSS → broken layout:** Import all required CSS bundles for EJ2 controls; otherwise the editor/pickers won’t render correctly.
+
+
+
+> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/ej2-react-scheduler-with-mongodb)
\ No newline at end of file
diff --git a/ej2-react/signature/getting-started.md b/ej2-react/signature/getting-started.md
index 5b5855259e..9ec9ddb25a 100644
--- a/ej2-react/signature/getting-started.md
+++ b/ej2-react/signature/getting-started.md
@@ -82,7 +82,7 @@ import * as React from 'react';
import './App.css';
function App() {
- return (