How to Paging the grid ?

[LiuTzuYi]

Hi

Here are my sample, the webapi well return 20 recoreds to grid. T grid will show full data in a page !

I wish paging grid, but not success. What is my problem ? 

I study the online document, I find about this part (core mvc ej2), the information and sample seems very inadequate.

@Html.EJS().Grid("grid1").DataSource(dataManager=> { dataManager.Url("/api/Table001").CrossDomain(true).Adaptor("WebApiAdaptor");}).Columns(col=>{

    col.Field("Name").HeaderText("Name").Add();

    col.Field("Age").HeaderText("Age").Add();

}).AllowPaging().PageSettings(page=>page.PageCount(4).PageSizes(true)).ActionFailure("actionFailure").Render()

<script>

    function actionFailure(args) {

        var span = document.createElement('span');

        this.element.parentNode.insertBefore(span, this.element);

        span.style.color = '#FF0000';

        span.innerHTML = 'Server exception: 404 Not found';

    }

</script>

[Venkatesh Ayothi Raman]

Hi Liu,

Thanks for using Syncfusion products. 

If we use WebAPI data adaptor then the response from the server should be wrapped in an object with properties named Items to hold the data and Count to hold the total records count. The Count must be returned along with a response like as follows, 

 

Code example: 

[HttpGet] 

 

        public object Get() 

        { 

 

            int skip = Convert.ToInt32(HttpContext.Request.Query["$skip"].ToString()); 

            int take = Convert.ToInt32(HttpContext.Request.Query["$top"].ToString()); 

            var data = OrdersDetails.GetAllRecords().ToList(); 

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

        } 

We have also prepared a sample for your convenience which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F137939-1432405910 

In that sample, we have enabled the paging. Here, request will send to server side based on pageSize as we given in the project. Otherwise default pageSize(12) was send to server side to fetch the data like as follows, 

 

Please refer to the following Help documentation for more information, 

WebApiAdaptor: https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/databinding.html?syntax=tag#web-api 

Regards, 

Venkatesh Ayothiraman. 

[liutzuyi]

thanks, according to your suggestion ,solve my problem.

But I still have some question,

 this is my api controller

        public IActionResult GetTable001() {
            int skip = Convert.ToInt32(HttpContext.Request.Query["$skip"].ToString());
            int take = Convert.ToInt32(HttpContext.Request.Query["$top"].ToString());

            return Json(new { Items = _context.Table001.Select(s => new { Name = s.Name, Age = s.Age }).Skip(skip).Take(take),
                              Count = _context.Table001.Count() });
        }

Why "take" always 12 ? 

Can I disable(do not open to end user) or set up Items per page(not always 12) ?(see the attach file)

Attachment: 20180606_201738_6afc154c.rar

[Venkatesh Ayothi Raman]

Hi Liutzuyi, 

Thanks for the update. 

We went through your screenshot that you have shared with us and found that you are using PageSizes property and you are dynamically change the pageSize by changing the Dropdown value. If we change the Dropdown value then top value sends to server side based on the Dropdown value. Please refer to the following screenshot, 

Screenshot 1: 

  

Screenshot 2: 

 

The page request will send to server side based on the Dropdown value. We have also prepared a sample for your convenience which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F137939_sample-1668346683 

If you still face the same problem, then could you please share the following details? 

1)      Share the Full Grid code example. 

2)      Share Network tab window while switching the page size. 

3)      Share the issue reproducing scenario or modified the given sample as issue reproducible. 

  

Regards, 

Venkatesh Ayothiraman