Kendo Angular Grid ServerSide Paging-Partially Working

Question

I am so close and yet so far...

I am using an angular kendo grid with MVC end point for data. I have no problem getting the data to show so then I moved on to paging. Client side paging works but since the record count is high I would prefer serverside paging.

This is where I am missing something. My grid displays "Showing 1-5 of 18" so it is somehow parsing the count for the grid legend but the actual grid shows all 18 rows??

my _layout has among other files:

<script src="@Url.Content("~/Scripts/kendo/2016.1.412/kendo.aspnetmvc.min.js")"></script>

my grid:

$("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    transport: {
                        read: function (f) {
                            $http.get('http://localhost:59722/SCat/GetSubCategories?categoryid=' + e.data.Id).
                            success(function (data, status, headers, config) {
                            f.success(data)
                            }).
                            error(function (data, status, headers, config) {
                            alert('something went wrong with subCategories')
                            console.log(status);
                            });
                        },
                        create: function (c) {
                            alert('adf');
                            $http.post('http://localhost:59722/Cat/AddNewSubCategory').
                            success(function (data, status, headers, config) {
                            f.success(data)
                            }).
                            error(function (data, status, headers, config) {
                            alert('something went wrong with update')
                            console.log(status);
                        });
                        }
                    },
                    pageSize: 5,
                    serverPaging: true,
                    serverFiltering: true,
                    schema: {
                        data: "Data",
                        total: "Total",
                        errors: "Errors"
                    }
                },
                pageable: true,
                filterable: true,
                editable: "inline",
                toolbar: ["create"],
                columns: [
                    { field: "SubCategoryName", title: "Category Name" },
                    { field: "SCategoryId", title: "Parent Id" },
                    { command: ["edit"]}
                ]
            })
        }

    })

MVC Action:

public async Task<JsonResult> GetSubCategories([DataSourceRequest] DataSourceRequest request,  int? categoryid)
{
        int categoryId = categoryid ?? -9999;
        if (categoryId == -9999)
        { return Json("[{Error -9999 for categoryId}]"); }


        HttpResponseMessage responseMessage = await client.GetAsync(url + "/" + categoryId);
        if (responseMessage.IsSuccessStatusCode)
        {
            var responseData = responseMessage.Content.ReadAsStringAsync().Result;
            var x = JsonConvert.DeserializeObject<List<SubCategories>>(responseData);

            return Json(x.ToDataSourceResult(request) , JsonRequestBehavior.AllowGet);

        }

        return Json("[{Error}]");
     }

Fiddler 220 Json:

{ "Data":[
    {"Id":1,"SubCategoryName":"asdfe","CategoryId":1},
    {"Id":3,"SubCategoryName":"Self-Righteousness","CategoryId":1},
    ...removed brevity...
    {"Id":18,"SubCategoryName":"Viuyhj","CategoryId":1} 
    {"Id":19,"SubCategoryName":"zcxv","CategoryId":1}
    ],
"Total":18,
"AggregateResults":null,
"Errors":null}

Now I think I am missing something in my angular grid because my DataSourceRequest is ALWAYS full of default values.

Further if I explicitly assign the page value everything works.

public async Task<JsonResult> GetSubCategories([DataSourceRequest] DataSourceRequest request,  int? categoryid)
{
  request.PageSize = 5;
  ....snip
}

So it has something to do with my Angular grid but I'm missing what???

Have you looked at the actual url that is used to call the MVC endpoint? Is page size/page count or skip/take passed in query string? — whipdancer
I didn't think it mattered since it makes it's own ajax call out but since you ask...yes this one is wrapped under a parent grid. — GPGVM
Take a look at this (I don't have time right now to give a full answer) and see if it helps. I solved the hierarchical grid by moving the sub-grid init to its own function. — whipdancer

GPGVM GPGVM · Accepted Answer · 2016-04-26T21:49:29

I posted this as well to Telerik forum. They answered what I was missing.

http://www.telerik.com/forums/angular-grid-datasourcerequest-pagesize-etc-always-default-values

Kendo Angular Grid ServerSide Paging-Partially Working

1 Answers