Binding Grid to AJAX JSON

[Joe]

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
            .Url("http://localhost/Vensure.Dashboard.Service/api/User/GetAllActiveUsers")
            .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...

[Joe]

To anyone else that runs into this, I suppose the best approach is to have the Grid call into an MVC Controller, which then would call into the WebAPI, get the List<User> back, and convert it to a DataSourceResult there.  It also allows for easier adding of custom headers than using the javascript beforeSend event.

[Viktor Tachev]

Hi Joe,

Thank you for sharing your solution with the community.

On a side note, please examine the following article that describes how you need to configure the Grid in order to work with Web API.

• http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/editing/webapi-editing

Regards,
Viktor Tachev
Telerik by Progress