We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

EjsGrid: CRUD operations on remote data source

Thread ID:

Created:

Updated:

Platform:

Replies:

144749 May 21,2019 07:41 AM UTC Jun 18,2019 09:24 AM UTC Blazor 5
loading
Tags: Grid
Islam yahia
Asked On May 21, 2019 07:41 AM UTC

Hi,

Is there any samples showing how to implement CRUD operations on remote data sources like WebApi endpoints?

Kind Regards.

Pavithra Subramaniyam [Syncfusion]
Replied On May 22, 2019 12:19 PM UTC

Hi Islam, 
  
Thanks for contacting Syncfusion support. 
  
No. Currently, we don’t have Data Manager support for handling the remote data in Blazor. However we have already started to work on this feature and it is expected to be rolled out on May 29th, 2019 in the weekly patch release. We will prepare a sample based on your requirement and will share with you on or before May 30th, 2019.  
  
Until then we appreciate your patience. 
 
Regards, 
Pavithra S. 


Hariharan J V [Syncfusion]
Replied On May 30, 2019 04:02 PM UTC

Hi Islam,  
   
Sorry for the inconvenience caused. 
   
Due to the delay of our weekly patch release for Blazor, the feature (Implementation of CRUD operations on remote data sources) is expected to be rolled out on June 6th, 2019. So We will update the for your requirement on June 7th, 2019.  
 
Until then we appreciate your patience.  
 
Regards, 
Hariharan 


Gurupriyadharshini Sankaranarayanan [Syncfusion]
Replied On June 11, 2019 03:15 PM UTC

Hi Islam,  
   
Thanks for your patience. 
 
We have checked your query and you can achieve your requirement by using the below way. We have prepared a sample with WebApiAdaptor using DataManager to do CRUD actions in the Grid.  
 
In DataManager tag we need to specify the URL to fetch the data in the Url property and the name of Adaptor is specified through Adaptor property. While using WebApiAdaptor then we need to return the process response in the form of Items and Count. Please refer the below code snippet and sample link. 
 
[Index.razor] 
<EjsGrid id="Grid" ref="@grid" AllowSorting="true" AllowPaging="true" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel"})"> 
    <GridPageSettings PageSize="4"></GridPageSettings> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field="EmployeeID" HeaderText="Employee ID" IsPrimaryKey="true" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="90"></GridColumn> 
        .   .   .   . 
   </GridColumns> 
</EjsGrid> 
 
 
@functions{ 
    Employee[] data; 
 
    EjsGrid grid; 
 
} 
 
The below highlighted CRUD related methods are triggered while click on the corresponding items in the toolbar. You can use your own editing logic in the corresponding methods. 
 
[DefaultController.cs] 
namespace WebApplication1.Server.Controllers 
{ 
    [Route("api/[controller]")] 
    [ApiController] 
    public class DefaultController : ControllerBase 
    { 
        EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer(); 
        // GET: api/Default 
        [HttpGet] 
        public object Get() 
        { 
 
            IEnumerable<Employee> data = objemployee.GetAllEmployees().ToList(); 
            var count = data.Count(); 
            var queryString = Request.Query; 
            if (queryString.Keys.Contains("$inlinecount")) 
            { 
                StringValues Skip; 
                StringValues Take; 
                int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0; 
                int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count(); 
                return new { Items = data.Skip(skip).Take(top), Count = count }; 
           } 
            else 
            { 
                return data; 
            } 
        } 
 
        // GET: api/Default/5 
        [HttpGet("{id}", Name = "Get")] 
        public string Get(int id) 
        { 
            return "value"; 
        } 
 
        // POST: api/Default 
        [HttpPost] 
        public void Post([FromBody]Employee employee) 
        { 
           /// code for Insert operation 
        } 
 
        // PUT: api/Default/5 
        [HttpPut] 
        public void Put([FromBody] Employee employee) 
        { 
            /// code for Update operation 
        } 
 
        // DELETE: api/ApiWithActions/5 
        [HttpDelete("{id}")] 
        public void Delete(int id) 
        { 
           //// code for delete operation 
        } 
    } 
} 
 
 
While using this WebApi adaptor, you need to handle all the grid actions(paging, sorting, filtering etc) in WebAPI Get Request method.  
 
Regards, 
Gurupriyadharshini S. 


Chris
Replied On June 18, 2019 12:41 AM UTC

Hi Gurupriyadharshini,

Great sample it's really helping me to get started on using the data manager with a web api.

In the sample the url is set to /api/Default with no host name given. It is therefore using the same host name as the blazor client. In my case its http:/localhost:59707/api/Default

Is it possiable to include a remote host name ie: http://mywebapi.com in the data manager? Which would call http://mywebapi.com/api/default

Sample EhsDataManger tag with the host name included:

<EjsDataManager Url="http://mywebapi.com/api/Default"Adaptor=@Syncfusion.EJ2.RazorComponents.Adaptors.WebApiAdaptor></EjsDataManager> 

We have a web api hosted on a Azurer App Service that will be seperate to the Blazor Client hosting.

Thanks in advance,

Chris

Gurupriyadharshini Sankaranarayanan [Syncfusion]
Replied On June 18, 2019 09:24 AM UTC

  
Hi Chris, 
   
Thanks for your update. 
 
Yes we can bind remote service to Grid as dataSource. And make sure that while binding data to Grid component with remote service, you have to set a property “crossdomain” (a property which allows server-side redirection to another domain) as true. Please refer the below code snippet. 
 
[Index.razor] 
<EjsGrid id="Grid" ref="@grid" AllowSorting="true" AllowPaging="true" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel"})">     
 
    <EjsDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="@Syncfusion.EJ2.RazorComponents.Adaptors.WebApiAdaptor" CrossDomain=true></EjsDataManager> 
 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="90"></GridColumn> 
        .  .  .  .  
    </GridColumns> 
</EjsGrid> 
 
 
@functions{ 
    Employee[] data; 
 
    EjsGrid grid; 
 
} 
 
 
  
And also we need to handle all the grid actions like paging, sorting, filtering, searching and CRUD in your remote service using API call. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Gurupriyadharshini S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon