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

Trouble populating Grid from Web API JSON

8 Answers 174 Views
This is a migrated thread and some comments may be shown as answers.
Roy
Top achievements
Rank 1
Roy asked on 16 Oct 2017, 07:23 PM

Hi

I'm having trouble binding my grid to my Web API, the grid is always empty. Is there something I may have missed.

My Web API returns the following JSON:

{"Contacts":[{"Id":1,"Salutation":"Mr","FirstName":"David","LastName":"","Address1":"10 High Street","City":"Birmingham","Postcode":"B76 1FP"},{"Id":2,"Salutation":"Mr","FirstName":"Fred","LastName":"Bloggs","Address1":"5 Birmingham Road","City":"Solihull","Postcode":"B26 1EW"}]}

 

I have a Kendo Grid setup like this:

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
                dataType: "json",
                url: "http://localhost:54604/api/Contacts"
            }
        },
        pageSize: 20,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { type: "number"},
                    Salutation: { type: "string"},
                    FirstName: { type: "string" },
                    LastName: { type: "string" },
                    Address1: { type: "string" },
                    City: { type: "string" },
                    Postcode: { type: "string" }
                }
            },
            data: "Contacts"
        }
    },
    height: 550,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [
        {
            field: "Salutation"
        },
        {
            field: "FirstName",
            title: "First Name"
        },
        {
            field: "LastName",
            title: "Last Name"
        },
        {
            field: "Address1",
            title: "Address 1"
        },
        {
            field: "City"
        },
        {
            field: "Postcode"
        }
    ]
});

 

 

8 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 18 Oct 2017, 10:43 AM
Hello, Roy,

Thank you for the provided code and the response.

I made an example using the same configuration, the response, and the Grid was populated as expected on my end:

http://dojo.telerik.com/IXiha

Please ensure that there are no JavaScript errors or small difference in the response format.

If the issue still occurs, please provide a fully runnable example and I will gladly assist.

Regards,
Stefan
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.
0
Roy
Top achievements
Rank 1
answered on 20 Oct 2017, 05:50 PM

Hi Stefan

I'm still having the same problems, I've added a link to the ASP MVC project.

https://www.dropbox.com/s/4eeiqzj6hm1qtve/ContactsFrontend.zip?dl=0

I can't see anything wrong with either my javascript or the response.

Thanks for your help.

 

0
Stefan
Telerik team
answered on 24 Oct 2017, 07:02 AM
Hello, Roy,

Thank you for the example.

The actual WebApi was missing, and I was not able to observe the WebApi implementation and the returned result.

Still, I can suggest checking the following article for the Grid with WebApi which contains the required steps:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/binding/web-api-server-operations

If the issue still occurs, please provide a full solution with the WebApi, and I will gladly assist.

Regards,
Stefan
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.
0
Roy
Top achievements
Rank 1
answered on 24 Oct 2017, 06:59 PM

Hi Stefan

Thanks for getting back to me

I'm still having issues populating the grid

I've included my web service in the solution this time:

https://www.dropbox.com/s/u71bob573ce2ahb/Contacts.zip?dl=0

 

Many thanks

 

0
Accepted
Stefan
Telerik team
answered on 26 Oct 2017, 08:36 AM
Hello, Roy,

Thank you for the runnable example.

After testing it I noticed that a CORS error was displayed in the console:

"Failed to load http://localhost:54604/api/Contacts: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:60916' is therefore not allowed access."

Once the error was resolved, the records were received correctly by the Grid.

Please check if the same error does not occur on your end as well:

https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present/28848096

If there is no JavaScript error in the console, please check the network tab if the request is successful and if it is, please check the data in the preview.

Regards,
Stefan
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.
0
Roy
Top achievements
Rank 1
answered on 26 Oct 2017, 06:17 PM

Thanks Stefan

That finally worked

 

Many thanks for the help

0
Tariq
Top achievements
Rank 1
answered on 02 Apr 2020, 12:19 AM

 [AcceptVerbs("Get")]
        public ActionResult GetAllSec1([DataSourceRequest]DataSourceRequest request)
        {
            try
            {
                HBLTradeInSecurityViewModel TradeInSecurity = new HBLTradeInSecurityViewModel();
                ServiceRepository serviceObj = new ServiceRepository();
                HttpResponseMessage response = serviceObj.GetResponse("/api/HblTradeInSecurities/GetAllHBLTradeINSec?brcode=" + "01");
                response.EnsureSuccessStatusCode();
                List<Models.HBLTradeInSecurityViewModel> data = response.Content.ReadAsAsync<List<Models.HBLTradeInSecurityViewModel>>().Result;
                DataSourceResult result1 = data.ToDataSourceResult(request);
                //ViewBag.Title = "All Blotter";
                //   return View(TradeInSec);
                // return Json(data, JsonRequestBehavior.AllowGet);
                // return Json(result1);
                return Json(result1, JsonRequestBehavior.AllowGet);
            }
            catch (Exception)
            {
                throw;
            }
        }

===============================================================================================

             <div class="row clearfix">
                                               @(Html.Kendo().Grid<HBLTradeInKendoUIBootstrap.Models.HBLTradeInSecurityViewModel>()
                                                .Name("gridSec")
                                                .AutoBind(false)

                                                    .HtmlAttributes(new { @class = "ra-section" })
                                                    .Columns(columns =>
                                                    {
                                                        columns.Bound(p => p.ID).Title("ID").Width(5);                                                ;
                                                        columns.Bound(p => p.Security).Title("Security ID").Width(15); //.Locked(true).Lockable(false); ;
                                                        //columns.Bound(p => p.EnableValue).Title("ON/OFF").Width(8).ClientTemplate("<input type='checkbox' \\#= Active ? checked='checked' :'' \\# />"); ;
                                                        columns.Select().Width(10);
                                                        columns.Bound(p => p.S_MAT_DATE).Title("Mat. Date").Width(11);
                                                        columns.Bound(p => p.DaystoMaturity).Title("DTM").Width(8);
                                                        columns.Bound(p => p.LongValue).Title("Long").Width(8);//.Filterable(ftb => ftb.Multi(true)); ;
                                                        columns.Bound(p => p.SizeMM1).Title("Size MM").Width(12);
                                                        columns.Bound(p => p.Bid).Title("Bid").Width(8);
                                                        columns.Bound(p => p.Ask).Title("Ask").Width(8);
                                                        columns.Bound(p => p.SizeMM2).Title("Size MM").Width(12);
                                                        columns.Bound(p => p.ShortValue).Title("Short").Width(8);// .ClientTemplate("<input type='checkbox' disabled='disabled' #=MadeChoicePresets2IsSelected ? checked='checked' : '' # />");
                                                        columns.Bound(p => p.MinAmt).Title("Min Amt.").Width(6);
                                                        columns.Bound(p => p.LastValue).Title("Last").Width(6);
                                                        columns.Command(command => { command.Edit(); }).Width(15);
                                                    })
                                                    //.ToolBar(toolbar => toolbar.Create())
                                                    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AdminCustomEdit"))
                                                    .Pageable()
                                                    .Sortable()
                                                    .Scrollable()
                                                    .Events(ev => ev.Change("onChange"))
                                                    .PersistSelection()

                                                    .HtmlAttributes(new { style = "height:500px;" })

                                                    .DataSource(dataSource => dataSource
                                                     .Ajax() //Specify that Ajax binding is used.
                                                     .Model(model =>{model.Id(p => p.ID);})
                                                     //.Read(read => read.Action("GetAllSec1", "HBLTradeInSecurity")) // Set the action
                                                     .Read(read => read.Url("/HBLTradeInSecurity/GetAllSec1").Type(HttpVerbs.Get))
                                                     .Update(update => update.Action("Update", "HBLTradeInSecurity"))
                                                    ))
                                                    <script type="text/javascript">
                                                        function error_handler(e) {
                                                            if (e.errors) {
                                                                var message = "Errors:\n";
                                                                $.each(e.errors, function (key, value) {
                                                                    if ('errors' in value) {
                                                                        $.each(value.errors, function () {
                                                                            message += this + "\n";
                                                                        });
                                                                    }
                                                                });
                                                                alert(message);
                                                            }
                                                        }
                                                        function onChange(arg) {
                                                            kendoConsole.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");
                                                        }
                                                    </script>

                                            </div>

===================================================================================================

same problem in one view it working, i just copy and past in another view it only displaying raw data.

 
0
Aleksandar
Telerik team
answered on 03 Apr 2020, 03:28 PM

Hello Tariq,

I reviewed the provided code, but I could not find an obvious reason for the reported behavior. I can suggest checking this demo on WebAPI data binding and this on Ajax data binding, as I see the data source in the code snippet provided is configured for Ajax binding. More details on Axaj data binding can be found here.

To be able to assist further I will ask you to send a sample solution where the issue can be observed. This way I can investigate further and provide a possible solution.

Regards,
Aleksandar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Roy
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Roy
Top achievements
Rank 1
Tariq
Top achievements
Rank 1
Aleksandar
Telerik team
Share this question
or