Angular Grid DataSourceRequest PageSize etc. always default values

[John]

Hello,

I have a problem in my angular Kendo Grid not passing specified values to the controller.

This problem is very similar to these posts but the solutions didn't make a difference.

http://www.telerik.com/forums/how-do-i-use-the-datasourcerequest-object-as-an-asp-net-mvc-action-parameter

and

http://www.telerik.com/forums/datasourcerequest-sort-is-null

 

Here is the description:

 

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 200 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
}

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

[Boyan Dimitrov]

Hello John,

The kendo.aspnetmvc.min.js is a predefined parameter map in order to send the sort, group, filter and etc data information to be sent in suitable format, so it can be parsed on the server side. In order to use that predifined parameter map the type of the data source should be set to 'aspnetmvc-ajax'. 

Please refer to the attached project for more information. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Andrew]

we've been using Kendo UI for Angular (v6) and we' use MVC at endpoint to provide data for Kendo angular grid. At client end, we wanted to pass grid pagination, sorting, and filtering info to the end point for server side. Based on telerik documentation and example we use toDataSourceRequest to pass state info as DataSourceRequest to end point. here is the code at client side:

let body = toDataSourceRequest(state);         

/* it has value of page: 1
pageSize: 15
sort: "ProjectName-desc"
__proto__: Object

*/

let headers: HttpHeaders = new HttpHeaders();         

headers = headers.append('Content-Type', 'application/json');      headers = headers.append('UserUniqueId', this.globalService.userUniqueId || '');    headers = headers.append('Authorization', this.globalService.authorizationToken || '');        headers = headers.append('ClientCode', this.globalService.defaultClientCode || '');         

let headerOptions = { headers: headers };         

var returnObj = this.http.post(url, body, headerOptions)     

.catch(this.handleError);         

return returnObj;

At the end point:

public HttpResponseMessage GetLoanRequests([DataSourceRequest] DataSourceRequest request)        {

}

However, request has sorts of null

request {Kendo.Mvc.UI.DataSourceRequest}
+ Aggregates Count = 0
Filters null System.Collections.Generic.IList<Kendo.Mvc.IFilterDescriptor>
Groups null System.Collections.Generic.IList<Kendo.Mvc.GroupDescriptor>
Page 1 int
PageSize 15 int
Sorts null System.Collections.Generic.IList<Kendo.Mvc.SortDescriptor>

We're your long time customer and Please help. Thanks.

Andrew

[Boyan Dimitrov]

Hello Andrew,

Could you please share some code about the grid configuration so we can have better idea of the grid configuration and test it on our side? Any additional information about your scenario will be very helpful. 

Regards,
Boyan Dimitrov
Progress Telerik