diff --git a/ej2-angular-toc.html b/ej2-angular-toc.html
index c1b71bbd8d..8f989a047d 100644
--- a/ej2-angular-toc.html
+++ b/ej2-angular-toc.html
@@ -2887,7 +2887,7 @@
Release Notes
- - 2024 Volume 1 - 25.*
+ - 2024 Volume 1 - 25.*
- 2023 Volume 4 - 24.*
- 2023 Volume 3 - 23.*
- Weekly Release
diff --git a/ej2-angular/Release-notes/25.1.42.md b/ej2-angular/Release-notes/25.1.42.md
new file mode 100644
index 0000000000..2e201bb47f
--- /dev/null
+++ b/ej2-angular/Release-notes/25.1.42.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Angular 2024 Weekly Nuget Release Release Notes
+description: Essential Studio for Angular 2024 Weekly Nuget Release Release Notes
+platform: ej2-angular
+documentation: ug
+---
+
+# Essential Studio for ##Platform_Name## Release Notes
+
+{% include release-info.html date="April 30, 2024" version="v25.1.42" %}
+
+{% directory path: _includes/release-notes/v25.1.42 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-angular/Release-notes/25.2.7.md b/ej2-angular/Release-notes/25.2.7.md
new file mode 100644
index 0000000000..640e407289
--- /dev/null
+++ b/ej2-angular/Release-notes/25.2.7.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Angular Weekly Nuget Release Release Notes
+description: Essential Studio for Angular Weekly Nuget Release Release Notes
+platform: ej2-angular
+documentation: ug
+---
+
+# Essential Studio for Angular Release Notes
+
+{% include release-info.html date="June 04, 2024" version="v25.2.7" %}
+
+{% directory path: _includes/release-notes/v25.2.7 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-angular/common/internationalization.md b/ej2-angular/common/internationalization.md
index 9159783b5c..ced47a7a81 100644
--- a/ej2-angular/common/internationalization.md
+++ b/ej2-angular/common/internationalization.md
@@ -274,6 +274,7 @@ Custom format string must contain one or more of the following standard date/ti
| h / H | Denotes the hour. *h* for 12 hour and *H* for 24 hours format. |
| m | Denotes minutes. |
| s | Denotes seconds. |
+| f | Denotes milliseconds. |
| a | Denotes the am/pm designator it will only be displayed if hour is specified in the h format. |
| z | Denotes the time zone. |
| ' (single quotes) | To display words in the formatted date you can specify the words with in the single quotes |
diff --git a/ej2-angular/data/adaptors.md b/ej2-angular/data/adaptors.md
index a3575843cd..730ebd4eb0 100644
--- a/ej2-angular/data/adaptors.md
+++ b/ej2-angular/data/adaptors.md
@@ -44,7 +44,7 @@ The adaptor can be assigned using the **adaptor** property of the [`DataManager`
```typescript
import { DataManager, Query, UrlAdaptor } from '@syncfusion/ej2-data';
-const SERVICE_URI = 'https://ej2services.syncfusion.com/angular/development/api/UrlDataSource';
+const SERVICE_URI = 'https://services.syncfusion.com/angular/production/api/UrlDataSource';
new DataManager({
url: SERVICE_URI,
@@ -109,14 +109,14 @@ You can use the **ODataV4Adaptor** to interact with ODataV4 service.
## Web API adaptor
-You can use the **WepApiAdaptor** to interact with Web API created with OData endpoint. The **WepApiAdaptor** is extended from the **ODataAdaptor**. Hence to use **WepApiAdaptor**, the endpoint should understand the OData formatted queries send along with request.
+You can use the **WebApiAdaptor** to interact with Web API created with OData endpoint. The **WebApiAdaptor** is extended from the **ODataAdaptor**. Hence to use **WebApiAdaptor**, the endpoint should understand the OData formatted queries send along with request.
To enable OData query option for Web API, please refer to the [`documentation`](https://docs.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options)
```typescript
import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';
-const SERVICE_URI = 'https://ej2services.syncfusion.com/angular/development/api/Orders';
+const SERVICE_URI = 'https://services.syncfusion.com/angular/production/api/Orders';
new DataManager({
url: SERVICE_URI,
@@ -126,7 +126,7 @@ new DataManager({
});
```
-**WepApiAdaptor** expects JSON response from the server and the response object should contain properties **Items** and **Count** whose values are collection of entities and total count of the entities respectively.
+**WebApiAdaptor** expects JSON response from the server and the response object should contain properties **Items** and **Count** whose values are collection of entities and total count of the entities respectively.
The sample response object should look like below.
@@ -281,14 +281,14 @@ export default resolvers;
The query parameters will be send in a string format which contains the below details.
-| Parameters | Description |
-|-----|-----|
+| Parameters | Description |
+| ---------------- | ----------------------------------------------------------------------------- |
| `RequiresCounts` | If it is `true` then the total count of records will be included in response. |
-| `Skip` | Holds the number of records to skip. |
-| `Take` | Holds the number of records to take. |
-| `Sorted` | Contains details about current sorted column and its direction. |
-| `Where` | Contains details about current filter column name and its constraints. |
-| `Group` | Contains details about current Grouped column names. |
+| `Skip` | Holds the number of records to skip. |
+| `Take` | Holds the number of records to take. |
+| `Sorted` | Contains details about current sorted column and its direction. |
+| `Where` | Contains details about current filter column name and its constraints. |
+| `Group` | Contains details about current Grouped column names. |
### Performing CRUD action with GraphQLAdaptor
diff --git a/ej2-angular/grid/connecting-to-adaptors/remote-save-adaptor.md b/ej2-angular/grid/connecting-to-adaptors/remote-save-adaptor.md
new file mode 100644
index 0000000000..2133ec22e2
--- /dev/null
+++ b/ej2-angular/grid/connecting-to-adaptors/remote-save-adaptor.md
@@ -0,0 +1,365 @@
+---
+layout: post
+title: Bind data & perform CRUD with RemoteSaveAdaptor in Syncfusion Grid
+description: Learn here all about how to bind data and perform CRUD action using RemoteSaveAdaptor in Syncfusion Angular Grid component.
+platform: ej2-angular
+control: grid
+keywords: Adaptors, RemoteSaveAdaptor, remotesave adaptor, remotedata
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Binding and perform CRUD operation using RemoteSaveAdaptor
+
+The RemoteSaveAdaptor in Syncfusion Angular Grid Component allows you to perform grid actions such as sorting, filtering, searching and paging primarily on the client-side while handling CRUD operations, such as updating, inserting, and removing data, on the server-side for data persistence. This approach optimizes your experience by minimizing unnecessary server interactions.
+
+Ensure your server-side implementation in ASP.NET Core handles CRUD operations. Here is an example of how you can set up your ASP.NET Core controller to handle these operations:
+
+**Server-Side Implementation**
+
+To configure a server with Syncfusion Angular Grid, you need to follow the below steps:
+
+**1. Project Creation:**
+
+Open Visual Studio and create an Angular and ASP.NET Core project named **RemoteSaveAdaptor**. To create an Angular and ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-angular?view=vs-2022) for detailed steps.
+
+**2. Model Class Creation:**
+
+Create a model class named **OrdersDetails.cs** in the server-side **Models** folder to represent the order data.
+
+```cs
+using System.ComponentModel.DataAnnotations;
+
+namespace RemoteSaveAdaptor.Server.Models
+{
+ public class OrdersDetails
+ {
+ public static List order = new List();
+ public OrdersDetails()
+ {
+
+ }
+ public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.Verified = Verified;
+ this.OrderDate = OrderDate;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ this.ShippedDate = ShippedDate;
+ this.ShipAddress = ShipAddress;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count() == 0)
+ {
+ int code = 10000;
+ for (int i = 1; i <= 2000; i++)
+ {
+ order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+ order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
+ order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+ order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
+ order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+ code += 5;
+ }
+ }
+ return order;
+ }
+ [Key]
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string ShipCity { get; set; }
+ public bool Verified { get; set; }
+ public DateTime OrderDate { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public string ShipAddress { get; set; }
+ }
+}
+
+```
+
+**3. API Controller Creation:**
+
+Create a file named `OrdersController.cs` under the **Controllers** folder. This controller will handle data communication with the Angular Grid component.
+
+```cs
+using Microsoft.AspNetCore.Mvc;
+using RemoteSaveAdaptor.Server.Models;
+
+namespace RemoteSaveAdaptor.Server.Controllers
+{
+ [ApiController]
+ public class OrdersController : Controller
+ {
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post()
+ {
+ // Retrieve data from the data source (e.g., database)
+ IQueryable DataSource = GetOrderData().AsQueryable();
+
+ // Get the total records count
+ int totalRecordsCount = DataSource.Count();
+
+ // Return data based on the request
+ return new { result = DataSource, count = totalRecordsCount };
+ }
+
+ [HttpGet]
+ [Route("api/[controller]")]
+ public List GetOrderData()
+ {
+ var data = OrdersDetails.GetAllRecords().ToList();
+ return data;
+ }
+ }
+}
+```
+
+The below class is used to structure data sent during CRUD operations.
+
+```cs
+ public class CRUDModel where T : class
+ {
+ public string? action { get; set; }
+ public string? keyColumn { get; set; }
+ public object? key { get; set; }
+ public T? value { get; set; }
+ public List? added { get; set; }
+ public List? changed { get; set; }
+ public List? deleted { get; set; }
+ public IDictionary? @params { get; set; }
+ }
+```
+
+**Insert operation:**
+
+To insert a new record, utilize the [insertUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_InsertUrl) property to specify the controller action mapping URL for the insert operation. Implement the `Insert` method in the API controller to handle the insertion of new records.The newly added record details are bound to the **newRecord** parameter.
+
+
+
+```cs
+ ///
+ /// Inserts a new data item into the data collection.
+ ///
+ /// The order to be inserted.
+ /// It returns the newly inserted record detail.
+ [HttpPost]
+ [Route("api/Orders/Insert")]
+ public ActionResult Insert([FromBody] CRUDModel newRecord)
+ {
+ if (newRecord.value !=null)
+ {
+ OrdersDetails.GetAllRecords().Insert(0, newRecord.value);
+ }
+
+ return Json(newRecord.value);
+ }
+```
+
+**Update operation:**
+
+For updating existing records, use the [updateUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_UpdateUrl) property to specify the controller action mapping URL for the update operation. Implement the Update method in the API controller to handle record updates. The updated record details are bound to the **updatedRecord** parameter.
+
+
+
+```cs
+ ///
+ /// Updates an existing order.
+ ///
+ /// The updated order details.
+ /// It returns the updated order details.
+ [HttpPost]
+ [Route("api/Orders/Update")]
+ public object Update([FromBody] CRUDModel updatedRecord)
+ {
+ var updatedOrder = updatedRecord.value;
+ if (updatedOrder != null)
+ {
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == updatedOrder.OrderID);
+ if (data != null)
+ {
+ // Update the existing record
+ data.OrderID = updatedOrder.OrderID;
+ data.CustomerID = updatedOrder.CustomerID;
+ data.Freight = updatedOrder.Freight;
+ data.ShipCity = updatedOrder.ShipCity;
+ data.ShipCountry = updatedOrder.ShipCountry;
+ data.Verified = updatedOrder.Verified;
+ // Update other properties similarly
+ }
+ }
+ return updatedRecord;
+ }
+```
+
+**Delete operation**
+
+To delete existing records, use the [removeUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DataManager.html#Syncfusion_EJ2_DataManager_RemoveUrl) property to specify the controller action mapping URL for the delete operation. The primary key value of the deleted record is bound to the **deletedRecord** parameter.
+
+
+
+```cs
+ ///
+ /// Deletes an order.
+ ///
+ /// It contains the specific record detail which is need to be removed.
+ /// It returns the deleted record detail
+ [HttpPost]
+ [Route("api/Orders/Remove")]
+ public object Remove([FromBody] CRUDModel deletedRecord)
+ {
+ int orderId = int.Parse(deletedRecord.key.ToString()); // get key value from the deletedRecord
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(orderData => orderData.OrderID == orderId);
+ if (data != null)
+ {
+ // Remove the record from the data collection
+ OrdersDetails.GetAllRecords().Remove(data);
+ }
+ return deletedRecord;
+ }
+```
+
+**4. Run the Application:**
+
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
+
+After running the application, you can verify that the server-side API controller is successfully returning the order data in the URL(https://localhost:xxxx/api/Grid). Here **xxxx** denotes the port number.
+
+**Connecting a Syncfusion Angular Grid Component to a service**
+
+To integrate the Syncfusion Grid component into your Angular and ASP.NET Core project using Visual Studio, follow the below steps:
+
+**1: Install Syncfusion Package**
+
+Open your terminal in the project's root directory of client folder and install the required Syncfusion packages using npm:
+
+```bash
+npm install @syncfusion/ej2-angular-grids --save
+npm install @syncfusion/ej2-data --save
+```
+
+**2: Import Grid Module**
+
+Import the **GridModule** from the `@syncfusion/ej2-angular-grids` package:
+
+**Step 3: Adding CSS reference**
+
+Include the necessary CSS files in your `styles.css` file to style the Syncfusion Angular components:
+
+{% tabs %}
+{% highlight css tabtitle="styles.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-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4: Adding Syncfusion Component**
+
+In your component file (e.g., app.component.ts), import `DataManager` and `RemoteSaveAdaptor` from `@syncfusion/ej2-data`. Create a `DataManager` instance by following these steps:
+
+ * **Assign RemoteSaveAdaptor:** Set the `adaptor` property within the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/grid/#datasource) configuration to new RemoteSaveAdaptor(). This enables server-side CRUD operations for your grid.
+
+ * **Set DataSource Property:** Configure the `dataSource` property of your Syncfusion Angular Grid with a JSON object.
+
+ * **CRUD Operations Mapping:** CRUD operations within the grid can be mapped to server-side controller actions using specific properties:
+ * **insertUrl**: Specifies the URL for inserting new data.
+ * **removeUrl**: Specifies the URL for removing existing data.
+ * **updateUrl**: Specifies the URL for updating existing data.
+ * **crudUrl**: Specifies a single URL for all CRUD operations.
+ * **batchUrl**: Specifies the URL for batch editing.
+
+In this example, data is fetched by the server using `httpClient` get method and assign it to the `dataSource` property.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% raw %}
+import { Component, OnInit } from '@angular/core';
+import { DataManager, RemoteSaveAdaptor } from '@syncfusion/ej2-data';
+import { EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';
+import { HttpClient } from '@angular/common/http';
+
+const serviceUrl = 'https://localhost:xxxx/api/Grid'; // Replace your hosted server link
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+
+
+
+
+
+ `,
+ providers: []
+})
+export class AppComponent implements OnInit {
+
+ public data?: DataManager;
+ constructor(private http: HttpClient) { }
+ public editSettings: EditSettingsModel = {
+ allowEditing: true,
+ allowAdding: true,
+ allowDeleting: true,
+ newRowPosition: 'Top'
+ };
+
+ public toolbar: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
+
+ ngOnInit(): void {
+
+ this.http.get<[]>(serviceUrl)
+ .pipe()
+ .subscribe(value => {
+ this.data = new DataManager({
+ json: value,
+ updateUrl: serviceUrl + "/Update",
+ insertUrl: serviceUrl + "/Insert",
+ removeUrl: serviceUrl + "/Remove",
+ adaptor: new RemoteSaveAdaptor(),
+ });
+ });
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+> Replace https://localhost:xxxx/api/Orders with the actual URL of your API endpoint that provides the data in a consumable format (e.g., JSON).
+
+Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
+
+> Ensure your API service is configured to handle CORS (Cross-Origin Resource Sharing) if necessary.
+ ```cs
+ [program.cs]
+ builder.Services.AddCors(options =>
+ {
+ options.AddDefaultPolicy(builder =>
+ {
+ builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
+ });
+ });
+ var app = builder.Build();
+ app.UseCors();
+ ```
+
+> You can find the complete sample for the RemoteSaveAdaptor in [GitHub](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-angular-data-grid) repository.
diff --git a/ej2-angular/grid/connecting-to-adaptors/url-adaptor.md b/ej2-angular/grid/connecting-to-adaptors/url-adaptor.md
index 5a7f9ced19..29ba8442ec 100644
--- a/ej2-angular/grid/connecting-to-adaptors/url-adaptor.md
+++ b/ej2-angular/grid/connecting-to-adaptors/url-adaptor.md
@@ -225,7 +225,7 @@ export class AppComponent {
{% endhighlight %}
{% endtabs %}
-> Replace https://localhost:****/api/grid with the actual **URL** of your API endpoint that provides the data in a consumable format (e.g., JSON).
+> Replace https://localhost:xxxx/api/grid with the actual **URL** of your API endpoint that provides the data in a consumable format (e.g., JSON).
Run the application in Visual Studio. It will be accessible on a URL like **https://localhost:xxxx**.
diff --git a/ej2-angular/grid/images/remotesave-adaptor-delete.png b/ej2-angular/grid/images/remotesave-adaptor-delete.png
new file mode 100644
index 0000000000..b187b69f24
Binary files /dev/null and b/ej2-angular/grid/images/remotesave-adaptor-delete.png differ
diff --git a/ej2-angular/grid/images/remotesave-adaptor-insert.png b/ej2-angular/grid/images/remotesave-adaptor-insert.png
new file mode 100644
index 0000000000..4a1781fb5a
Binary files /dev/null and b/ej2-angular/grid/images/remotesave-adaptor-insert.png differ
diff --git a/ej2-angular/grid/images/remotesave-adaptor-update.png b/ej2-angular/grid/images/remotesave-adaptor-update.png
new file mode 100644
index 0000000000..eee856b1b9
Binary files /dev/null and b/ej2-angular/grid/images/remotesave-adaptor-update.png differ