Binding Grid to AJAX JSON

3 posts, 0 answers
  1. Joe
    Joe avatar
    220 posts
    Member since:
    May 2012

    Posted 06 Oct 2016 Link to this post

    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:

    [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";
        .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"))
        .Pageable(pageable => pageable
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .DataSource(dataSource => dataSource
            .Read(r => r
        $(function () {
            var grid = $("#ajaxGrid").data("kendoGrid");
   = function (xhr) {
                xhr.setRequestHeader('X-Access-Token', getCookie('VensureToken'));
        function getCookie(name) {
            var value = "; " + document.cookie;
            var parts = value.split("; " + name + "=");
            if (parts.length == 2) return parts.pop().split(";").shift();


    I tried different things, such s ServerOperation both true and false, etc...

  2. Joe
    Joe avatar
    220 posts
    Member since:
    May 2012

    Posted 07 Oct 2016 in reply to Joe Link to this post

    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.
  3. Viktor Tachev
    Viktor Tachev avatar
    2499 posts

    Posted 10 Oct 2016 Link to this post

    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.

    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
Back to Top