UrlAdaptor in Syncfusion Blazor DataGrid
25 Apr 202524 minutes to read
The UrlAdaptor serves as the base adaptor for facilitating communication between remote data services and a UI component. It enables seamless data binding and interaction with custom API services or any remote service through URLs. The UrlAdaptor is particularly useful in 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, with the resultant data returned in the result and count format for display in the Syncfusion Blazor DataGrid.
This section describes a step-by-step process for retrieving data using the UrlAdaptor and binding it to the Blazor DataGrid to facilitate data and CRUD operations.
Creating an API Service
To configure a server with the Syncfusion Blazor DataGrid, follow these steps:
1. Create a Blazor web app
You can create a Blazor Web App named URLAdaptor using Visual Studio 2022, either via Microsoft Templates or the Syncfusion® Blazor Extension. Make sure to configure the appropriate interactive render mode and interactivity location.
2. Create a model class
Create a new folder named Models. Then, add a model class named OrdersDetails.cs in the Models folder to represent the order data.
namespace URLAdaptor.Models
{
public class OrdersDetails
{
public static List<OrdersDetails> order = new List<OrdersDetails>();
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<OrdersDetails> GetAllRecords()
{
if (order.Count() == 0)
{
int code = 10000;
for (int i = 1; i < 10; 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;
}
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. Create an API controller
Create an API controller (aka, GridController.cs) file under Controllers folder that helps to establish data communication with the Blazor DataGrid.
using Microsoft.AspNetCore.Mvc;
using Syncfusion.Blazor.Data;
using Syncfusion.Blazor;
using URLAdaptor.Models;
namespace URLAdaptor.Controllers
{
[ApiController]
public class GridController : ControllerBase
{
/// <summary>
/// Retrieves the list of orders.
/// </summary>
/// <returns>Retrieve data from the data source.</returns>
[HttpGet]
public List<OrdersDetails> GetOrderData()
{
return OrdersDetails.GetAllRecords().ToList();
}
/// <summary>
/// Handles server-side data operations such as filtering, sorting, paging, and returns the processed data.
/// </summary>
/// <returns>Returns the data and total count in result and count format.</returns>
[HttpPost]
[Route("api/[controller]")]
public object Post()
{
// Retrieve data source and convert to queryable.
IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
// Get total records count.
int totalRecordsCount = DataSource.Count();
// Return data and count.
return new { result = DataSource, count = totalRecordsCount };
}
}
}The GetOrderData method retrieves sample order data. Replace it with your custom logic to fetch data from a database or other sources.
4. Register controllers in Program.cs
Add the following lines in the Program.cs file to register controllers:
// Register controllers in the service container.
builder.Services.AddControllers();
// Map controller routes.
app.MapControllers();5. Run the application
Run the application in Visual Studio. The API will be accessible at a URL like https://localhost:xxxx/api/grid (where xxxx represents the port number). Please verify that the API returns the order data.
Connecting Syncfusion Blazor DataGrid to an API service
To integrate the Syncfusion Blazor DataGrid into your project using Visual Studio, follow the below steps:
1. Install Syncfusion Blazor DataGrid and Themes NuGet packages
To add the Blazor DataGrid 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 and Syncfusion.Blazor.Themes.
If your Blazor Web App uses WebAssembly or Auto render modes, install the Syncfusion Blazor NuGet packages in the client project.
Alternatively, use the following Package Manager commands:
Install-Package Syncfusion.Blazor.Grid -Version 29.1.33
Install-Package Syncfusion.Blazor.Themes -Version 29.1.33Syncfusion Blazor components are available on nuget.org. Refer to the NuGet packages topic for a complete list of available packages.
2. Register Syncfusion Blazor service
- Open the ~/_Imports.razor file and import the required namespaces.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids- Register the Syncfusion Blazor service in the ~/Program.cs file.
using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();For apps using WebAssembly or Auto (Server and WebAssembly) render modes, register the service in both ~/Program.cs files.
3. Add stylesheet and script resources
Include the theme stylesheet and script references in the ~/Components/App.razor file.
<head>
....
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
....
<body>
....
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>
- Refer to the Blazor Themes topic for various methods to include themes (e.g., Static Web Assets, CDN, or CRG).
- Set the render mode to InteractiveServer or InteractiveAuto in your Blazor Web App configuration.
4. Add Blazor DataGrid and configure with server
To connect the Blazor DataGrid to a hosted API, use the Url property of SfDataManager. Update the Index.razor file as follows.
The SfDataManager offers multiple adaptor options to connect with remote database based on an API service. Below is an example of the UrlAdaptor configuration where an API service are set up to return the resulting data in the result and count format.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using URLAdaptor.Models
<SfGrid TValue="OrderDetails" Height="348">
<SfDataManager Url="https://localhost:xxxx/api/grid" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
<GridColumns>
<GridColumn Field="OrderID" HeaderText="Order ID" Width="100" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="CustomerID" HeaderText="Customer Name" Width="100"></GridColumn>
<GridColumn Field="ShipCity" HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="120"></GridColumn>
</GridColumns>
</SfGrid>using Microsoft.AspNetCore.Mvc;
using Syncfusion.Blazor.Data;
using Syncfusion.Blazor;
using URLAdaptor.Models;
namespace URLAdaptor.Controllers
{
[ApiController]
public class GridController : ControllerBase
{
/// <summary>
/// Retrieves the list of orders.
/// </summary>
/// <returns>Retrieve data from the data source.</returns>
[HttpGet]
public List<OrdersDetails> GetOrderData()
{
return OrdersDetails.GetAllRecords().ToList();
}
/// <summary>
/// Handles server-side data operations such as searching, filtering, sorting, paging, and returns the processed data.
/// </summary>
/// <param name="DataManagerRequest">The request object contains data operation parameters such as search, filter, sort, and pagination details.</param>
/// <returns>Returns the data and total count in result and count format.</returns>
[HttpPost]
[Route("api/[controller]")]
public object Post()
{
// Retrieve data source and convert to queryable.
IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
// Get total records count.
int totalRecordsCount = DataSource.Count();
// Return data and count.
return new { result = DataSource, count = totalRecordsCount };
}
}
}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).
5. Run the application
When you run the application, the Blazor DataGrid will display data fetched from the API.
- The Syncfusion Blazor DataGrid supports server-side operations such as searching, sorting, filtering, aggregating, and paging. These can be handled using methods like PerformSearching, PerformFiltering, PerformSorting, PerformTake, and PerformSkip from 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 the searching operation, ensure that your API endpoint supports custom searching criteria. Implement the searching logic on the server side using the PerformSearching method from the DataOperations class. This allows the custom data source to undergo searching based on the criteria specified in the incoming DataManagerRequest object.
/// <summary>
/// Handles server-side data operations such as searching and returns the processed data.
/// </summary>
/// <param name="DataManagerRequest">The request object contains searched details.</param>
/// <returns>Returns a response containing the processed data and the total record count.</returns>
[HttpPost]
[Route("api/[controller]")]
public object Post([FromBody] DataManagerRequest DataManagerRequest)
{
// Retrieve data from the data source.
IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
// Handling searching operation.
if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0)
{
DataSource = DataOperations.PerformSearching(DataSource, DataManagerRequest.Search);
// Add custom logic here if needed and remove above method.
}
// Get the total records count.
int totalRecordsCount = DataSource.Count();
// Return data based on the request.
return new { result = DataSource, count = totalRecordsCount };
}@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using URLAdaptor.Models
<SfGrid TValue="OrdersDetails" Toolbar="@(new List<string>() { "Search" })" Height="348">
<SfDataManager Url="https://localhost:xxxx/api/grid" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
<GridColumns>
<GridColumn Field="OrderID" HeaderText="Order ID" Width="100" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="CustomerID" HeaderText="Customer Name" Width="100"></GridColumn>
<GridColumn Field="ShipCity" HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="120"></GridColumn>
</GridColumns>
</SfGrid>Handling filtering operation
To handle the filtering operation, ensure that your API endpoint supports custom filtering criteria. Implement the filtering logic on the server side using the PerformFiltering method from the DataOperations class. This allows the custom data source to undergo filtering based on the criteria specified in the incoming DataManagerRequest object.
Single column filtering
Multi column filtering
/// <summary>
/// Handles server-side data operations such as filtering and returns the processed data.
/// </summary>
/// <param name="DataManagerRequest">The request object contains filtered details.</param>
/// <returns>Returns a response containing the processed data and the total record count.</returns>
[HttpPost]
[Route("api/[controller]")]
public object Post([FromBody] DataManagerRequest DataManagerRequest)
{
// Retrieve data from the data source.
IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
// Handling filtering operation.
if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0)
{
foreach (var condition in DataManagerRequest.Where)
{
foreach (var predicate in condition.predicates)
{
DataSource = DataOperations.PerformFiltering(DataSource, DataManagerRequest.Where, predicate.Operator);
// Add custom logic here if needed and remove above method.
}
}
}
// Get the total records count.
int totalRecordsCount = DataSource.Count();
// Return data based on the request.
return new { result = DataSource, count = totalRecordsCount };
}@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using URLAdaptor.Models
<SfGrid TValue="OrdersDetails" AllowFiltering="true" Height="348">
<SfDataManager Url="https://localhost:xxxx/api/grid" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
<GridColumns>
<GridColumn Field="OrderID" HeaderText="Order ID" Width="100" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="CustomerID" HeaderText="Customer Name" Width="100"></GridColumn>
<GridColumn Field="ShipCity" HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="120"></GridColumn>
</GridColumns>
</SfGrid>Handling sorting operation
To handle the sorting operation, ensure that your API endpoint supports custom sorting criteria. Implement the sorting logic on the server side using the PerformSorting method from the DataOperations class. This allows the custom data source to undergo sorting based on the criteria specified in the incoming DataManagerRequest object.
Single column sorting
Multi column sorting
/// <summary>
/// Handles server-side data operations such as sorting and returns the processed data.
/// </summary>
/// <param name="DataManagerRequest">The request object contains sorted details.</param>
/// <returns>Returns a response containing the processed data and the total record count.</returns>
[HttpPost]
[Route("api/[controller]")]
public object Post([FromBody] DataManagerRequest DataManagerRequest)
{
// Retrieve data from the data source.
IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
// Handling sorting operation.
if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0)
{
DataSource = DataOperations.PerformSorting(DataSource, DataManagerRequest.Sorted);
// Add custom logic here if needed and remove above method.
}
// Get the total count of records.
int totalRecordsCount = DataSource.Count();
// Return data based on the request.
return new { result = DataSource, count = totalRecordsCount };
}@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using URLAdaptor.Models
<SfGrid TValue="OrdersDetails" AllowSorting="true" Height="348">
<SfDataManager Url="https://localhost:xxxx/api/grid" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
<GridColumns>
<GridColumn Field="OrderID" HeaderText="Order ID" Width="100" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="CustomerID" HeaderText="Customer Name" Width="100"></GridColumn>
<GridColumn Field="ShipCity" HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="120"></GridColumn>
</GridColumns>
</SfGrid>Handling paging operation
To handle the paging operation, ensure that your API endpoint supports custom paging criteria. Implement the paging logic on the server side using the PerformTake and PerformSkip methods from the DataOperations class. This allows the custom data source to undergo paging based on the criteria specified in the incoming DataManagerRequest object.
/// <summary>
/// Handles server-side data operations such as paging and returns the processed data.
/// </summary>
/// <param name="DataManagerRequest">The request object contains pagination details.</param>
/// <returns>Returns a response containing the processed data and the total record count.</returns>
[HttpPost]
[Route("api/[controller]")]
public object Post([FromBody] DataManagerRequest DataManagerRequest)
{
// Retrieve data from the data source.
IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
// Get the total records count.
int totalRecordsCount = DataSource.Count();
// Handling paging operation.
if (DataManagerRequest.Skip != 0)
{
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 data based on the request.
return new { result = DataSource, count = totalRecordsCount };
}@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using URLAdaptor.Models
<SfGrid TValue="OrdersDetails" AllowPaging="true" Height="348">
<SfDataManager Url="https://localhost:xxxx/api/grid" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
<GridColumns>
<GridColumn Field="OrderID" HeaderText="Order ID" Width="100" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="CustomerID" HeaderText="Customer Name" Width="100"></GridColumn>
<GridColumn Field="ShipCity" HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="120"></GridColumn>
</GridColumns>
</SfGrid>Handling CRUD operations
The Syncfusion Blazor DataGrid seamlessly integrates CRUD (Create, Read, Update, and Delete) operations with server-side controller actions through specific properties: InsertUrl, RemoveUrl, UpdateUrl, CrudUrl, and BatchUrl. These properties enable the Grid to communicate with the data service for every Grid action, facilitating server-side operations.
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.
To enable editing in Blazor DataGrid, refer to the editing documentation. In the example below, the inline edit Mode is enabled, and the Toolbar property is configured to display toolbar items for editing purposes.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using URLAdaptor.Models
<SfGrid TValue="OrdersDetails" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="348">
<SfDataManager Url="https://localhost:xxxx/api/grid" InsertUrl="https://localhost:xxxx/api/grid/Insert" UpdateUrl="https://localhost:xxxx/api/grid/Update" RemoveUrl="https://localhost:xxxx/api/grid/Remove" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="EditMode.Normal"></GridEditSettings>
<GridColumns>
<GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" Width="100" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="CustomerID" HeaderText="Customer Name" Width="100"></GridColumn>
<GridColumn Field="ShipCity" HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="120"></GridColumn>
</GridColumns>
</SfGrid>Normal/Inline editing is the default edit Mode for the Grid. To enable CRUD operations, ensure that the IsPrimaryKey property is set to true for a specific Grid column, ensuring that its value is unique.
The below class is used to structure data sent during CRUD operations.
public class CRUDModel<T> 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<T>? added { get; set; }
public List<T>? changed { get; set; }
public List<T>? deleted { get; set; }
public IDictionary<string, object>? @params { get; set; }
}Insert operation:
To insert a new record, use the InsertUrl property to specify the controller action mapping URL for the insert operation. The details of the newly added record are passed to the newRecord parameter.
/// <summary>
/// Inserts a new data item into the data collection.
/// </summary>
/// <param name="value">It contains the new record detail which is need to be inserted.</param>
/// <returns>Returns void.</returns>
[HttpPost]
[Route("api/[controller]/Insert")]
public void Insert([FromBody] CRUDModel<OrdersDetails> newRecord)
{
if (newRecord.value != null)
{
// Add the new record to the data collection.
OrdersDetails.GetAllRecords().Insert(0, newRecord.value);
}
}Update operation:
For updating existing records, use the UpdateUrl property to specify the controller action mapping URL for the update operation. The details of the updated record are passed to the updatedRecord parameter.
/// <summary>
/// Update a existing data item from the data collection.
/// </summary>
/// <param name="updatedRecord">It contains the updated record detail which is need to be updated.</param>
/// <returns>Returns void.</returns>
[HttpPost]
[Route("api/[controller]/Update")]
public void Update([FromBody] CRUDModel<OrdersDetails> 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.ShipCity = updatedOrder.ShipCity;
data.ShipCountry = updatedOrder.ShipCountry;
// Update other properties similarly.
}
}
}Delete operation:
To delete existing records, use the RemoveUrl property to specify the controller action mapping URL for the delete operation. The primary key value of the deleted record is passed to the deletedRecord parameter.
/// <summary>
/// Remove a specific data item from the data collection.
/// </summary>
/// <param name="deletedRecord">It contains the specific record detail which is need to be removed.</param>
/// <return>Returns void.</return>
[HttpPost]
[Route("api/[controller]/Remove")]
public void Remove([FromBody] CRUDModel<OrdersDetails> deletedRecord)
{
// Get the key value from the deletedRecord.
int orderId = int.Parse(deletedRecord.key.ToString());
var data = OrdersDetails.GetAllRecords().FirstOrDefault(orderData => orderData.OrderID == orderId);
if (data != null)
{
// Remove the record from the data collection.
OrdersDetails.GetAllRecords().Remove(data);
}
}
Single method for performing all CRUD operations:
Using the CrudUrl property, the controller action mapping URL can be specified to perform all CRUD operations on the server side using a single method, instead of specifying separate controller action methods for CRUD (Insert, Update, and Delete) operations.
The following code example illustrates this behavior.
/// <summary>
/// Handles CRUD (Create, Read, Update, and Delete) operations for a single request using the specified CRUD URL.
/// </summary>
/// <param name="request">An object containing the details of the record to be processed and the action to be performed (e.g., Create, Read, Update, and Delete).</param>
/// <returns>A response indicating the result of the CRUD operation, including success or failure details.</returns>
[HttpPost]
[Route("api/[controller]/CrudUpdate")]
public void CrudUpdate([FromBody] CRUDModel<OrdersDetails> request)
{
// Perform the update operation.
if (request.action == "update")
{
var orderValue = request.value;
OrdersDetails existingRecord = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == orderValue.OrderID);
if (existingRecord != null)
{
// Update the properties of the existing record.
existingRecord.OrderID = orderValue.OrderID;
existingRecord.CustomerID = orderValue.CustomerID;
existingRecord.ShipCity = orderValue.ShipCity;
existingRecord.ShipCountry = orderValue.ShipCountry;
// Update other properties as needed.
}
}
// Perform the insert operation.
else if (request.action == "insert")
{
// Add the new record to the data collection.
OrdersDetails.GetAllRecords().Insert(0, request.value);
}
// Perform the remove operation.
else if (request.action == "remove")
{
// Remove the record from the data collection.
OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == int.Parse(request.key.ToString())));
}
}@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using URLAdaptor.Models
<SfGrid TValue="OrdersDetails" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="348">
<SfDataManager Url="https://localhost:xxxx/api/grid" CrudUrl="https://localhost:xxxx/api/grid/CrudUpdate" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="EditMode.Normal"></GridEditSettings>
<GridColumns>
<GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" Width="100" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="CustomerID" HeaderText="Customer Name" Width="100"></GridColumn>
<GridColumn Field="ShipCity" HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="120"></GridColumn>
</GridColumns>
</SfGrid>Batch operation:
To perform batch operation, define the edit Mode as Batch and specify the BatchUrl property in the DataManager. 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 single request. Clicking the Update toolbar button will update the newly added, edited, or deleted records from the OrdersDetails table using a single API POST request.
/// <summary>
/// Handles CRUD operations when batch editing is enabled in the DataGrid.
/// </summary>
/// <param name="batchModel">The batch model containing the data changes to be processed.</param>
/// <returns>Returns the result of the CRUD operation.</returns>
[HttpPost]
[Route("api/[controller]/BatchUpdate")]
public IActionResult BatchUpdate([FromBody] CRUDModel<OrdersDetails> batchModel)
{
// Check if there are any added records in the batch model.
if (batchModel.added != null)
{
// Iterate through each added record.
foreach (var Record in batchModel.added)
{
// Insert the added record at the beginning of the existing records.
OrdersDetails.GetAllRecords().Insert(0, Record);
}
}
// Check if there are any changed records in the batch model.
if (batchModel.changed != null)
{
// Iterate through each changed record.
foreach (var changedOrder in batchModel.changed)
{
// Find the existing record that matches the changed record's "OrderID".
var existingOrder = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == changedOrder.OrderID);
if (existingOrder != null)
{
// Update the properties of the existing record.
existingOrder.OrderID = changedOrder.OrderID;
existingOrder.CustomerID = changedOrder.CustomerID;
existingOrder.ShipCity = changedOrder.ShipCity;
existingOrder.ShipCountry = changedOrder.ShipCity;
// Update other properties as needed.
}
}
}
// Check if there are any deleted records in the batch model.
if (batchModel.deleted != null)
{
// Iterate through each deleted record.
foreach (var deletedOrder in batchModel.deleted)
{
// Find the existing record that matches the deleted record's "OrderID".
var orderToDelete = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == deletedOrder.OrderID);
if (orderToDelete != null)
{
// Remove the matching record from the existing records.
OrdersDetails.GetAllRecords().Remove(orderToDelete);
}
}
}
// Return the updated batch model as a JSON result.
return new JsonResult(batchModel);
}@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using URLAdaptor.Models
<SfGrid TValue="OrdersDetails" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="348">
<SfDataManager Url="https://localhost:xxxx/api/grid" BatchUrl="https://localhost:xxxx/api/grid/BatchUpdate" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="EditMode.Batch"></GridEditSettings>
<GridColumns>
<GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" Width="100" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="CustomerID" HeaderText="Customer Name" Width="100"></GridColumn>
<GridColumn Field="ShipCity" HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="120"></GridColumn>
</GridColumns>
</SfGrid>