Kendo UI Grid and WebApi (Working with JSON)

[Sanket]

Hi,

I am trying to create HTML5 Kendo UI Grid which will receive JSON data from ASP.NET WebApi.

Below is this ApiController which returns JSON as below-

public class ProductsController : ApiController
    {
        // GET api/<controller>
        public JsonResult Get()
        {
            var jsonString = "[{\"ProductID\":1, \"ProductName\":\"Chai\", \"UnitPrice\":18, \"UnitsInStock\":39, \"Discontinued\":false},{\"ProductID\":2, \"ProductName\":\"Coffee\", \"UnitPrice\":18, \"UnitsInStock\":39, \"Discontinued\":false}]";

            var result = new JsonResult
            {
                JsonRequestBehavior = JsonRequestBehavior.AllowGet,
                Data = JsonConvert.SerializeObject(jsonString),
            };

            return result;
        }

 

Below is the HTML part where Kendo Grid read data from WebApi Get method


angular.module("KendoDemos", ["kendo.directives"])
            .controller("MyCtrl", function ($scope) {
                $scope.mainGridOptions = {
                    dataSource: {
                        transport: {
                            read: {
                                url: "http://localhost:50986/api/Products", //url: "api/Products",
                                type: "GET",
                                dataType: "json"
                            },
                        },
                        pageSize: 25,
                        serverPaging: true,
                        serverSorting: true,
                        batch: true,
                        schema: {
                            data: "d",
                            type: 'json',
                            model: {
                                id: "ProductID",
                                fields: {
                                    ProductID: { editable: false, nullable: false },
                                    ProductName: { validation: { required: true } },
                                    UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                                    Discontinued: { type: "boolean" },
                                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                }
                            }
                        }
                    },
                    navigatable: true,
                    height: 700,
                    pageable: true,
                    filterable: true,
                    //columnMenu: true,
                    selectable: true,
                    toolbar: ["create", "save", "cancel", "excel"],


                    columns: [
                                { field: "ProductName", title: "Product Name" },
                                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120, filterable: { multi: true } },
                                { field: "UnitsInStock", title: "Units In Stock", width: 120, filterable: { multi: true } },
                                { field: "Discontinued", width: 120, filterable: { multi: true } },
                                { command: ["edit", "destroy"], title: "&nbsp;", width: 350 }],

                    editable: "popup"
                };


            })

Whenever I ran this example it doesn't display any data on screen. Could you please help me on this?

Cheers
Sanket

 

[Genady Sergeev]

Hello Sanklet,

Please make sure that you call ToDataSourceResult on the list of data that you return. Example code:

public DataSourceResult GetTokenModels([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
{
    return db.TokenModels.ToDataSourceResult(request);
}

In this particular example TokenModels is IQueryable but there is extension for IEnumerable as well.

Regards,
Genady Sergeev
Telerik

 

 

[Sanket]

Hi Genady,

 Thanks for your response.

I believe, ToDataSourceResult is only available KendoUI for ASP.NET MVC

 

In my scenario, I am using HTML5 Kendo UI and trying to get results from WebApi.

In my WebApi, I am not able to find DataSourceResult or DataSourceRequest. Do I need to add specific namespace in order to use this?

Please your thoughts on this.

 

Cheers

Sanket

[Sanket]

In another case, I am using below Get method where in I receives all records from webapi and grid shows all records irrespective of pageSize.

        // GET api/Audit
        public IQueryable<AUDIT> GetAUDIT()
        {
            return db.AUDIT;
        }

Anything I am missing anything here?

 

Cheers

Sanket

[Dimitar Terziev]

Hello Sanket,

Here you could find a sample project showing how to use the Grid for KendoUI bound to WebApi.

Regards,
Dimitar Terziev
Telerik

 

 

[Sanket]

Hi Dimitar

Thanks for your reply. I have already gone through this example.

 

As mentioned earlier, I believe, ToDataSourceResult is available with KendoUI for ASP.NET MVC.

In my scenario, I am using HTML5 Kendo UI and trying to get results from WebApi. In normal WebApi, I am not able to find DataSourceResult or DataSourceRequest.

Any workaround for this?

 

Cheers

Sanket

[Boyan Dimitrov]

Hello Sanket,

 

Indeed both DataSourceResult method or DataSourceRequest are part of the Kendo.MVC.dll file. 

 

An alternative solution would be to use the approach shown in the CRUD operations with WebAPI example. 

 

Regards,
Boyan Dimitrov
Telerik