diff --git a/blazor/datagrid/connecting-to-database/dapper.md b/blazor/datagrid/connecting-to-database/dapper.md
new file mode 100644
index 0000000000..44b1068f6e
--- /dev/null
+++ b/blazor/datagrid/connecting-to-database/dapper.md
@@ -0,0 +1,1171 @@
+---
+layout: post
+title: Bind Sql Data in Blazor DataGrid component using Dapper | Syncfusion
+description: Learn about consuming data using Dapper from SQL Server using Microsoft SQL Client, binding it to Syncfusion Component, and performing CRUD operations.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# connecting SQL data into Blazor DataGrid component using Dapper
+
+This section describes how to connect and retrieve data from a Microsoft SQL Server database using [Dapper](https://github.com/DapperLib/Dapper) and [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.6?_src=template) and bind it to the Blazor DataGrid component.
+
+Microsoft SQL Server database can be bound to the Blazor DataGrid component uisng `Dapper` in different ways (i.e.) using [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property, [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/custom-binding) feature and remote data binding using various adaptors. In this documentation, two approaches will be examined to connect a Microsoft SQL Server database to a Blazor DataGrid component using `Dapper`. 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.
+
+**Dapper**
+
+`Dapper` is an open-source and micro **ORM** (object-relational mapping) product developed by the StackOverflow team. It is very lightweight and straightforward to use with a project. It supports **PostgreSQL**, **MySQL**, **SQL** Server, and other databases.
+
+`Dapper` extends the [IDbConnection interface](https://learn.microsoft.com/en-us/dotnet/api/system.data.idbconnection?view=net-8.0), which provides an open data source connection supported by the .NET Framework. We also have to write queries when using `Dapper`. It’s simple to execute a SQL query on a database and have the results mapped to a C# domain class.
+
+ `Dapper` can be used to interact with a Microsoft SQL Server database in conjunction with **System.Data.SqlClient**.
+
+* **Using UrlAdaptor**
+
+The [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) 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 Blazor DataGrid component by connecting to an existing pre-configured API service linked to the Microsoft SQL Server database. While the Blazor DataGrid component supports various adaptors to fulfill this requirement, including [Web API](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor), [OData](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor), [ODataV4](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor), [Url](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor), and [GraphQL](https://blazor.syncfusion.com/documentation/data/adaptors#graphql-service-binding), 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 Blazor DataGrid component.
+
+* **Using CustomAdaptor**
+
+The [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/custom-binding) 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 `SfGrid` component locally using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_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 Blazor DataGrid component, a corresponding request with action details is sent to the `CustomAdaptor`. The Blazor DataGrid component 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 of the `DataResult` class for displaying in the Blazor DataGrid component. Additionally, for CRUD operations, predefined methods can be overridden to provide custom functionality. Further details on this can be found in the latter part of the documentation.
+
+## Binding data using Dapper from Microsoft SQL Server via an API service.
+
+This section describes step by step process how to use `Dapper` to retrieve data from a Microsoft SQL Server using an API service and bind it to the Blazor DataGrid component.
+
+### Creating an API service
+
+**1.** Open Visual Studio and create an ASP.NET Core Web App project type, naming it **MyWebService**. To create an ASP.NET Core Web application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022).
+
+**2.** To use `Dapper` and access the Microsoft SQL Server database in our Blazor application, we need to install the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.6?_src=template) and [Dapper](https://www.nuget.org/packages/Dapper) NuGet packages. To add **System.Data.SqlClient** and `Dapper` in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
+
+**3.** Create an API controller (aka, GridController.cs) file under **Controllers** folder that helps to establish data communication with the Blazor DataGrid component.
+
+**4** In the API controller (aka, GridController), a connection is established to Microsoft SQL Server within the **Get()** method using **SqlConnection** which implements the **IDbConnection** interface. The SQL query string to retrieve data from the database is prepared. Using `Dapper`, the query is executed and data is fetched directly into a list of `Order` objects. `Dapper` automates the mapping process, eliminating the need for manual mapping using **SqlDataAdapter** and **DataTable** as shown in the following code snippet.
+
+{% tabs %}
+{% highlight razor tabtitle="GridController.cs"%}
+using Microsoft.AspNetCore.Mvc;
+using Newtonsoft.Json;
+using Syncfusion.Blazor.Data;
+using Syncfusion.Blazor;
+using System.ComponentModel.DataAnnotations;
+using System.Data.SqlClient;
+using System.Data;
+using Dapper;
+using System.Text.Json;
+namespace MyWebService.Controllers
+{
+ [ApiController]
+ public class GridController : ControllerBase
+ {
+ public class Order
+ {
+ [Key]
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public decimal? Freight { get; set; }
+ public string? ShipCity { get; set; }
+ }
+
+ [Route("api/[controller]")]
+ public List GetOrderData()
+ {
+ //TODO: Enter the connectionstring of database
+ string ConnectionString = @"";
+ string Query = "SELECT * FROM dbo.Orders ORDER BY OrderID;";
+ //Create SQL Connection
+ using (IDbConnection Connection = new SqlConnection(ConnectionString))
+ {
+ Connection.Open();
+ // Dapper automatically handles mapping to your Order class
+ List orders = Connection.Query(Query).ToList();
+ return orders;
+ }
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**5.** Run the application and it will be hosted within the URL `https://localhost:xxxx`.
+
+**6.** Finally, the retrieved data from Microsoft SQL Server database using `Dapper` which is in the form of list of array can be found in an API controller available in the URL link `https://localhost:xxxx/api/Grid`, as shown in the browser page below.
+
+
+
+### Connecting Blazor DataGrid to an API service
+
+**1.** Create a simple Blazor DataGrid component by following steps. This section briefly explains about how to include [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/).
+
+**Prerequisites**
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+**Create a new Blazor Web App**
+
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+
+You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+
+**Install Syncfusion Blazor Grid and Themes NuGet in the Blazor Web App**
+
+To add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+
+If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion Blazor components NuGet packages within the client project.
+
+Alternatively, you can utilize the following package manager command to achieve the same.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
+> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+
+**Register Syncfusion Blazor Service**
+
+Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace.
+
+```cshtml
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Grids
+```
+
+Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion Blazor service in both **~/Program.cs** files of your web app.
+
+```cshtml
+
+....
+using Syncfusion.Blazor;
+....
+builder.Services.AddSyncfusionBlazor();
+....
+
+```
+
+**Add stylesheet and script resources**
+
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below:
+
+```html
+
+ ....
+
+
+....
+
+ ....
+
+
+```
+
+> * Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+> * In this Blazor Web app, set the `rendermode` as either **InteractiveServer** or **InteractiveAuto** as per your configuration.
+
+**2.** Map the hosted API's URL link `https://localhost:xxxx/api/Grid` to the Blazor DataGrid component in **Index.razor** by using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). To interact with remote data source, provide the endpoint `Url`.
+
+**3.** The `SfDataManager` offers multiple adaptor options to connect with remote database based on an API service. Below is an example of the [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) configuration where an API service are set up to return the resulting data in the `result` and `count` format.
+
+**4.** The `UrlAdaptor` acts as the base adaptor for interacting with remote data service. Most of the built-in adaptors are derived from the `UrlAdaptor`.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor"%}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor
+@using Microsoft.Data.SqlClient;
+
+
+
+
+
+
+
+
+
+ @{
+ var aggregate = (context as AggregateTemplateContext);
+
+
Sum: @aggregate.Sum
+
+ }
+
+
+
+
+
+
+
+
+ @{
+ var aggregate = (context as AggregateTemplateContext);
+
+
Average: @aggregate.Average
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ SfGrid Grid { get; set; }
+ public List Orders { get; set; }
+
+ public class Order
+ {
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public decimal Freight { get; set; }
+ public string ShipCity { get; set; }
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="GridController.cs"%}
+ public class GridController : ControllerBase
+ {
+ ///
+ /// Returns the data collection as result and count after performing data operations based on request from
+ ///
+ /// DataManagerRequest contains the information regarding searching, filtering, sorting, aggregates and paging which is handled on the Blazor DataGrid component side
+ /// The data collection's type is determined by how this method has been implemented.
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post([FromBody] DataManagerRequest DataManagerRequest)
+ {
+ IEnumerable DataSource = GetOrderData();
+ int TotalRecordsCount = DataSource.Cast().Count();
+ return new { result = DataSource, count = TotalRecordsCount };
+ }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+> In the above Blazor DataGrid component, [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching), [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting), [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering), [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging), [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) and CRUD-related properties have been enabled. The details on how to handle these actions are explained below.
+
+When you run the application, the resultant Blazor DataGrid component will look like this
+
+
+
+> * The Syncfusion Blazor DataGrid component provides built-in support for handling various data operations such as **searching**, **sorting**, **filtering**, **aggregate** and **paging** on the server-side. These operations can be handled using methods such as `PerformSearching`, `PerformFiltering`, `PerformSorting`, `PerformAggregation`, `PerformTake` and `PerformSkip` available in the **Syncfusion.Blazor.Data** package. Let's explore how to manage these data operations using the `UrlAdaptor`.
+> * In an API service project, add **Syncfusion.Blazor.Data** by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
+
+### Handling searching operation
+
+To handle searching operation, ensure that your API endpoint supports custom searching criteria. Implement the searching logic on the server-side using the [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo searching based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
+
+{% highlight razor %}
+
+[HttpPost]
+[Route("api/[controller]")]
+public object Post([FromBody] DataManagerRequest DataManagerRequest)
+{
+ IEnumerable DataSource = GetOrderData();
+ // Handling Searching in UrlAdaptor.
+ if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0)
+ {
+ // Searching
+ DataSource = DataOperations.PerformSearching(DataSource, DataManagerRequest.Search);
+ //Add custom logic here if needed and remove above method
+ }
+ int TotalRecordsCount = DataSource.Cast().Count();
+ return new { result = DataSource, count = TotalRecordsCount };
+}
+{% endhighlight %}
+
+### Handling filtering operation
+
+To handle filtering operation, ensure that your API endpoint supports custom filtering criteria. Implement the filtering logic on the server-side using the [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo filtering based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
+
+{% highlight razor %}
+[HttpPost]
+[Route("api/[controller]")]
+public object Post([FromBody] DataManagerRequest DataManagerRequest)
+{
+ IEnumerable DataSource = GetOrderData();
+ // Handling Filtering in UrlAdaptor.
+ if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0)
+ {
+ // Filtering
+ DataSource = DataOperations.PerformFiltering(DataSource, DataManagerRequest.Where, DataManagerRequest.Where[0].Operator);
+ //Add custom logic here if needed and remove above method
+ }
+ int TotalRecordsCount = DataSource.Cast().Count();
+ return new { result = DataSource, count = TotalRecordsCount };
+}
+
+{% endhighlight %}
+
+### Handling sorting operation
+
+To handle sorting operation, ensure that your API endpoint supports custom sorting criteria. Implement the sorting logic on the server-side using the [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo sorting based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
+
+{% highlight razor %}
+[HttpPost]
+[Route("api/[controller]")]
+public object Post([FromBody] DataManagerRequest DataManagerRequest)
+{
+ IEnumerable DataSource = GetOrderData();
+ // Handling Sorting in UrlAdaptor.
+ if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0)
+ {
+ // Sorting
+ DataSource = DataOperations.PerformSorting(DataSource, DataManagerRequest.Sorted);
+ //Add custom logic here if needed and remove above method
+ }
+ int TotalRecordsCount = DataSource.Cast().Count();
+ return new { result = DataSource, count = TotalRecordsCount };
+}
+{% endhighlight %}
+
+### Handling aggregate operation
+
+To handle aggregate operation, ensure that your API endpoint supports custom aggregate criteria. Implement the aggregate logic on the server-side using the [PerformAggregation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_PerformAggregation_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__) method from the [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) class. This allows the custom data source to undergo aggregate based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
+
+{% highlight razor %}
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post([FromBody] DataManagerRequest DataManagerRequest)
+ {
+ IEnumerable DataSource = GetOrderData();
+ int TotalRecordsCount = DataSource.Cast().Count();
+ // Handling Aggregation in UrlAdaptor.
+ IDictionary Aggregates = null;
+ if (DataManagerRequest.Aggregates != null)
+ {
+ // Aggregation
+ Aggregates = DataUtil.PerformAggregation(DataSource, DataManagerRequest.Aggregates);
+ //Add custom logic here if needed and remove above method
+ }
+ return new { result = DataSource, count = TotalRecordsCount, aggregates = Aggregates };
+ }
+{% endhighlight %}
+
+> The server-side management of the `PerformAggregation` method is necessary only for the [Footer Template](https://blazor.syncfusion.com/documentation/datagrid/footer-aggregate) aggregation. There is no need for explicit handling of the Aggregate operation for the [Group Footer template](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate#group-footer-aggregates) and [Group Caption template](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate#group-caption-aggregates).
+
+### Handling paging operation
+
+To handle paging operation, ensure that your API endpoint supports custom paging criteria. Implement the paging logic on the server-side using the [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake_System_Collections_IEnumerable_System_Int32_) and [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Collections_Generic_IEnumerable___0__System_Int32_) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo paging based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
+
+{% highlight razor %}
+[HttpPost]
+[Route("api/[controller]")]
+public object Post([FromBody] DataManagerRequest DataManagerRequest)
+{
+ IEnumerable DataSource = GetOrderData();
+ int TotalRecordsCount = DataSource.Cast().Count();
+ // Handling Paging in UrlAdaptor.
+ if (DataManagerRequest.Skip != 0)
+ {
+ // Paging
+ DataSource = DataOperations.PerformSkip(DataSource, DataManagerRequest.Skip);
+ //Add custom logic here if needed and remove above method
+ }
+ if (DataManagerRequest.Take != 0)
+ {
+ DataSource = DataOperations.PerformTake(DataSource, DataManagerRequest.Take);
+ //Add custom logic here if needed and remove above method
+ }
+ return new { result = DataSource, count = TotalRecordsCount };
+}
+{% endhighlight %}
+
+> For optimal performance, it is recommended to follow this sequence of operations(Searching, Filtering, Sorting, Aggregate and Paging) in the [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method.
+
+### Handling CRUD operations
+
+To enable editing in this Blazor DataGrid component, utilize the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) component. The Blazor DataGrid offers multiple edit modes including the [Inline/Normal](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing), [Dialog](https://blazor.syncfusion.com/documentation/datagrid/dialog-editing), and [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) editing. For more details, refer to the Blazor DataGrid component [editing](https://blazor.syncfusion.com/documentation/datagrid/editing) documentation.
+
+In this scenario, the inline edit `Mode` and [Toolbar](https://blazor.syncfusion.com/documentation/datagrid/tool-bar) property are configured to display toolbar items for editing purposes.
+
+{% tabs %}
+{% highlight razor %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+> * Normal/Inline editing is the default edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the Blazor DataGrid component. To enable CRUD operations, ensure that the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is set to **true** for a specific `GridColumn`, ensuring that its value is unique.
+> * If database has an Autogenerated column, ensure to define [IsIdentity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsIdentity) property of `GridColumn` to disable them during adding or editing operations.
+
+**Insert Operation:**
+
+To insert a new row, simply click the **Add** toolbar button. The new record edit form will be displayed as shown below. Upon clicking the **Update** toolbar button, the record will be inserted into the Orders table by calling the following **POST** method of an API. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+
+{% tabs %}
+{% highlight c# tabtitle="OrdersController.cs" %}
+[HttpPost]
+[Route("api/Grid/Insert")]
+///
+/// Inserts a new data item into the data collection.
+///
+/// The set of information along with new record detail which is need to be inserted.
+/// Returns void
+public void Insert([FromBody] CRUDModel Value)
+{
+ //TODO: Enter the connectionstring of database
+ string ConnectionString = @"";
+ //Create query to insert the specific into the database by accessing its properties
+ string Query = "INSERT INTO Orders(CustomerID, Freight, ShipCity, EmployeeID) VALUES(@CustomerID, @Freight, @ShipCity, @EmployeeID)";
+ using (IDbConnection Connection = new SqlConnection(ConnectionString))
+ {
+ Connection.Open();
+ //Execute this code to reflect the changes into the database
+ Connection.Execute(Query, Value.Value);
+ }
+ //Add custom logic here if needed and remove above method
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Update Operation:**
+
+To edit a row, first select desired row and click the **Edit** toolbar button. The edit form will be displayed and proceed to modify any column value as per your requirement. Clicking the **Update** toolbar button will update the edit record in the Orders table by involving the following **Post** method of an API. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+
+{% tabs %}
+{% highlight c# tabtitle="OrdersController.cs" %}
+[HttpPost]
+[Route("api/Grid/Update")]
+///
+/// Update a existing data item from the data collection.
+///
+/// The set of information along with updated record detail which is need to be updated.
+/// Returns void
+public void Update([FromBody] CRUDModel Value)
+{
+ //TODO: Enter the connectionstring of database
+ string ConnectionString = @"";
+ //Create query to update the changes into the database by accessing its properties
+ string Query = "UPDATE Orders SET CustomerID = @CustomerID, Freight = @Freight, ShipCity = @ShipCity, EmployeeID = @EmployeeID WHERE OrderID = @OrderID";
+ using (IDbConnection Connection = new SqlConnection(ConnectionString))
+ {
+ Connection.Open();
+ //Execute this code to reflect the changes into the database
+ Connection.Execute(Query, Value.Value);
+ }
+ //Add custom logic here if needed and remove above method
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Delete Operation:**
+
+To delete a row, simply select the desired row and click the **Delete** toolbar button. This action will trigger a **DELETE** request to an API, containing the primary key value of the selected record. As a result corresponding record will be removed from the Orders table. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+
+{% tabs %}
+{% highlight c# tabtitle="OrdersController.cs" %}
+ [HttpPost]
+[Route("api/Grid/Delete")]
+///
+/// Remove a specific data item from the data collection.
+///
+/// The set of information along with specific record detail which is need to be removed.
+/// Returns void
+public void Delete([FromBody] CRUDModel Value)
+{
+ //TODO: Enter the connectionstring of database
+ string ConnectionString = @"";
+ //Create query to remove the specific from database by passing the primary key column value.
+ string Query = "DELETE FROM Orders WHERE OrderID = @OrderID";
+ using (IDbConnection Connection = new SqlConnection(ConnectionString))
+ {
+ Connection.Open();
+ int orderID = Convert.ToInt32(Value.Key.ToString());
+ //Execute this code to reflect the changes into the database
+ Connection.Execute(Query, new { OrderID = orderID });
+ }
+ //Add custom logic here if needed and remove above method
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Batch Operation:**
+
+To perform batch operation, define the edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) as `Batch` and specify the [BatchUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_BatchUrl) property in the `SfDataManager`. Use the **Add** toolbar button to insert new row in batch editing mode. To edit a cell, double-click the desired cell and update the value as required. To delete a record, simply select the record and press the **Delete** toolbar button. Now, all CRUD operations will be executed in batch editing mode. Clicking the **Update** toolbar button will update the newly added, edited, or deleted records from the Orders table using a single API **POST** request. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+
+{% highlight razor %}
+ [HttpPost]
+[Route("api/Grid/Batch")]
+///
+/// Batchupdate (Insert, Update, Delete) a collection of data items from the data collection.
+///
+/// The set of information along with details about the CRUD actions to be executed from the database.
+/// Returns void
+public void Batch([FromBody] CRUDModel Value)
+{
+ //TODO: Enter the connectionstring of database
+ string ConnectionString = @"";
+ if (Value.Changed != null)
+ {
+ foreach (var Record in (IEnumerable)Value.Changed)
+ {
+ //Create query to update the changes into the database by accessing its properties
+ string Query = "UPDATE Orders SET CustomerID = @CustomerID, Freight = @Freight, ShipCity = @ShipCity, EmployeeID = @EmployeeID WHERE OrderID = @OrderID";
+ using (IDbConnection Connection = new SqlConnection(ConnectionString))
+ {
+ Connection.Open();
+ //Execute this code to reflect the changes into the database
+ Connection.Execute(Query, Record);
+ }
+ //Add custom logic here if needed and remove above method
+ }
+
+ }
+ if (Value.Added != null)
+ {
+ foreach (var Record in (IEnumerable)Value.Added)
+ {
+ //Create query to insert the specific into the database by accessing its properties
+ string Query = "INSERT INTO Orders (CustomerID, Freight, ShipCity, EmployeeID) VALUES (@CustomerID, @Freight, @ShipCity, @EmployeeID)";
+ using (IDbConnection Connection = new SqlConnection(ConnectionString))
+ {
+ Connection.Open();
+ //Execute this code to reflect the changes into the database
+ Connection.Execute(Query, Record);
+ }
+ //Add custom logic here if needed and remove above method
+ }
+ }
+ if (Value.Deleted != null)
+ {
+ foreach (var Record in (IEnumerable)Value.Deleted)
+ {
+ //Create query to remove the specific from database by passing the primary key column value.
+ string Query = "DELETE FROM Orders WHERE OrderID = @OrderID";
+ using (IDbConnection Connection = new SqlConnection(ConnectionString))
+ {
+ Connection.Open();
+ //Execute this code to reflect the changes into the database
+ Connection.Execute(Query, new { OrderID = Record.OrderID });
+ }
+ //Add custom logic here if needed and remove above method
+ }
+ }
+}
+{% endhighlight %}
+
+When you run the application, the resultant Blazor DataGrid component will look like this
+
+
+
+> Find the sample from this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-to-blazor-datagrid-component/tree/master/Binding%20MS%20SQL%20database%20using%20UrlAdaptor).
+
+## Binding data using Dapper from Microsoft SQL Server using CustomAdaptor
+
+This section describes step by step process how to use `Dapper` to retrieve data from a Microsoft SQL Server using `CustomAdaptor` and bind it to the Blazor DataGrid component.
+
+**1.** To create a simple Blazor DataGrid component, the procedure is explained in the above-mentioned topic on [Connecting Blazor DataGrid to an API service](#connecting-blazor-datagrid-to-an-api-service)
+
+> * In this Blazor Web app, set the `rendermode` as either **InteractiveServer** or **InteractiveAuto** as per your configuration.
+
+**2.** To use `Dapper` and access the Microsoft SQL Server database in our Blazor application, we need to install the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.6?_src=template) and [Dapper](https://www.nuget.org/packages/Dapper) NuGet packages. To add **System.Data.SqlClient** and `Dapper` in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
+
+**3.** If you intend to inject your own service into the `CustomAdaptor` and utilize it, you can achieve this as follows.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@rendermode InteractiveServer
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor
+@using Microsoft.Data.SqlClient;
+
+
+
+
+
+
+
+
+
+ @{
+ var aggregate = (context as AggregateTemplateContext);
+
+
Sum: @aggregate.Sum
+
+ }
+
+
+
+
+
+
+
+
+ @{
+ var aggregate = (context as AggregateTemplateContext);
+
+
Average: @aggregate.Average
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ SfGrid Grid { get; set; }
+}
+{% endhighlight %}
+{% highlight razor tabtitle="Orderdata.cs"%}
+ public class Order
+ {
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public decimal Freight { get; set; }
+ public string ShipCity { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+**4.** Within the `CustomAdaptor’s` [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method, fetch the data from the service by calling the `GetOrdersAsync` method.
+
+* In this `GetOrdersAsync` method, a connection is established to Microsoft SQL Server using **SqlConnection** which implements the **IDbConnection** interface. The SQL query string to retrieve data from the database is prepared. Using `Dapper`, the query is executed and data is fetched directly into a list of `Order` objects. `Dapper` automates the mapping process, eliminating the need for manual mapping using **SqlDataAdapter** and **DataTable**
+
+* Finally, return the response as a `Result` and `Count` pair object in the `ReadAsync` method to bind the data to the Blazor DataGrid component.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@rendermode InteractiveServer
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor
+@using Microsoft.Data.SqlClient;
+
+
+
+
+
+
+
+
+
+ @{
+ var aggregate = (context as AggregateTemplateContext);
+
+
Sum: @aggregate.Sum
+
+ }
+
+
+
+
+
+
+
+
+ @{
+ var aggregate = (context as AggregateTemplateContext);
+
+
Average: @aggregate.Average
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ ///
+ /// Implementing CustomAdaptor by extending the class.
+ /// The Blazor DataGrid component support for custom data binding, which enables the binding and manipulation of data in a personalized way, using user-defined methods.
+ ///
+ public class CustomAdaptor : DataAdaptor
+ {
+ public OrderData OrderService = new OrderData();
+ ///
+ /// Returns the data collection after performing data operations based on request from
+ ///
+ /// DataManagerRequest contains the information regarding paging, grouping, filtering, searching, sorting which is handled on the Blazor DataGrid component side
+ /// An optional parameter that can be used to perform additional data operations.
+ /// The data collection's type is determined by how this method has been implemented.
+ public override async Task