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

Kendo UI Grid and WebApi (Working with JSON)

6 Answers 1176 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sanket
Top achievements
Rank 1
Sanket asked on 18 Jan 2016, 05:23 PM

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

 

6 Answers, 1 is accepted

Sort by
0
Genady Sergeev
Telerik team
answered on 20 Jan 2016, 04:40 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sanket
Top achievements
Rank 1
answered on 21 Jan 2016, 04:03 AM

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

0
Sanket
Top achievements
Rank 1
answered on 21 Jan 2016, 06:38 AM

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

0
Dimitar Terziev
Telerik team
answered on 25 Jan 2016, 08:03 AM
Hello Sanket,

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

Regards,
Dimitar Terziev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sanket
Top achievements
Rank 1
answered on 25 Jan 2016, 11:26 AM

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

0
Boyan Dimitrov
Telerik team
answered on 27 Jan 2016, 04:24 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Sanket
Top achievements
Rank 1
Answers by
Genady Sergeev
Telerik team
Sanket
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Boyan Dimitrov
Telerik team
Share this question
or