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

connect to remote API

1 Answer 124 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vadim
Top achievements
Rank 1
Vadim asked on 26 Oct 2017, 07:01 AM

I am having problem connect to Web API CORE

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using Example.API.Data;
using Microsoft.AspNetCore.Authorization;
using ExampleAPI.Models;

namespace Example.API.Controllers
{
   
    [Produces("application/json")]
    [Route("api/Activity")]
    public class ActivityController : Controller
    {
        private readonly SampleContext _context;

        public ActivityController(SampleContext context)
        {
            _context = context;
        }

        // GET: api/Activity
        [HttpGet]
        public IEnumerable<Activity> Read()
        {
           return _context.Activity.ToList();
        }
    }
}
the code above returns JSON string back , I can see it in the browser
http://localhost:49624/api/Activity

but my grid is empty

<!DOCTYPE html>
<html>
<head>
    
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.silver.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.3.1018/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1018/js/kendo.all.min.js"></script>
    

</head>
<body>

        <div id="example">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            transport: {
                                read: {
                                    url: "http://localhost:49624/api/Activity",
                                    dataType: "jsonp"
                                },
                                parameterMap: function (data, operation) {
                                    return JSON.stringify(data);
                                }
                            },
                            schema: {
                                model: {
                                    fields: {
                                        ActivityID: { type: "number" }
                                    }
                                }
                            },
                            pageSize: 20
                         
                        },
                        height: 550,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                                field:"ActivityID"
                         
                            }
                        ]
                    });
                });
            </script>
</div>


</body>
</html>

I found an example of Web API Core 
http://demos.telerik.com/aspnet-core/grid/webapi
I replaced my HttpGet with:

        [HttpGet]
        public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
        {
            var result = _context.Activity.ToList();
            return result.AsReadOnly().ToDataSourceResult(request);
        }
A break point in the Get method never hit when I run it in the VS and I navigate in the browser to
http://localhost:49624/api/Activity

Thanks for your help




1 Answer, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 27 Oct 2017, 02:22 PM
Hi,

I am not sure why the debugger is not hit when debugging but I have suggestion on how to resolve the issue in regards of the blank grid.

If you inspect the result returned from the service of our online demo you will notice that it has the following format
{
    "Data": [.... the data],
    "Total": 77,
    "AggregateResults": null,
    "Errors": null
}
Where Data is an array with the data and Total contains the total number of records. The result is returned in such a way because ToDataSourceResult(on the server) is called which returns a new DataSourceResult object that has Data and Total properties assigned. If you modify the service to return the data in the same way and provide values for the schema data and total properties which indicate the data source to read from the response object in particular places to extract the data and total, all should be good.

Regards,
Angel Petrov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Vadim
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Share this question
or