Trouble populating Grid from Web API JSON

9 posts, 1 answers
  1. Roy
    Roy avatar
    6 posts
    Member since:
    Jan 2013

    Posted 16 Oct 2017 Link to this post

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

     

     

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 18 Oct 2017 Link to this post

    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.
  3. Roy
    Roy avatar
    6 posts
    Member since:
    Jan 2013

    Posted 20 Oct 2017 Link to this post

    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.

     

  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 24 Oct 2017 Link to this post

    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.
  5. Roy
    Roy avatar
    6 posts
    Member since:
    Jan 2013

    Posted 24 Oct 2017 in reply to Stefan Link to this post

    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

     

  6. Answer
    Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 26 Oct 2017 Link to this post

    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.
  7. Roy
    Roy avatar
    6 posts
    Member since:
    Jan 2013

    Posted 26 Oct 2017 in reply to Stefan Link to this post

    Thanks Stefan

    That finally worked

     

    Many thanks for the help

  8. Tariq
    Tariq avatar
    5 posts
    Member since:
    Mar 2020

    Posted 01 Apr 2020 in reply to Stefan Link to this post

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

     
  9. Aleksandar
    Admin
    Aleksandar avatar
    242 posts

    Posted 03 Apr 2020 Link to this post

    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.
Back to Top