Bind kendo-ui grid from apicontroller

Question

I'm using Kendo-ui JQuery version, and I'm trying to fill a kendo-ui grid from an ApiController. My grid remains empty... What am I missing ?

Here is the result of my ApiController : ~/api/Countries :

[{"Id":4,"Name":"Germany"},
 {"Id":5,"Name":"China"},
 {"Id":6,"Name":"Myanmar"}]

Here is my ApiController code :

public class CountriesController : ApiController
{
    private DBContext db = new DBContext();

    // GET api/Countries
    [Queryable]
    public IQueryable<Country> GetCountries()
    {
        return db.Countries;
    }
}

Here is my cshtml code :

<script type='text/javascript'>

    $(document).ready(function () {
        $("#grid").kendoGrid({
            columns: [
                { field: "Id", title: "id" },
                { field: "Name", title: "name" }
            ],
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: "api/Countries"
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { type: "number" },
                            Name: { type: "string" }
                        }
                    }
                },
                pageSize: 3
            }),
            pageable: true
        });
    });

</script>

Thanks for your help.

If you watch the network traffic, is there a request made for api/Countries, and if so, what is the response code ? — Robin Giltner, Jun 13 '14 at 17:18
Thanks Robin, I usually check the network traffic, but I didn't do it this time. Don't know why!! Anyway, the response was empty because the url should be "/api/Countries" in my case and not "api/Countries". Is works! — DotNetBeliever, Jun 13 '14 at 17:46

score 0 · Answer 1 · answered Jun 13 '14 at 16:15

0

The Kendo Grid is not getting the Json back in the right format. Be sure to use the KendoMVC DataSourceRequest Object to return data in the right format for the Grid to consume.

Here is an example:

public ActionResult Update([DataSourceRequest] DataSourceRequest request, MyViewModel data)
    {
        var result = UpdateBackend(data);
        return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

Check out the Kendo demo pages for MVC for more examples: http://demos.telerik.com/aspnet-mvc/grid/index

answered Jun 13 '14 at 16:15

Jonathan Buchanan

848
4
6

Thanks Jonathan. I'm a bit lost. I'm using the JQuery Kendo UI, so client site. I thought I didn't need the server side KendoMVC. Am I wrong ? Moreover, my question was specifically about ApiController. I already succeeded with a standard MVC controller by adding something like {"data": on the json result to be supported by Kendo. If I'm correct, the result of an ApiController call can be in an other format than json. Isn't there an other way than using DataSourceRequest to send a result supported by Kendo ? – DotNetBeliever Jun 13 '14 at 17:35

score 0 · Accepted Answer · answered Jun 13 '14 at 17:20

0

In my API calls from a kendo datasource, I always have to specify it is a json return dataType, I think it defaults to jsonp.

dataSource: new kendo.data.DataSource({
  transport: {
    read: {
         url: "/api/Countries",
         dataType: 'json'
      }
  },
  schema: {
    model: {
      id: "Id",
      fields: {
        Id: { type: "number" },
        Name: { type: "string" }
      }
    }
  },
  pageSize: 3
}),

answered Jun 13 '14 at 17:20

Robin Giltner

3,057
2
18
26

As said previously (other comment), the problem was the url "api/Countries" instead of "/api/Countries". – DotNetBeliever Jun 13 '14 at 18:06

Bind kendo-ui grid from apicontroller

2 Answers2