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

Binding Grid to AJAX JSON

2 Answers 340 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 06 Oct 2016, 10:41 PM

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

2 Answers, 1 is accepted

Sort by
0
Joe
Top achievements
Rank 1
answered on 07 Oct 2016, 02:49 PM
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.
0
Viktor Tachev
Telerik team
answered on 10 Oct 2016, 11:40 AM
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.



Regards,
Viktor Tachev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Joe
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or