I have a WebAPI method that is returning a List<User>. This WebApi is used be several different applications and APIs, but we're attempting our first MVC app against it. I cannot get the grid to populate unless I add a ModelBinder to the WebAPI to return a DataSourceRequest. This seems rather counter-intuitive. It seems the best part of WebAPI is to accept & return generic JSON that anyone can then consume and use. But by adding the need for the DataSourceRequest, it's no longer a generic API, and will only work with Telerik. (a stretch since the result is just a JSON object with a Data[] holding the actual collection, but either way I just want to use regular ole JSON but still use the Telerik controls. What if I connect to someone elses API that just returns flat generic JSON?
So what can I do to keep my WebAPI generic, continue using JSON, and yet still have the MVC use the data in it's grid?
Here is the only way I was able to get it to work.
WebAPI Controller:
[HttpGet]
[ActionName(
"GetAllActiveUsers"
)]
[EnableCors(
"*"
,
"*"
,
"GET,POST,PUT,DELETE,OPTIONS"
)]
public
DataSourceResult GetAllActiveUsers([ModelBinder(
typeof
(DataSourceRequestModelBinder))] DataSourceRequest request)
{
List<User> allUsers = _manager.GetAllActiveUsers();
return
allUsers.ToDataSourceResult(request);
}
And here is the Grid/CSHTML Code:
@
using
Vensure.Dashboard.Data.DatabaseModels
@{
ViewBag.Title =
"Index"
;
}
@(Html.Kendo().Grid<User>()
.Name(
"ajaxGrid"
)
.Columns(cols =>
{
cols.Bound(c => c.UserId);
cols.Bound(c => c.FirstName);
cols.Bound(c => c.LastName);
cols.Bound(c => c.UserName);
cols.Bound(c => c.Email);
})
.Scrollable(s => s.Height(
"auto"
))
.Sortable()
.Pageable(pageable => pageable
.Refresh(
true
)
.PageSizes(
true
)
.ButtonCount(5))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.AutoBind(
false
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(r => r
.Type(HttpVerbs.Get)
)
.PageSize(20)
.ServerOperation(
false
))
)
<script>
$(function () {
var grid = $(
"#ajaxGrid"
).data(
"kendoGrid"
);
grid.dataSource.transport.options.read.beforeSend = function (xhr) {
xhr.setRequestHeader(
'X-Access-Token'
, getCookie(
'VensureToken'
));
};
grid.dataSource.read();
});
function getCookie(name) {
var value =
"; "
+ document.cookie;
var parts = value.split(
"; "
+ name +
"="
);
if
(parts.length == 2)
return
parts.pop().split(
";"
).shift();
}
</script>
I tried different things, such s ServerOperation both true and false, etc...