This is a migrated thread and some comments may be shown as answers.

Angular Grid DataSourceRequest PageSize etc. always default values

3 Answers 395 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 22 Apr 2016, 09:03 PM

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???

3 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 26 Apr 2016, 01:28 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Andrew
Top achievements
Rank 1
answered on 05 May 2019, 03:36 PM

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

0
Boyan Dimitrov
Telerik team
answered on 07 May 2019, 04:14 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Andrew
Top achievements
Rank 1
Share this question
or