Grid DataManager In Angular Bind To Api That Returns a JSON Array Without Count

[Jeffrey Stone]

I am using the Grid component in Angular. I have multiple web service API calls that return the result as an array of items. The UrlAdaptor expects the results to be { result, count }.  Is there another way to do this?

Regards, Jeff

[Venkatesh Ayothi Raman]

Hi Jeffrey, 

 

Thanks for using Syncfusion products. 

 

The data adaptor as named URL adaptor works like load on demand concept. So, while rendering the Grid post request will send to server side along with parameters of skip and take. In that server side, perform the paging operation and return the result and total count as JSON object to process the Data and shown in the Grid component. This is the default behavior of the Grid. Please refer to the following code example and Help documentation, 

public ActionResult DataSource() 

        { 

            var DataSource = OrderRepository.GetAllRecords(); 

            DataResult result = new DataResult(); 

            result.result = DataSource.ToList(); 

            result.count = result.result.Count; 

            return Json(result, JsonRequestBehavior.AllowGet); 

             

        } 

  public class DataResult 

        { 

            public List<EditableOrder> result { get; set; } 

            public int count { get; set; } 

        } 

 

Help documentation: 

https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/edit.html#url-adaptor 

 

And you are said using Web Api service to bound the remote data source to Grid. If so, we suggest you to use WebApiAdaptor instead of UrlAdaptor.  Also, if we are using webAbi adaptor then we should return the JSON data as Items and count. Please refer to the following Help documentation and code example, 

https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/databinding.html#web-api 

//WebApi Controller 

[HttpGet] 

        public object Get() 

        { 

 

            var queryString = HttpContext.Current.Request.QueryString; 

           int skip = Convert.ToInt32(queryString["$skip"]); 

            int take = Convert.ToInt32(queryString["$top"]); 

            var data = OrderRepository.GetAllRecords(); 

            return new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() }; 

        } 

 

If we use WebApiAdaptor then we don’t need to mention the insertUrl,updateUrl and removeUrl to perform the CRUD operation. Since, WebApI controller has built-in support of read, write and delete operation.  

Note:We can return the array of items only when we set Datamanager property as offline as true. If we set offline property as true then grid load all data on initialization and make the actions process in client-side.  

Help Documentation: https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/how-to.html#offline-mode 

 

Please let us know if you have any further assistance on this. 

 

Regards, 

Venkatesh Ayothiraman.