Trouble populating Grid from Web API JSON

[Roy]

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"
        }
    ]
});

 

 

[Stefan]

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

[Roy]

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.

 

[Stefan]

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

[Roy]

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

 

[Stefan]

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

[Roy]

Thanks Stefan

That finally worked

 

Many thanks for the help

[Tariq]

 [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.

 

[Aleksandar]

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