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