EjsGrid: CRUD operations on remote data source

[Islam yahia]

Hi,

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

Kind Regards.

[Pavithra Subramaniyam]

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 29^th, 2019 in the weekly patch release. We will prepare a sample based on your requirement and will share with you on or before May 30^th, 2019.  

  

Until then we appreciate your patience. 

 

Regards, 

Pavithra S. 

[Hariharan J V]

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 7^th, 2019.  

 

Until then we appreciate your patience.  

 

Regards, 

Hariharan 

[Gurupriyadharshini Sankaranarayanan]

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> 

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

    <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 

        } 

    } 

} 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/blazorDataManager-274355488-681111532  

 

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]

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]

  

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.