documentation(951750):Updated sample

JamunaSundaramSF3699 · JamunaSundaramSF3699 · commit c2705972cde8 · 2025-04-08T11:33:29.000+05:30
diff --git a/Binding Dapper using CustomAdaptor/README.md b/Binding Dapper using CustomAdaptor/README.md
@@ -0,0 +1,22 @@
+# Angular Grid SQL Server Connectivity using Dapper and CustomAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a SQL Server using Dapper (mapping tool) and CustomAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Add the `NORTHWIND.MDF` database located in the `App_Data` folder of the backend project to the application.
+
+3. Replace the connected database's connection string in the `GridController.cs` file.
+
+4. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+5. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+6. Build the project to restore dependencies and compile it.
+
+7. Run the project.
diff --git a/Binding Dapper using UrlAdaptor/README.md b/Binding Dapper using UrlAdaptor/README.md
@@ -0,0 +1,22 @@
+## Angular Grid SQL Server Connectivity using Dapper and URLAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a SQL Server using Dapper (mapping tool) and URLAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Add the `NORTHWIND.MDF` database located in the `App_Data` folder of the backend project to the application.
+
+3. Replace the connected database's connection string in the `GridController.cs` file.
+
+4. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+5. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+6. Build the project to restore dependencies and compile it.
+
+7. Run the project.
diff --git a/Binding MS SQL database using CustomAdaptor/Grid_MSSQL/Grid_MSSQL.Server/Controllers/GridController.cs b/Binding MS SQL database using CustomAdaptor/Grid_MSSQL/Grid_MSSQL.Server/Controllers/GridController.cs
@@ -11,7 +11,11 @@ public class GridController : ControllerBase
     {
 
         string ConnectionString = @"<Enter a valid connection string>";
-
+        /// <summary>
+        /// Processes the DataManager request to perform searching, filtering, sorting, and paging operations.
+        /// </summary>
+        /// <param name="DataManagerRequest">Contains the details of the data operation requested.</param>
+        /// <returns>Returns a JSON object with the filtered, sorted, and paginated data along with the total record count.</returns>
         [HttpPost]
         [Route("api/[controller]")]
         public object Post([FromBody] DataManagerRequest DataManagerRequest)
diff --git a/Binding MS SQL database using CustomAdaptor/README.md b/Binding MS SQL database using CustomAdaptor/README.md
@@ -0,0 +1,22 @@
+## Angular Grid Microsoft SQL Server connectivity using CustomAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a Microsoft SQL Server using CustomAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Add the `NORTHWIND.MDF` database located in the `App_Data` folder of the backend project to the application.
+
+3. Replace the connected database's connection string in the `GridController.cs` file.
+
+4. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+5. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+6. Build the project to restore dependencies and compile it.
+
+7. Run the project.
diff --git a/Binding MS SQL database using UrlAdaptor/README.md b/Binding MS SQL database using UrlAdaptor/README.md
@@ -0,0 +1,22 @@
+## Angular Grid Microsoft SQL Server connectivity using URLAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a Microsoft SQL Server using URLAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Add the `NORTHWIND.MDF` database located in the `App_Data` folder of the backend project to the application.
+
+3. Replace the connected database's connection string in the `GridController.cs` file.
+
+4. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+5. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+6. Build the project to restore dependencies and compile it.
+
+7. Run the project.
diff --git a/Binding MySQL database using CustomAdaptor/README.md b/Binding MySQL database using CustomAdaptor/README.md
@@ -0,0 +1,20 @@
+## Angular Grid MYSQL connectivity using CustomAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a MYSQL Server using CustomAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Replace the connected database's connection string in the `GridController.cs` file.
+
+3. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+4. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+5. Build the project to restore dependencies and compile it.
+
+6. Run the project.
diff --git a/Binding MySQL database using UrlAdaptor/README.md b/Binding MySQL database using UrlAdaptor/README.md
@@ -0,0 +1,20 @@
+## Angular Grid MYSQL connectivity using URLAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a MYSQL Server using URLAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Replace the connected database's connection string in the `GridController.cs` file.
+
+3. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+4. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+5. Build the project to restore dependencies and compile it.
+
+6. Run the project.
diff --git a/Binding PostgreSQL database using CustomAdaptor/Grid_PostgreSQL_Custom/Grid_PostgreSQL_Custom.Server/Controllers/GridController.cs b/Binding PostgreSQL database using CustomAdaptor/Grid_PostgreSQL_Custom/Grid_PostgreSQL_Custom.Server/Controllers/GridController.cs
@@ -16,7 +16,7 @@ public class GridController : ControllerBase
         /// Processes the DataManager request to perform searching, filtering, sorting, and paging operations.
         /// </summary>
         /// <param name="DataManagerRequest">Contains the details of the data operation requested.</param>
-        /// <returns>Returns a JSON object along with the total record count.</returns>
+        /// <returns>Returns a JSON object with the filtered, sorted, and paginated data along with the total record count.</returns>
         [HttpPost]
         [Route("api/[controller]")]
         public object Post([FromBody] DataManagerRequest DataManagerRequest)
diff --git a/Binding PostgreSQL database using CustomAdaptor/README.md b/Binding PostgreSQL database using CustomAdaptor/README.md
@@ -0,0 +1,20 @@
+## Angular Grid PostgreSQL Server connectivity using CustomAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a PostgreSQL Server using CustomAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Replace the connected database's connection string in the `GridController.cs` file.
+
+3. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+4. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+5. Build the project to restore dependencies and compile it.
+
+6. Run the project.
diff --git a/Binding PostgreSQL database using UrlAdaptor/Grid_PostgreSQL/Grid_PostgreSQL.Server/Controllers/GridController.cs b/Binding PostgreSQL database using UrlAdaptor/Grid_PostgreSQL/Grid_PostgreSQL.Server/Controllers/GridController.cs
@@ -18,8 +18,8 @@ public class GridController : ControllerBase
         /// Processes the DataManager request to perform searching, filtering, sorting, and paging operations.
         /// </summary>
         /// <param name="DataManagerRequest">Contains the details of the data operation requested.</param>
-        /// <returns>Returns a JSON object along with the total record count.</returns>
-        [HttpPost]
+        /// <returns>Returns a JSON object with the filtered, sorted, and paginated data along with the total record count.</returns>
+      [HttpPost]
         [Route("api/[controller]")]
         public object Post([FromBody] DataManagerRequest DataManagerRequest)
         {
diff --git a/Binding PostgreSQL database using UrlAdaptor/README.md b/Binding PostgreSQL database using UrlAdaptor/README.md
@@ -0,0 +1,20 @@
+## Angular Grid PostgreSQL Server connectivity using URLAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a PostgreSQL Server using URLAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Replace the connected database's connection string in the `GridController.cs` file.
+
+3. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+4. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+5. Build the project to restore dependencies and compile it.
+
+6. Run the project.
diff --git a/Binding SQL database using EF and CustomAdaptor/Grid_EntityFramework/Grid_EntityFramework.Server/Controllers/GridController.cs b/Binding SQL database using EF and CustomAdaptor/Grid_EntityFramework/Grid_EntityFramework.Server/Controllers/GridController.cs
@@ -19,7 +19,7 @@ public class GridController : ControllerBase
         /// Processes the DataManager request to perform searching, filtering, sorting, and paging operations.
         /// </summary>
         /// <param name="DataManagerRequest">Contains the details of the data operation requested.</param>
-        /// <returns>Returns a JSON object along with the total record count.</returns>
+        /// <returns>Returns a JSON object with the filtered, sorted, and paginated data along with the total record count.</returns>
         [HttpPost]
         [Route("api/[controller]")]
         public object Post([FromBody] DataManagerRequest DataManagerRequest)
diff --git a/Binding SQL database using EF and CustomAdaptor/README.md b/Binding SQL database using EF and CustomAdaptor/README.md
@@ -0,0 +1,22 @@
+## Angular Grid SQL Server connectivity using Entity Framework and CustomAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a SQL Server using Entity Framework and CustomAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Add the `NORTHWIND.MDF` database located in the `App_Data` folder of the backend project to the application.
+
+3. Replace the connected database's connection string in the `GridController.cs` file.
+
+4. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+5. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+6. Build the project to restore dependencies and compile it.
+
+7. Run the project.
diff --git a/Binding SQL database using EF and UrlAdaptor/Grid_EntityFramework/Grid_EntityFramework.Server/Controllers/GridController.cs b/Binding SQL database using EF and UrlAdaptor/Grid_EntityFramework/Grid_EntityFramework.Server/Controllers/GridController.cs
@@ -20,7 +20,7 @@ public class GridController : ControllerBase
         /// Processes the DataManager request to perform searching, filtering, sorting, and paging operations.
         /// </summary>
         /// <param name="DataManagerRequest">Contains the details of the data operation requested.</param>
-        /// <returns>Returns a JSON object along with the total record count.</returns>
+        /// <returns>Returns a JSON object with the filtered, sorted, and paginated data along with the total record count.</returns>
         [HttpPost]
         [Route("api/[controller]")]
         public object Post([FromBody] DataManagerRequest DataManagerRequest)
diff --git a/Binding SQL database using EF and UrlAdaptor/README.md b/Binding SQL database using EF and UrlAdaptor/README.md
@@ -0,0 +1,22 @@
+## Angular Grid SQL Server Connectivity using Entity Framework and URLAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a SQL Server using Entity Framework and URLdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Add the `NORTHWIND.MDF` database located in the `App_Data` folder of the backend project to the application.
+
+3. Replace the connected database's connection string in the `GridController.cs` file.
+
+4. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+5. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+6. Build the project to restore dependencies and compile it.
+
+7. Run the project.
diff --git a/Binding SQLite using CustomAdaptor/Grid_SQLite/Grid_SQLite.Server/Controllers/GridController.cs b/Binding SQLite using CustomAdaptor/Grid_SQLite/Grid_SQLite.Server/Controllers/GridController.cs
@@ -16,7 +16,7 @@ public class GridController : ControllerBase
         /// Processes the DataManager request to perform searching, filtering, sorting, and paging operations.
         /// </summary>
         /// <param name="DataManagerRequest">Contains the details of the data operation requested.</param>
-        /// <returns>Returns a JSON object along with the total record count.</returns>
+        /// <returns>Returns a JSON object with the filtered, sorted, and paginated data along with the total record count.</returns>
         [HttpPost]
         [Route("api/[controller]")]
         public object Post([FromBody] DataManagerRequest DataManagerRequest)
diff --git a/Binding SQLite using CustomAdaptor/README.md b/Binding SQLite using CustomAdaptor/README.md
@@ -0,0 +1,20 @@
+## Angular Grid SQLite database connectivity using CustomAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a SQLite database using CustomAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Replace the SQLite database's connection string in the `GridController.cs` file.
+
+3. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+4. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+5. Build the project to restore dependencies and compile it.
+
+6. Run the project.
diff --git a/Binding SQLite using UrlAdaptor/Grid_SQLite/Grid_SQLite.Server/Controllers/GridController.cs b/Binding SQLite using UrlAdaptor/Grid_SQLite/Grid_SQLite.Server/Controllers/GridController.cs
@@ -16,7 +16,7 @@ public class GridController : ControllerBase
         /// Processes the DataManager request to perform searching, filtering, sorting, and paging operations.
         /// </summary>
         /// <param name="DataManagerRequest">Contains the details of the data operation requested.</param>
-        /// <returns>Returns a JSON object along with the total record count.</returns>
+        /// <returns>Returns a JSON object with the filtered, sorted, and paginated data along with the total record count.</returns>
         [HttpPost]
         [Route("api/[controller]")]
         public object Post([FromBody] DataManagerRequest DataManagerRequest)
diff --git a/Binding SQLite using UrlAdaptor/README.md b/Binding SQLite using UrlAdaptor/README.md
@@ -0,0 +1,20 @@
+## Angular Grid SQLite database connectivity using URLAdaptor
+
+A project that enables data binding and CRUD action handling in the Syncfusion Angular Grid to a SQLite database using URLAdaptor feature of the Grid.
+
+## Steps to Run the Sample
+
+1. Download or unzip the project and open the project in **Visual Studio 2022**.
+
+2. Replace the SQLite database's connection string in the `GridController.cs` file.
+
+3. In the Angular client project, open `app.component.ts` and replace the port number in the API URL where it says `xxxx` with the actual backend server port.
+
+4. Navigate to the client project folder and run the following command:
+
+   ```bash
+   npm install
+   ```
+5. Build the project to restore dependencies and compile it.
+
+6. Run the project.
diff --git a/README.md b/README.md
@@ -1,2 +1,22 @@
-# connecting-databases-to-angular-grid-component
-A suite of projects that enable data binding and CRUD action handling in the Syncfusion Angular Grid from various databases using CustomAdaptor and UrlAdaptor.
+# Connecting Database to Syncfusion Angular Grid
+
+This section describes how to connect and retrieve data from a Microsoft SQL Server database using [Microsoft.Data.SqlClient](https://www.nuget.org/packages/Microsoft.Data.SqlClient) and bind it to the Syncfusion Angular Grid.
+
+Microsoft SQL Server database can be bound to the Grid in different ways (i.e.) using `dataSource` property, custom adaptor and remote data binding using various adaptors. In this documentation, two approaches will be examined to connect a Microsoft SQL Server database to a Grid. Both the approaches have capability to handle data and CRUD operations with built-in methods as well as can be customized as per your own. 
+
+**1. Using UrlAdaptor**
+
+The [UrlAdaptor](https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-adaptors/url-adaptor?cs-save-lang=1&cs-lang=csharp) serves as the base adaptor for facilitating communication between remote data services and an UI component. It enables the remote binding of data to the Syncfusion Angular Grid by connecting to an existing pre-configured API service linked to the Microsoft SQL Server database. While the Grid supports various adaptors to fulfill this requirement, including [Web API](https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-adaptors/web-api-adaptor), [ODataV4](https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-adaptors/odatav4-adaptor), [UrlAdaptor](https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-adaptors/url-adaptor?cs-save-lang=1&cs-lang=csharp), and [GraphQL](https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-adaptors/graphql-adaptor), the `UrlAdaptor` is particularly useful for the scenarios where a custom API service with unique logic for handling data and CRUD operations is in place. This approach allows for custom handling of data and CRUD operations, and the resultant data returned in the `result` and `count` format for display in the Grid.
+
+**2. Using CustomAdaptor**
+
+The [CustomAdaptor](https://ej2.syncfusion.com/angular/documentation/grid/connecting-to-adaptors/custom-adaptor) serves as a mediator between the UI component and the database for data binding. While the data source from the database can be directly bound to the Syncfusion Angular Grid locally using the `dataSource` property, the `CustomAdaptor` approach is preferred as it allows for customization of both data operations and CRUD operations according to specific requirements. In this approach, for every action in the Grid, a corresponding request with action details is sent to the `CustomAdaptor`. The Grid provides predefined methods to perform data operations such as **searching**, **filtering**, **sorting**, **aggregation**, **paging** and **grouping**. Alternatively, your own custom methods can be employed to execute operations and return the data in the `result` and `count` format for displaying in the Grid. Additionally, for CRUD operations, predefined methods can be overridden to provide custom functionality. Further details on this can be found in the later part of the documentation.
+
+Here, we have explained in detail how to bind the listed databases below to the Blazor DataGrid component using CustomAdaptor and UrlAdaptor.
+
+1. Microsoft SQL Server Database
+2. MYSQL Database
+3. PostgreSQL Database
+4. Dapper
+5. SQLite
+6. Entity Framework
