Skip to content

DOCINFRA-2341_merged_using_automation #589

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 19, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const SERVICE_URI = 'https://services.syncfusion.com/js/production/api/orders';

var table = (document.getElementById('datatable'));

new DataManager({ url: SERVICE_URI }).executeQuery(new Query().take(8)).then((e) => {
new ej.data.DataManager({ url: SERVICE_URI }).executeQuery(new ej.data.Query().take(8)).then((e) => {
const results = e.result.items;
results.forEach((data) => {
table.appendChild(compiledFunction(data)[0]);
Expand Down
207 changes: 121 additions & 86 deletions ej2-javascript/data/adaptors.md

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions ej2-javascript/data/advanced-scenarios.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ domainurl: ##DomainURL##

# Advanced scenarios in Syncfusion ##Platform_Name## DataManager

## Offline Mode
This section covers advanced features such as offline mode, load on demand, deferred execution, and error handling in the Syncfusion ##Platform_Name## DataManager.

## Offline mode

Offline mode in Syncfusion ##Platform_Name## DataManager enables full client-side data processing by fetching data from the server once and then performing all subsequent operations (such as filtering, sorting, paging, and grouping) locally, without additional network requests.

Expand Down Expand Up @@ -56,7 +58,7 @@ The following sample demonstrates how to enable `offline` mode:
{% previewsample "page.domainurl/code-snippet/data/advanced-cs1" %}
{% endif %}

## Load On Demand
## Load on demand

Load on demand is an efficient technique that optimizes performance and reduces bandwidth usage by fetching only a specific subset of data from the server, rather than loading the entire dataset at once. This approach is particularly beneficial for applications dealing with large datasets, ensuring faster load times and improved responsiveness.

Expand Down
8 changes: 4 additions & 4 deletions ej2-javascript/data/applying-middleware-logic.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ The [applyPreRequestMiddlewares](https://ej2.syncfusion.com/javascript/documenta

For example, you can programmatically inject an authentication token or enrich headers based on user context.

If you're building a SaaS admin dashboard where users log in and fetch their own data from a secured REST API. Each user is issued a JWT (JSON Web Token) after authentication. Every request sent by the Syncfusion DataManager must include this token to validate the user’s identity.
If you're building a SaaS admin dashboard where users log in and fetch their own data from a secured RESTful WebAPIs. Each user is issued a JWT (JSON Web Token) after authentication. Every request sent by the Syncfusion DataManager must include this token to validate the user’s identity.

By using `applyPreRequestMiddlewares`, you can automatically inject the JWT into the request headers as an authorization field. This avoids manual token handling and ensures every [DataManager](../api/data/dataManager/) request remains authenticated.

Expand Down Expand Up @@ -120,7 +120,7 @@ The [applyPostRequestMiddlewares](https://ej2.syncfusion.com/javascript/document

{% if page.publishingplatform == "typescript" %}

{% tabs %}
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
{% include code-snippet/data/supported-adaptors/index.ts %}
{% endhighlight %}
Expand Down Expand Up @@ -215,11 +215,11 @@ The `beforeSend` callback allows you to dynamically modify request headers just

It accepts an three arguments:

* **DataManager (dm):** Provides the dataSource and adaptor value.
* **DataManager (dm):** Provides the datasource and adaptor value.

* **Request (request):** Used to send custom headers, such as setting the Authorization header.

* **Settings (settings):** An optional argument that allows additional configurations.
* **Settings (settings)**: An optional argument that allows additional configurations.

{% if page.publishingplatform == "typescript" %}

Expand Down
26 changes: 13 additions & 13 deletions ej2-javascript/data/crud-operations.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,32 @@ domainurl: ##DomainURL##

# CRUD operations in Syncfusion ##Platform_Name## DataManager

The Syncfusion ##Platform_Name## DataManager enables seamless Create, Read, Update, and Delete (CRUD) operations on data, whether it's stored locally in the browser or remotely on a server. You can manipulate data using the DataManager by calling its built-in methods or binding it to UI components like Grid, Gantt, or Scheduler. These components automatically trigger CRUD actions based on user interactions such as editing a row or deleting a record.
The Syncfusion ##Platform_Name## DataManager enables seamless Create, Read, Update, and Delete (CRUD) operations on data, whether it is stored locally in the browser or remotely on a server. You can manipulate data using the DataManager by calling its built-in methods and then binding it to UI components such as Grid, Gantt, or Scheduler. These components automatically trigger CRUD actions based on user interactions, such as editing a row or deleting a record.

Each data source type handles CRUD operations differently. To manage this, DataManager uses data adaptors translate DataManager actions into the appropriate format for the target data source.
Each datasource type handles CRUD operations differently. To manage this, DataManager uses data adaptors translate DataManager actions into the appropriate format for the target datasource.

**Data Adaptors and CRUD Translation:**

| Adaptor Type | Target Data Source | Notes |
| Adaptor Type | Target DataSource | Notes |
|------------------------|------------------------|-----------------------------------------------------------------------|
| `JsonAdaptor` | Local JSON data | All changes are made in-memory. Useful for offline scenarios. |
| `UrlAdaptor` | RESTful endpoints | Sends GET/POST/PUT/DELETE requests to remote URLs. |
| `UrlAdaptor` | RESTful WebAPIs endpoints | Sends GET/POST/PUT/DELETE requests to remote URLs. |
| `WebApiAdaptor` | ASP.NET Web API | Formats requests per Web API standards (e.g., OData-style queries). |
| `ODataAdaptor` / V4 | OData services | Compatible with OData-compliant services and supports query options. |
| `RemoteSaveAdaptor` | Remote, batch updates | Batches multiple CRUD operations into a single request. |
| `CustomAdaptor` | Developer-defined | Extend the base class to fully control how CRUD requests behave. |

## Performing CRUD operations

The process of performing CRUD operations varies depending on the data source:
The process of performing CRUD operations varies depending on the datasource:

* For local data, operations are performed directly on in-memory or client-side collections.

* For remote data, CRUD actions are translated into HTTP requests sent to specified service endpoints, allowing interaction with centralized servers or cloud databases.

### Local data

Local Data CRUD Operations allow you to efficiently manage and manipulate data stored in your application without the need for external servers or APIs. This is useful for smaller applications, offline use cases, or situations where you want to quickly manipulate temporary datasets within your application.
Local data CRUD Operations allow you to efficiently manage and manipulate data stored in your application without the need for external servers or APIs. This is useful for smaller applications, offline use cases, or situations where you want to quickly manipulate temporary datasets within your application.

To perform CRUD operations on local data using Syncfusion ##Platform_Name## DataManager, follow these steps:

Expand All @@ -50,11 +50,11 @@ To perform CRUD operations on local data using Syncfusion ##Platform_Name## Data

**2. Perform CRUD operations using the following DataManager methods:**

* [insert](../api/data/dataManager/#insert) : The JSON data passed as a parameter to the insert method that is inserted to the data source of the data manager.
* [insert](../api/data/dataManager/#insert) : The JSON data passed as a parameter to the insert method that is inserted to the datasource of the data manager.

* [update](../api/data/dataManager/#update): Modifies or updates an existing record in the data source using a unique key.
* [update](../api/data/dataManager/#update): Modifies or updates an existing record in the datasource using a unique key.

* [remove](../api/data/dataManager/#remove) : Removes a record from the local data source using a unique key.
* [remove](../api/data/dataManager/#remove) : Removes a record from the local datasource using a unique key.


{% if page.publishingplatform == "typescript" %}
Expand Down Expand Up @@ -89,13 +89,13 @@ To perform CRUD operations on local data using Syncfusion ##Platform_Name## Data

### Remote data

Remote Data CRUD operations allow you to manage data hosted on a remote server or external API using the Syncfusion ##Platform_Name## DataManager. This is especially useful for modern web applications that interact with centralized databases or cloud services, ensuring seamless synchronization between client and server.
Remote data CRUD operations allow you to manage data hosted on a remote server or external API using the Syncfusion ##Platform_Name## DataManager. This is especially useful for modern web applications that interact with centralized databases or cloud services, ensuring seamless synchronization between client and server.

To perform CRUD operations on remote data using DataManager, follow these steps:

**1. Initialize the DataManager with remote data:**

You can bind the DataManager to a remote data source by specifying the service endpoint URL in the `url` property. Additionally, to handle CRUD operations properly, you should specify separate URLs for insert, update, and remove actions using the properties:
You can bind the DataManager to a remote datasource by specifying the service endpoint URL in the `url` property. Additionally, to handle CRUD operations properly, you should specify separate URLs for insert, update, and remove actions using the properties:

* `insertUrl`: The endpoint URL to insert (create) new records.

Expand Down Expand Up @@ -154,11 +154,11 @@ To perform CRUD operations on remote data using DataManager, follow these steps:
{% endif %}

> * The [update](../api/data/dataManager/#update) method requires the primary key name to locate the record to be modified, while the remove method requires both the primary key name and its value to identify the record to be deleted.
>* In remote data sources, when the primary key field is an identity field, then it is advised to return the created data in the response.
>* In remote datasources, when the primary key field is an identity field, then it is advised to return the created data in the response.

## Handling batch operations

The Syncfusion ##Platform_Name## DataManager supports batch operations, allowing multiple CRUD actions such as create, update, and delete to be submitted in a single request. This feature improves performance by minimizing the number of HTTP requests sent to the data source, reducing network overhead and enhancing efficiency.
The Syncfusion ##Platform_Name## DataManager supports batch operations, allowing multiple CRUD actions such as create, update, and delete to be submitted in a single request. This feature improves performance by minimizing the number of HTTP requests sent to the datasource, reducing network overhead and enhancing efficiency.

Use the [saveChanges](../api/data/dataManager/#savechanges) method to commit all pending changes (insertions, updates, and deletions) in a single call. This eliminates the need for individual requests for each action.

Expand Down
12 changes: 6 additions & 6 deletions ej2-javascript/data/data-binding.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ domainurl: ##DomainURL##

# Data Binding in Syncfusion ##Platform_Name## DataManager

This section explains how to perform data binding using both local and remote data sources with the Syncfusion DataManager in ##Platform_Name## applications.
This section explains how to perform data binding using both local and remote datasources with the Syncfusion DataManager in ##Platform_Name## applications.

## Data Binding

The Syncfusion ##Platform_Name## DataManager enables efficient data management in ##Platform_Name## applications. It supports both RESTful JSON data services binding and local JavaScript object array binding, providing flexibility to handle and manipulate data.
The Syncfusion ##Platform_Name## DataManager enables efficient data management in ##Platform_Name## applications. It supports both RESTful WebAPIs that return JSON data and local JavaScript object array binding, providing flexibility to handle and manipulate data.

Data binding is the process of connecting UI elements with data sources, allowing the UI to reflect changes in the data automatically. The [DataManager](../api/data/dataManager/) abstracts this process by managing CRUD operations, query building, and communication with local or remote data sources.
Data binding is the process of connecting UI elements with datasources, allowing the UI to reflect changes in the data automatically. The [DataManager](../api/data/dataManager/) abstracts this process by managing CRUD operations, query building, and communication with local or remote datasources.

For example, consider an HR dashboard that displays a list of employees, including fields such as Name, Department, Role, and Status. Instead of writing custom code to fetch and manage data manually, the developer binds the Grid to a DataManager instance.

Expand Down Expand Up @@ -86,7 +86,7 @@ The following example demonstrates how to bind JSON data using the `executeLocal

### Remote data binding

Remote data binding refers to connecting a UI component to data retrieved from an external source such as a REST API, web service, or cloud database. This technique is especially useful in scenarios where large datasets need to be fetched from a server, real-time data updates are required, or data needs to be accessed from an external API or database.
Remote data binding refers to connecting a UI component to data retrieved from an external source such as a RESTful WebAPIs, web service, or cloud database. This technique is especially useful in scenarios where large datasets need to be fetched from a server, real-time data updates are required, or data needs to be accessed from an external API or database.

For example, consider an online store application where the product catalog is stored on a remote server. Since the product data is frequently updated and can be very large, fetching it directly from the server ensures the latest information is always displayed. Remote data binding allows the application to request only the needed data, such as filtered or paged results, reducing the amount of data transferred and improving performance.

Expand Down Expand Up @@ -129,7 +129,7 @@ The following example demonstrates bind remote data using the `executeQuery` met

## Component Binding

The Syncfusion ##Platform_Name## DataManager provides an abstraction for handling data binding across various UI components, including [Grid](../../grid/getting-started), [DropDownList](../../drop-down-list/getting-started), [Charts](../../chart/getting-started), and HTML tables. It supports both local and remote data sources, enabling flexible integration with data services.
The Syncfusion ##Platform_Name## DataManager provides an abstraction for handling data binding across various UI components, including [Grid](../../grid/getting-started), [DropDownList](../../drop-down-list/getting-started), [Charts](../../chart/getting-started), and HTML tables. It supports both local and remote datasources, enabling flexible integration with data services.

With built-in support for operations such as filtering, sorting, grouping, paging, and CRUD actions, the DataManager streamlines the process of managing data logic in modern web applications.

Expand Down Expand Up @@ -383,7 +383,7 @@ Here’s an example demonstrating how to bind remote data using the `DataManager

### Normal HTML table

Binding data to a normal HTML table can be done through both local and remote data sources. This allows for easy and dynamic population of table rows with data. This approach is particularly useful in scenarios such as dashboards, reports, or summary views, where the focus is on quickly rendering a set of records in a tabular format.
Binding data to a normal HTML table can be done through both local and remote datasources. This allows for easy and dynamic population of table rows with data. This approach is particularly useful in scenarios such as dashboards, reports, or summary views, where the focus is on quickly rendering a set of records in a tabular format.

For example, consider you are building a simple order management dashboard that displays the latest orders to customer service agents. The dashboard needs to update frequently with new order data, either fetched from a local cache or a remote API, and display it quickly in a clean tabular format. Using a lightweight HTML table with DataManager helps efficiently manage and render this data dynamically.

Expand Down
Loading