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
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Grid CRUD sample

Grid CRUD sample

Hi 

Can you provide full CRUD Grid  function using WebAPI ?
thanks

5 Replies
PS Pavithra Subramaniyam Syncfusion Team June 5, 2018 12:38 PM UTC

Hi LiuTzuYi, 

By Default, Datamanager sends GET request to server side to fetch the Grid data with WebAPI adaptor and the CRUD operations are done by sending POST,PUT, DELETE requests to the server. We have prepared a CRUD sample with WebApi Adaptor. Please refer to the below code example, Documentation link and sample link. 

[index.chtml] 
<ejs-grid id="Grid" width="auto" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true"> 
    <e-data-manager url='api/Orders/' adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager> 
     .  .  . 
</ejs-grid> 


[controller.cs] 
public class OrdersController : Controller 
    { 
        // GET: api/Orders 
       [HttpGet] 
       public object Get() 
        { 
            .  .  . 
            return Json(new { Items = data.Skip(skip).Take(take), Count = data.Count()});       
 
        } 
        // POST: api/Orders 
        [HttpPost] 
        public object Post([FromBody]OrdersDetails value) 
        { 
            .  .  . 
        } 
        // PUT: api/Orders/5 
        [HttpPut] 
        public object Put([FromBody]OrdersDetails value) 
        { 
            .  .  . 
            return value; 
        } 
 
        // DELETE: api/ApiWithActions/5 
        [HttpDelete("{id:int}")] 
        [Route("Orders/{id:int}")] 
        public object Delete(int id) 
        { 
            .  .  . 
            return Json(id); 
        } 
    } 



Regards, 
Pavithra S. 


SA Samuel February 10, 2019 06:29 AM UTC

using   WebApiAdaptor   does not work if you add another get method to the controller 
see below the GetSomeOtherStuff method


how can i get this to work if i want to have another Get method in the same controller?

the route config looks like this 

 config.Routes.MapHttpRoute(
                "DefaultApi post",
                "api/{controller}/{action}",
                new { id = RouteParameter.Optional, action = RouteParameter.Optional }
            );




public class OrdersController : Controller 
    { 

 // GET: api/Orders/GetSomeOtherStuff
       [HttpGet] 
       public object GetSomeOtherStuff() 
        { 
            .  .  . 
            return Json(new { name="stuff"});       
 
        } 

        // GET: api/Orders 
       [HttpGet] 
       public object Get() 
        { 
            .  .  . 
            return Json(new { Items = data.Skip(skip).Take(take), Count = data.Count()});       
 
        } 
        // POST: api/Orders 
        [HttpPost] 
        public object Post([FromBody]OrdersDetails value) 
        { 
            .  .  . 
        } 
        // PUT: api/Orders/5 
        [HttpPut] 
        public object Put([FromBody]OrdersDetails value) 
        { 
            .  .  . 
            return value; 
        } 
 
        // DELETE: api/ApiWithActions/5 
        [HttpDelete("{id:int}")] 
        [Route("Orders/{id:int}")] 
        public object Delete(int id) 
        { 
            .  .  . 
            return Json(id); 
        } 
    } 

Thanks

PS Pavithra Subramaniyam Syncfusion Team February 12, 2019 12:52 PM UTC

Hi Samuel, 
 
Greetings from the Syncfusion. 
 
We have validated your query and You can use the custom method (“GetSomeOtherStuff”) instead of Get method in WebApi service in ASP .Net Core platform. Please refer the below code example and sample for more information 
 
[OrderController.cs] 
namespace AngularwithASPCore.Controllers 
{ 
    [Produces("application/json")] 
    [Route("api/Orders/")] 
    public class OrdersController : Controller 
    { 
        // GET: api/Orders 
        [HttpGet] 
        public object GetSomeOtherStuff()  // Here, override the Get method 
        { 
 
            var queryString = Request.Query; 
            int skip = Convert.ToInt32(queryString["$skip"]); 
            int take = Convert.ToInt32(queryString["$top"]); 
            var data = OrdersDetails.GetAllRecords().ToList(); 
            return Json(new { Items = data.Skip(skip).Take(take), Count = data.Count()             });  
} 
 
 
 
Please get back to us, if you need further assistance. 
 
Regards,  
Pavithra S. 
 


YY Yoab Youssoufou October 25, 2019 01:38 PM UTC

Hello,
I have tried this sample, all is okm for the CRUD operations but sorting and filtering does not work, I have not been able to get sorting, filtering, searching on my examples so my search led me here and even this example behaves the exact same way. Is it impossible to sort, filter, search using Web|Api adaptor?

DR Dhivya Rajendran Syncfusion Team October 28, 2019 10:38 AM UTC

Hi Yoab, 

Thanks for contacting Syncfusion support. 
 
Yes, you can perform the grid actions such as sorting, filter with WebAPiAdaptor . We have send the corresponding action queryString to server based on that you can handle the actions in server side and return the result(Items and Count) to grid. 
 
Kindly refer to the below code example and sample for more information.  
 
<ejs-grid #grid [dataSource]='data' allowFiltering="true" allowPaging="true" allowSorting="true" height="320">  
    <e-columns>  
        <e-column field='OrderID' headerText='Order ID' isPrimaryKey=true width='150'></e-column>  
        <e-column field='CustomerID' headerText='Customer Name' width='150'></e-column>  
        <e-column field='ShipCity' headerText='ShipCity' width='150' textAlign='Right'></e-column>        
    </e-columns>  
</ejs-grid>  
 
export class FetchDataComponent {  
    public data: any;  
  @ViewChild('grid')  
  public grid: GridComponent;  
  
  ngOnInit(): void {  
    this.data = new DataManager({  
      url: 'api/Orders',  
      adaptor: new WebApiAdaptor  
    });  
  }  
  
}  
 
public object Get()  
       {  
            var queryString = Request.Query;  
            var data = OrdersDetails.GetAllRecords().ToList();  
            string sort = queryString["$orderby"];   //sorting       
            string filter = queryString["$filter"];  //filtering  
            if (sort != null) 
            {  
                var sortfield = sort.Split(' ');  
                var sortColumn = sortfield[0];  
                if (sortfield.Length == 2)  
                {  
                    sortColumn = sortfield[0];  
                    switch (sortColumn)  
                    {  
                        case "OrderID":  
                            data = data.OrderByDescending(x => x.OrderID);  
                            break;  
                        . . . . . 
                    }  
                }  
                else  
                {  
                    switch (sortColumn)  
                    {  
                        case "OrderID":  
                            data = data.OrderBy(x => x.OrderID);  
                            break;  
                        case "CustomerID":  
                            data = data.OrderBy(x => x.CustomerID);  
                            break;  
                    }  
                }  
            }  

            if (filter != null)  
            {  
                var newfiltersplits = filter;  
                var filtersplits = newfiltersplits.Split('(', ')', ' ');  
                var filterfield = filtersplits[1];  
                var filtervalue = filtersplits[3];  
                if (filtersplits.Length != 5)  
                {  
                    filterfield = filter.Split('(', ')', '\'')[3]; //get field from query  
                    filtervalue = filter.Split('(', ')', '\'')[5]; // get value from query  
                }  
                switch (filterfield)  
                {  
                    case "OrderID":  
  
                        data = (from cust in data  
                                where cust.OrderID.ToString() == filtervalue.ToString()  
                                select cust).ToList();  
                        break;  
                    case "CustomerID":  
                        data = (from cust in data  
                                wherecust.CustomerID.ToLower().StartsWith(filtervalue.ToString())  
                                select cust).ToList();  
                        break;  
                }  
            }  
            int skip = Convert.ToInt32(queryString["$skip"]);  // paging 
            int take = Convert.ToInt32(queryString["$top"]);  
            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() };  
        }  
          
 

 We have an inbuild option to handle the grid actions in server side with urlAdaptor. Please refer the below help documentation link for more information. 
 

Regards, 
R.Dhivya 


Loader.
Live Chat Icon For mobile
Up arrow icon