diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/odatav4-adaptor.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/odatav4-adaptor.md new file mode 100644 index 0000000000..953f70f01f --- /dev/null +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/odatav4-adaptor.md @@ -0,0 +1,611 @@ +--- +layout: post +title: ODataV4Adaptor in Syncfusion ##Platform_Name## Grid Component +description: Learn here all about Bind data and perform CRUD action with ODataV4Adaptor in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: grid +keywords: Adaptors, ODataV4Adaptor, ODataV4 adaptor, remotedata +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# ODataV4Adaptor in Syncfusion ASP.NET Core Grid Component + +The `ODataV4Adaptor` in the Syncfusion ASP.NET Core Grid Component allows seamless integration of the ASP.NET Core Grid with OData v4 services, enabling efficient data fetching and manipulation. This guide provides detailed instructions on binding data and performing CRUD (Create, Read, Update, Delete) actions using the `ODataV4Adaptor` in your Syncfusion ASP.NET Core Grid Component. + +## Creating an OData service + +To configure a server with Syncfusion ASP.NET Core Grid, you need to follow the below steps: + +**1. Project Creation:** + +Open Visual Studio and create an ASP.NET Core project named **ODataV4Adaptor**. To create an ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) for detailed steps. + +**2. Install NuGet Packages** + +Using the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), install the `Microsoft.AspNetCore.OData` NuGet package. + +**3. Model Class Creation:** + +Create a model class named **OrdersDetails.cs** in the server-side **Models** folder to represent the order data. + +{% tabs %} +{% highlight cs tabtitle="OrdersDetails.cs" %} + +using System.ComponentModel.DataAnnotations; + +namespace ODataV4Adaptor.Server.Models +{ + public class OrdersDetails + { + public static List order = new List(); + public OrdersDetails() + { + + } + public OrdersDetails( + int OrderID, string CustomerId, int EmployeeId, string ShipCountry) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.ShipCountry = ShipCountry; + } + + public static List GetAllRecords() + { + if (order.Count() == 0) + { + int code = 10000; + for (int i = 1; i < 10; i++) + { + order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, "Denmark")); + order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, "Brazil")); + order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, "Germany")); + order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, "Austria")); + order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, "Switzerland")); + code += 5; + } + } + return order; + } + [Key] + public int? OrderID { get; set; } + public string? CustomerID { get; set; } + public int? EmployeeID { get; set; } + public string? ShipCountry { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +**4. Build the Entity Data Model** + +To construct the Entity Data Model for your OData service, utilize the `ODataConventionModelBuilder` to define the model's structure. Start by creating an instance of the `ODataConventionModelBuilder`, then register the entity set **Orders** using the `EntitySet` method, where `OrdersDetails` represents the CLR type containing order details. + +```cs +using ODataV4Adaptor.Models; +using Microsoft.AspNetCore.OData; +using Microsoft.OData.ModelBuilder; + +// Create an ODataConventionModelBuilder to build the OData model +var modelBuilder = new ODataConventionModelBuilder(); + +// Register the "Orders" entity set with the OData model builder +modelBuilder.EntitySet("Orders"); +``` + +**5. Register the OData Services** + +Once the Entity Data Model is built, you need to register the OData services in your ASP.NET Core application. Here's how: + +```cs +// Add controllers with OData support to the service collection +builder.Services.AddControllers().AddOData( + options => options + .Count() + .AddRouteComponents("odata", modelBuilder.GetEdmModel())); +``` +**6. Add controllers** + +Finally, add controllers to expose the OData endpoints. Here's an example: + +```cs +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.OData.Query; +using ODataV4Adaptor.Server.Models; + +namespace ODataV4Adaptor.Server.Controllers +{ + [Route("[controller]")] + [ApiController] + public class OrdersController : ControllerBase + { + /// + /// Retrieves all orders. + /// + /// The collection of orders. + [HttpGet] + [EnableQuery] + public IActionResult Get() + { + var data = OrdersDetails.GetAllRecords().AsQueryable(); + return Ok(data); + } + } +} +``` + +**7. 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/odata/Orders). Here **xxxx** denotes the port number. + +## Connecting syncfusion grid to an api service + +To integrate the Syncfusion Grid control into your ASP.NET Core project using Visual Studio, follow these steps: + +**Step 1:** Install ASP.NET Core package in the application: + +To add `ASP.NET Core` controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for `Syncfusion.EJ2.AspNet.Core` and then install it. Alternatively, you can utilize the following package manager command to achieve the same. + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +**Step 2:** Add Syncfusion ASP.NET Core Tag Helper + +Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. + +{% tabs %} +{% highlight C# tabtitle="~/_ViewImports.cshtml" %} + +@addTagHelper *, Syncfusion.EJ2 + +{% endhighlight %} +{% endtabs %} + +**Step 3:** Add stylesheet and script resources + +Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +**Step 4:** Register Syncfusion Script Manager + +Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + + +{% endhighlight %} +{% endtabs %} + +**Step 5:** Add ASP.NET Core Grid control + +Now, add the Syncfusion ASP.NET Core Grid tag helper in `~/Pages/Index.cshtml` page. + +{% tabs %} +{% highlight cshtml tabtitle="Index.cshtml" %} + + + //Here xxxx represents the port number + + + + + + + +{% endhighlight %} +{% endtabs %} + +**Step 6:** Configure the server + +In the `Program.cs` file of your project, configure the server to serve static files by adding the following code: + +```cs +builder.Services.AddRazorPages(); +builder.Services.AddControllers(); + +var app = builder.Build(); + +app.MapRazorPages(); +app.MapControllers(); +``` + +**Step 7:** Run the Project + +Now, run the project to see the Syncfusion Grid connected to the API service in action. + +> Replace https://localhost:xxxx/odata/Orders with the actual **URL** of your API endpoint that provides the data in a consumable format (e.g., JSON). + +## Handling searching operation + +To enable search operations in your web application using OData, you first need to configure the OData support in your service collection. This involves adding the `Filter` method within the OData setup, allowing you to filter data based on specified criteria. Once enabled, clients can utilize the **$filter** query option in their requests to search for specific data entries. + +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} +// Create a new instance of the web application builder +var builder = WebApplication.CreateBuilder(args); + +// Create an ODataConventionModelBuilder to build the OData model +var modelBuilder = new ODataConventionModelBuilder(); + +// Register the "Orders" entity set with the OData model builder +modelBuilder.EntitySet("Orders"); + +// Add services to the container. + +// Add controllers with OData support to the service collection +builder.Services.AddControllers().AddOData( + options => options + .Count() + .Filter() //searching + .AddRouteComponents("odata", modelBuilder.GetEdmModel())); +{% endhighlight %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + //Here xxxx represents the port number + + + + + + + + +{% endhighlight %} +{% endtabs %} + +![Searching query](../images/adaptors/odatav4-adaptor-searching.png) + +## Handling filtering operation + +To enable filter operations in your web application using OData, you first need to configure the OData support in your service collection. This involves adding the `Filter` method within the OData setup, allowing you to filter data based on specified criteria. Once enabled, clients can utilize the **$filter** query option in your requests to filter for specific data entries. + +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} +// Create a new instance of the web application builder +var builder = WebApplication.CreateBuilder(args); + +// Create an ODataConventionModelBuilder to build the OData model +var modelBuilder = new ODataConventionModelBuilder(); + +// Register the "Orders" entity set with the OData model builder +modelBuilder.EntitySet("Orders"); + +// Add services to the container. + +// Add controllers with OData support to the service collection +builder.Services.AddControllers().AddOData( + options => options + .Count() + .Filter() // filtering + .AddRouteComponents("odata", modelBuilder.GetEdmModel())); +{% endhighlight %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + //Here xxxx represents the port number + + + + + + + + +{% endhighlight %} +{% endtabs %} + +Single column filtering +![Filtering query](../images/adaptors/odatav4-adaptor-filtering.png) +Multi column filtering +![Filtering query](../images/adaptors/odatav4-adaptor-multi-column-filtering.png) + +## Handling sorting operation + +To enable sorting operations in your web application using OData, you first need to configure the OData support in your service collection. This involves adding the `OrderBy` method within the OData setup, allowing you to sort data based on specified criteria. Once enabled, clients can utilize the **$orderby** query option in their requests to sort data entries according to desired attributes. + +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} + +// Create a new instance of the web application builder +var builder = WebApplication.CreateBuilder(args); + +// Create an ODataConventionModelBuilder to build the OData model +var modelBuilder = new ODataConventionModelBuilder(); + +// Register the "Orders" entity set with the OData model builder +modelBuilder.EntitySet("Orders"); + +// Add services to the container. + +// Add controllers with OData support to the service collection +builder.Services.AddControllers().AddOData( + options => options + .Count() + .OrderBy() // sorting + .AddRouteComponents("odata", modelBuilder.GetEdmModel())); + +{% endhighlight %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + //Here xxxx represents the port number + + + + + + + + +{% endhighlight %} +{% endtabs %} + +*Single column sorting* + +![Single column sorting query](../images/adaptors/odatav4-adaptor-sorting.png) + +*Multi column sorting* + +![Multi column sorting query](../images/adaptors/odatav4-adaptor-multi-column-sorting.png) + +## Handling paging operation + +To implement paging operations in your web application using OData, you can utilize the `SetMaxTop` method within your OData setup to limit the maximum number of records that can be returned per request. While you configure the maximum limit, clients can utilize the **$skip** and **$top** query options in their requests to specify the number of records to skip and the number of records to take, respectively. + +{% tabs %} +{% highlight cs tabtitle="Program.cs" %} + +// Create a new instance of the web application builder +var builder = WebApplication.CreateBuilder(args); + +// Create an ODataConventionModelBuilder to build the OData model +var modelBuilder = new ODataConventionModelBuilder(); + +// Register the "Orders" entity set with the OData model builder +modelBuilder.EntitySet("Orders"); + +// Add services to the container. + +// Add controllers with OData support to the service collection + +var recordCount= OrdersDetails.GetAllRecords().Count; + +builder.Services.AddControllers().AddOData( + options => options + .Count() + .SetMaxTop(recordCount) + .AddRouteComponents( + "odata", + modelBuilder.GetEdmModel())); + +{% endhighlight %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + //Here xxxx represents the port number + + + + + + + + +{% endhighlight %} +{% endtabs %} + +![paging query](../images/adaptors/odatav4-adaptor-paging.png) + +## Handling CRUD operations + +To manage CRUD (Create, Read, Update, Delete) operations using the ODataV4Adaptor, follow the provided guide for configuring the Syncfusion Grid for [editing](https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit) and utilize the sample implementation of the `OrdersController` in your server application. This controller handles HTTP requests for CRUD operations such as GET, POST, PATCH, and DELETE. + +To enable CRUD operations in the Syncfusion Grid control, follow the below steps: + +{% tabs %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + + //Here xxxx represents the port number + + + + + + + + +{% endhighlight %} +{% endtabs %} + +> Normal/Inline editing is the default edit `mode` for the Grid control. To enable CRUD operations, ensure that the `isPrimaryKey` property is set to **true** for a specific Grid column, ensuring that its value is unique. + +**Insert Record** + +To insert a new record into your Syncfusion Grid, you can utilize the `HttpPost` method in your server application. Below is a sample implementation of inserting a record using the **OrdersController**: + +```cs +/// +/// Inserts a new order to the collection. +/// +/// The order to be inserted. +/// It returns the newly inserted record detail. +[HttpPost] +[EnableQuery] +public IActionResult Post([FromBody] OrdersDetails addRecord) +{ + if (addRecord == null) + { + return BadRequest("Null order"); + } + OrdersDetails.GetAllRecords().Insert(0, addRecord); + return Ok(addRecord); +} +``` + +![ODataV4Adaptor-Insert-record](../images/adaptors/odatav4-adaptor-insert-record.png) + +**Update Record** + +Updating a record in the Syncfusion Grid can be achieved by utilizing the `HttpPatch` method in your controller. Here's a sample implementation of updating a record: + +```cs +/// +/// Updates an existing order. +/// +/// The ID of the order to update. +/// The updated order details. +/// It returns the updated order details. +[HttpPatch("{key}")] +public IActionResult Patch(int key, [FromBody] OrdersDetails updateRecord) +{ + if (updateRecord == null) + { + return BadRequest("No records to update."); + } + + var existingOrder = OrdersDetails.GetAllRecords().FirstOrDefault(order => order.OrderID == key); + if (existingOrder == null) + { + return NotFound($"Order with ID {key} not found."); + } + + // Update fields only if they are provided + existingOrder.CustomerID = updateRecord.CustomerID ?? existingOrder.CustomerID; + existingOrder.EmployeeID = updateRecord.EmployeeID ?? existingOrder.EmployeeID; + existingOrder.ShipCountry = updateRecord.ShipCountry ?? existingOrder.ShipCountry; + + // Return the updated record + return Ok(existingOrder); +} +``` +![ODataV4Adaptor-Update-record](../images/adaptors/odatav4-adaptor-update-record.png) + +**Delete Record** + +To delete a record from your Syncfusion Grid, you can utilize the `HttpDelete` method in your controller. Below is a sample implementation: + +```cs +/// +/// Deletes an order. +/// +/// The ID of the order to delete. +/// It returns the deleted record detail +[HttpDelete("{key}")] +public IActionResult Delete(int key) +{ + var deleteRecord = OrdersDetails.GetAllRecords().FirstOrDefault(order => order.OrderID == key); + if (deleteRecord != null) + { + OrdersDetails.GetAllRecords().Remove(deleteRecord); + } + return Ok(deleteRecord); +} +``` +![ODataV4Adaptor-Delete-record](../images/adaptors/odatav4-adaptor-delete-record.png) + +## Odata with custom url + +The Syncfusion ODataV4 adaptor extends support for calling customized URLs to accommodate data retrieval and CRUD actions as per your application's requirements. However, when utilizing a custom URL with the ODataV4 adaptor, it's essential to modify the routing configurations in your application's route configuration file to align with your custom URL. You can invoke the custom URL by the following methods in the Datamanager + +**Configuring Custom URLs** + +To work with custom URLs for CRUD operations in the Syncfusion Grid, you can use the following properties: + +* insertUrl: Specifies the custom URL for inserting new records. +* removeUrl: Specifies the custom URL for deleting records. +* updateUrl: Specifies the custom URL for updating records. +* batchUrl: Specifies the custom URL for batch editing operations. + +> Ensure that the routing configurations on the server-side are properly updated to handle these custom URLs. + +The following code example describes the above behavior. + +{% tabs %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +For batch editing, you can specify a custom batch URL as follows: + +{% tabs %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + + diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/url-adaptor.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/url-adaptor.md new file mode 100644 index 0000000000..859b5920bb --- /dev/null +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/connecting-to-adaptors/url-adaptor.md @@ -0,0 +1,733 @@ +--- +layout: post +title: UrlAdaptor in Syncfusion ##Platform_Name## Grid Component +description: Learn here all about Bind data and perform CRUD action with UrlAdaptor in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: grid +keywords: Adaptors, UrlAdaptor, url method adaptor, remotedata +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# UrlAdaptor in Syncfusion ASP.NET Core Grid Control + +The UrlAdaptor serves as the base adaptor for facilitating communication between remote data services and an UI control. It enables seamless data binding and interaction with custom API services or any remote service through URLs. 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 Syncfusion ASP.NET Core Grid control. + +This section describes a step-by-step process for retrieving data using UrlAdaptor, then binding it to the ASP.NET Core Grid control to facilitate data and CRUD operations. + +## Creating an API service + +To configure a server with Syncfusion ASP.NET Core Grid, you need to follow the below steps: + +**1. Project Creation:** + +Open Visual Studio and create an ASP.NET Core project named **UrlAdaptor_Core**. To create an ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) 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. + +{% tabs %} +{% highlight cs tabtitle="OrdersDetails.cs" %} + + namespace UrlAdaptor_Core.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 < 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; } + } +} +{% endhighlight %} +{% endtabs %} + +**3. API Controller Creation:** + +Create a file named `GridController.cs` under the **Controllers** folder. This controller will handle data communication with the ASP.NET Core Grid component. + +{% tabs %} +{% highlight cs tabtitle="GridController.cs" %} + +using Microsoft.AspNetCore.Http; +using Microsoft.AspNetCore.Mvc; +using UrlAdaptor_Core.Models; + +namespace UrlAdaptor_Core.Controllers +{ + [Route("api/[controller]")] + [ApiController] + public class GridController : ControllerBase + { + [HttpPost] + 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] + public List GetOrderData() + { + var data = OrdersDetails.GetAllRecords().ToList(); + return data; + } + } +} + +{% endhighlight %} +{% endtabs %} + +> The **GetOrderData** method retrieves sample order data. You can replace it with your custom logic to fetch data from a database or any other source. + +**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. + +![UrlAdaptor-data](../images/adaptors/url-adaptor-data.jpeg) + +## Connecting syncfusion grid to an api service + +To integrate the Syncfusion Grid control into your ASP.NET Core project using Visual Studio, follow these steps: + +**Step 1:** Install ASP.NET Core package in the application: + +To add `ASP.NET Core` controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for `Syncfusion.EJ2.AspNet.Core` and then install it. Alternatively, you can utilize the following package manager command to achieve the same. + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +**Step 2:** Add Syncfusion ASP.NET Core Tag Helper + +Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. + +{% tabs %} +{% highlight C# tabtitle="~/_ViewImports.cshtml" %} + +@addTagHelper *, Syncfusion.EJ2 + +{% endhighlight %} +{% endtabs %} + +**Step 3:** Add stylesheet and script resources + +Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +**Step 4:** Register Syncfusion Script Manager + +Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + + +{% endhighlight %} +{% endtabs %} + +**Step 5:** Add ASP.NET Core Grid control + +Now, add the Syncfusion ASP.NET Core Grid tag helper in `~/Pages/Index.cshtml` page. + +{% tabs %} +{% highlight cshtml tabtitle="Index.cshtml" %} + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +**Step 6:** Configure the server + +In the `Program.cs` file of your project, configure the server to serve static files by adding the following code: + +```cs +builder.Services.AddRazorPages(); +builder.Services.AddControllers(); + +var app = builder.Build(); + +app.MapRazorPages(); +app.MapControllers(); +``` + +Additionally, comment out the following line in the `launchSettings.json` file: + +```json + "https": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + // "launchUrl": "swagger", + "applicationUrl": "https://localhost:xxxx;http://localhost:xxxx", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, +``` + +**Step 7:** Run the Project + +Now, run the project to see the Syncfusion Grid connected to the API service in action. + +> * The Syncfusion Grid control 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`, `PerformTake` and `PerformSkip` available in the `Syncfusion.EJ2.AspNet.Core` package. Let’s explore how to manage these data operations using the `UrlAdaptor`. +> * In an API service project, add `Syncfusion.EJ2.AspNet.Core` by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it. +> * To access `DataManagerRequest` and `QueryableOperation`, import `Syncfusion.EJ2.Base` in `GridController.cs` file. +> * In the UrlAdaptor configuration, the properties of the DataManager object are encapsulated within an object named **value**. To access the DataManager properties, a dedicated class is created, representing the **value** object. + ```cs + // Model for handling data manager requests + public class DataManager + { + public required DataManagerRequest Value { get; set; } + } + ``` + +## 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`. method from the `QueryableOperation` class. This allows the custom data source to undergo searching based on the criteria specified in the incoming `DataManagerRequest` object. + +![UrlAdaptor searching](../images/adaptors/url-adaptor-searching.png) + +{% tabs %} +{% highlight cs tabtitle="GridController.cs" %} +[HttpPost] +public object Post([FromBody] DataManagerRequest DataManagerRequest) +{ + // Retrieve data from the data source (e.g., database) + IQueryable DataSource = GetOrderData().AsQueryable(); + QueryableOperation queryableOperation = new QueryableOperation(); // Initialize QueryableOperation instance + + // Handling Searching + if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0) + { + DataSource = queryableOperation.PerformSearching(DataSource, DataManagerRequest.Search); + } + // Get the total records count + int totalRecordsCount = DataSource.Count(); + + // Return data based on the request + return new { result = DataSource, count = totalRecordsCount }; +} +{% endhighlight %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +## 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` method from the `QueryableOperation` class. This allows the custom data source to undergo filtering based on the criteria specified in the incoming `DataManagerRequest` object. + +**Single column filtering** +![Single column filtering](../images/adaptors/url-adaptor-filtering.png) + +**Multi column filtering** +![Multi column filtering](../images/adaptors/url-adaptor-multi-filtering.png) + +{% tabs %} +{% highlight cs tabtitle="GridController.cs" %} +[HttpPost] +public object Post([FromBody] DataManagerRequest DataManagerRequest) +{ + // Retrieve data from the data source (e.g., database) + IQueryable DataSource = GetOrderData().AsQueryable(); + + QueryableOperation queryableOperation = new QueryableOperation(); // Initialize QueryableOperation instance + + if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0) + { + // Handling filtering operation + foreach (var condition in DataManagerRequest.Where) + { + foreach (var predicate in condition.predicates) + { + DataSource = queryableOperation.PerformFiltering(DataSource, DataManagerRequest.Where, predicate.Operator); + } + } + } + // Get the total records count + int totalRecordsCount = DataSource.Count(); + + // Return data based on the request + return new { result = DataSource, count = totalRecordsCount }; +} +{% endhighlight %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +## 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` method from the `QueryableOperation` class. This allows the custom data source to undergo sorting based on the criteria specified in the incoming `DataManagerRequest` object. + +**Single column sorting** +![Single column sorting](../images/adaptors/url-adaptor-sorting.png) + +**Multi column sorting** +![Multi column sorting](../images/adaptors/url-adaptor-multi-sorting.png) + +{% tabs %} +{% highlight cs tabtitle="GridController.cs" %} +[HttpPost] +public object Post([FromBody] DataManagerRequest DataManagerRequest) +{ + // Retrieve data from the data source (e.g., database) + IQueryable DataSource = GetOrderData().AsQueryable(); + + QueryableOperation queryableOperation = new QueryableOperation(); // Initialize QueryableOperation instance + + // Handling Sorting operation + if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0) + { + DataSource = queryableOperation.PerformSorting(DataSource, DataManagerRequest.Sorted); + } + + // Get the total count of records + int totalRecordsCount = DataSource.Count(); + + // Return data based on the request + return new { result = DataSource, count = totalRecordsCount }; +} +{% endhighlight %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +## 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` and `PerformSkip` method from the `QueryableOperation` class. This allows the custom data source to undergo paging based on the criteria specified in the incoming `DataManagerRequest` object. + +![UrlAdaptor paging](../images/adaptors/url-adaptor-paging.png) + +{% tabs %} +{% highlight cs tabtitle="GridController.cs" %} +[HttpPost] +public object Post([FromBody] DataManagerRequest DataManagerRequest) +{ + // Retrieve data from the data source (e.g., database) + IQueryable DataSource = GetOrderData().AsQueryable(); + + // Get the total records count + int totalRecordsCount = DataSource.Count(); + + QueryableOperation queryableOperation = new QueryableOperation(); // Initialize QueryableOperation instance + + // Handling paging operation. + if (DataManagerRequest.Skip != 0) + { + // Paging + DataSource = queryableOperation.PerformSkip(DataSource, DataManagerRequest.Skip); + } + if (DataManagerRequest.Take != 0) + { + DataSource = queryableOperation.PerformTake(DataSource, DataManagerRequest.Take); + } + + // Return data based on the request + return new { result = DataSource, count = totalRecordsCount }; +} +{% endhighlight %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +## Handling CRUD operations + +The Syncfusion ASP.NET Core Grid Component seamlessly integrates CRUD (Create, Read, Update, 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: + +1. **insertUrl**: Specifies the URL for inserting new data. +2. **removeUrl**: Specifies the URL for removing existing data. +3. **updateUrl**: Specifies the URL for updating existing data. +4. **crudUrl**: Specifies a single URL for all CRUD operations. +5. **batchUrl**: Specifies the URL for batch editing. + +To enable editing in ASP.NET Core Grid component, refer to the editing [documentation](https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit). In the below example, the inline edit mode` is enabled and [toolbar](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Toolbar) property is configured to display toolbar items for editing purposes. + +{% tabs %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +> Normal/Inline editing is the default edit `mode` for the Grid component. 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. + +```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` property to specify the controller action mapping URL for the insert operation. The newly added record details are bound to the **newRecord** parameter. + +![Insert record](../images/adaptors/url-adaptor-insert-record.png) + +```cs + +/// +/// Inserts a new data item into the data collection. +/// +/// It contains the new record detail which is need to be inserted. +/// Returns void +[HttpPost] +[Route("api/Grid/Insert")] +public void Insert([FromBody] CRUDModel newRecord) +{ + if (newRecord.value != null) + { + OrdersDetails.GetAllRecords().Insert(0, newRecord.value); + } +} +``` + +**Update operation:** + +For updating existing records, utilize the `updateUrl` property to specify the controller action mapping URL for the update operation. The updated record details are bound to the **updatedRecord** parameter. + +![Update record](../images/adaptors/url-adaptor-update-record.png) + +```cs + +/// +/// Update a existing data item from the data collection. +/// +/// It contains the updated record detail which is need to be updated. +/// Returns void +[HttpPost] +[Route("api/Grid/Update")] +public void 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.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 bound to the **deletedRecord** parameter. + +![Delete Record](../images/adaptors/url-adaptor-delete-record.png) + +```cs +/// +/// Remove a specific data item from the data collection. +/// +/// It contains the specific record detail which is need to be removed. +/// Returns void +[HttpPost] +[Route("api/Grid/Remove")] +public void 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); + } +} +``` + +![UrlAdaptor CRUD operations](../images/adaptors/adaptor-crud-operation.gif) + +**Single method for performing all CRUD operations** + +Using the `crudUrl` property, the controller action mapping URL can be specified to perform all the CRUD operation at server-side using a single method instead of specifying separate controller action method for CRUD (insert, update and delete) operations. + +The following code example describes the above behavior. + +{% tabs %} +{% highlight cs tabtitle="GridController.cs" %} + +[HttpPost] +[Route("api/[controller]/CrudUpdate")] +public void CrudUpdate([FromBody] CRUDModel request) +{ + // perform update operation + if (request.action == "update") + { + var orderValue = request.value; + OrdersDetails existingRecord = OrdersDetails.GetAllRecords().Where(or => or.OrderID == orderValue.OrderID).FirstOrDefault(); + existingRecord.OrderID = orderValue.OrderID; + existingRecord.CustomerID = orderValue.CustomerID; + existingRecord.ShipCity = orderValue.ShipCity; + } + // perform insert operation + else if (request.action == "insert") + { + OrdersDetails.GetAllRecords().Insert(0, request.value); + } + // perform remove operation + else if (request.action == "remove") + { + OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == int.Parse(request.key.ToString())).FirstOrDefault()); + } +} +{% endhighlight %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +**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. + +{% tabs %} +{% highlight cs tabtitle="GridController.cs" %} +[HttpPost] +[Route("api/[controller]/BatchUpdate")] +public IActionResult BatchUpdate([FromBody] CRUDModel batchOperation) +{ + if (batchOperation.added != null) + { + foreach (var addedOrder in batchOperation.added) + { + OrdersDetails.GetAllRecords().Insert(0, addedOrder); + } + } + if (batchOperation.changed != null) + { + foreach (var changedOrder in batchOperation.changed) + { + var existingOrder = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == changedOrder.OrderID); + if (existingOrder != null) + { + existingOrder.CustomerID = changedOrder.CustomerID; + existingOrder.ShipCity = changedOrder.ShipCity; + // Update other properties as needed + } + } + } +if (batchOperation.deleted != null) + { + foreach (var deletedOrder in batchOperation.deleted) + { + var orderToDelete = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == deletedOrder.OrderID); + if (orderToDelete != null) + { + OrdersDetails.GetAllRecords().Remove(orderToDelete); + } + } + } + return Json(batchOperation); +} +{% endhighlight %} +{% highlight ts tabtitle="Index.cshtml" %} + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +![UrlAdaptor Batch Editing](../images/adaptors/url-adaptor-batch-editing.gif) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/images/adaptors/adaptor-crud-operation.gif b/ej2-asp-core-mvc/grid/images/adaptors/adaptor-crud-operation.gif new file mode 100644 index 0000000000..e0dd72ff74 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/adaptor-crud-operation.gif differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-data.png b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-data.png new file mode 100644 index 0000000000..02a8b7804c Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-data.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-delete-record.png b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-delete-record.png new file mode 100644 index 0000000000..d78917bbae Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-delete-record.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-filtering.png b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-filtering.png new file mode 100644 index 0000000000..9d652331e6 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-filtering.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-insert-record.png b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-insert-record.png new file mode 100644 index 0000000000..c97292068c Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-insert-record.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-multi-column-filtering.png b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-multi-column-filtering.png new file mode 100644 index 0000000000..8903bb638d Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-multi-column-filtering.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-multi-column-sorting.png b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-multi-column-sorting.png new file mode 100644 index 0000000000..2d631b2bf0 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-multi-column-sorting.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-paging.png b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-paging.png new file mode 100644 index 0000000000..d01165d3c5 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-paging.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-searching.png b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-searching.png new file mode 100644 index 0000000000..d1a068dd20 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-searching.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-sorting.png b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-sorting.png new file mode 100644 index 0000000000..084220205f Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-sorting.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-update-record.png b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-update-record.png new file mode 100644 index 0000000000..265fdf465e Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/odatav4-adaptor-update-record.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-batch-editing.gif b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-batch-editing.gif new file mode 100644 index 0000000000..2dd7ead07f Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-batch-editing.gif differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-data.jpeg b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-data.jpeg new file mode 100644 index 0000000000..64d67d1865 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-data.jpeg differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-delete-record.png b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-delete-record.png new file mode 100644 index 0000000000..b5ba6048cd Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-delete-record.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-filtering.png b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-filtering.png new file mode 100644 index 0000000000..d715432553 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-filtering.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-insert-record.png b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-insert-record.png new file mode 100644 index 0000000000..168ebb6aea Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-insert-record.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-multi-filtering.png b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-multi-filtering.png new file mode 100644 index 0000000000..0ced73bab8 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-multi-filtering.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-multi-sorting.png b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-multi-sorting.png new file mode 100644 index 0000000000..ad59077dab Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-multi-sorting.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-paging.png b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-paging.png new file mode 100644 index 0000000000..b28ab25893 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-paging.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-result-and-count.png b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-result-and-count.png new file mode 100644 index 0000000000..c4223bc7b2 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-result-and-count.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-searching.png b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-searching.png new file mode 100644 index 0000000000..8eca1b7929 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-searching.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-sorting.png b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-sorting.png new file mode 100644 index 0000000000..89976d618b Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-sorting.png differ diff --git a/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-update-record.png b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-update-record.png new file mode 100644 index 0000000000..9b23125a8b Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/adaptors/url-adaptor-update-record.png differ diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 116fbdc5d8..520d7ace6e 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1302,6 +1302,12 @@
  • How to change the data source or columns dynamically
    • +
  • Connecting to Adaptors + +
  • Data Annotation
  • Immutable Mode
  • Adaptive View