paging not working when using datasource adaptor type as webapiadaptor

[Juan Jose Uribe]

Hi,

I'm getting records from database using get method from Api controller. Then, showing records using a syncfusion grid but, paging is not working. Grid shows all records in the same page.

This is the code I´m using:

View:

@(Html.EJ().Grid<IEnumerable<Navicare.WebUI.Models.ClienteContratosUI>>("ListaEquiposGeotab")

            .Datasource(ds => ds.URL("/api/equiposgeotab").Adaptor(AdaptorType.WebApiAdaptor))

            .Columns(col =>

            {

                col.Field("IdEquiposGeotab").IsPrimaryKey(true).Visible(false).Add();

                col.Field("ContractId").Visible(false).Add();

......

Controller: (ApiController):

public class EquiposGeotabController : ApiController

    {

        private ContratosSvc contratosSvc = new ContratosSvc();

        [HttpGet]

        public object Get()

        {

            IEnumerable<EquiposGeotabUI> data = HerramientasDTO.ListaEquiposGeotabBL(contratosSvc.ObtenerEquiposHuerfanosGeotab());

            return new { Items = data, Count = data.Count() };

        }

    }

[Mani Sankar Durai]

Hi Juan, 

Thanks for contacting Syncfusion support.  

We have checked your query and from your code example we found that you have not enabled .AllowPaging() property in grid. Also you have not performed Skip and Take action in server side instead you have passed the whole data to the grid. 

 Based on your requirement we have prepared a sample that can be downloaded from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/135373/ze/WebApiSample1324566753 

Please refer the code example 

@(Html.EJ().Grid<object>("Grid") 

             .Datasource(ds => ds.URL("/api/Orders").Adaptor(AdaptorType.WebApiAdaptor)) 

              .AllowPaging() 

              .Columns(col => 

              { 

                  col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add(); 

                  col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 

                  col.Field("EmployeeID").HeaderText("EmployeeID").Width(80).Add(); 

              }) 

    ) 

 

[OrdersController.cs] 

 

        // GET api/orders 

        NorthwindDataContext db = new NorthwindDataContext(); 

        public object Get() 

        { 

            var queryString = HttpContext.Current.Request.QueryString; 

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

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

            var data = db.Orders.ToList(); 

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

        } 

From the above code example we suggest you to perform Skip and Take in server side before data binding to grid. 

Please refer the documentation link of about WebApi Adaptor in grid.  

Link: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#webapi-adaptor 

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai. 

[Juan Jose Uribe]

Hi,

I didn´t know how to do the Skip and Take action in server side.

Thanks so much, now it is working.

Kind regards,

Juan J.Uribe

[Sathyanarayanamoorthy Eswararao]

Hi Juan, 

We are happy to hear that your issue has been solved.  

Please let us know if you need any further assistance. 

Regards, 

Sathyanarayanamoorthy