telerik asp.net core grid not displaying returned data

Question

This should be a easy solution, but I have been beating on it for 2 hours.

I have a telerik grid defined here:

  @(Html.Kendo().Grid<Models.LOB.RebateAssignedUpc>
                        ().Name("gridCustomers")
                        .Columns(c =>
                        {
                            c.Bound(e => e.Id).Title("Id");
                            c.Bound(e => e.Upc).Title("UPC");

                        })
                        .Groupable()
                  .DataSource(source =>
                  {
                      source.Custom()
                      .Transport(transport =>
                      {
                          transport.Read("GetUPCs", "Upc2");
                      });

                  })
    )  

It is calling this method in the controller, which I have verified is called and is getting data:

public ActionResult GetUPCs()
    {
        List<RebateAssignedUpc> upcDetails = db.RebateAssignedUpc.ToList();

        var result = db.RebateAssignedUpc.Select(x => new
        {
           x.Id,
           x.Upc
        }).ToList();

        var output = JsonConvert.SerializeObject(result);

        return Json(output);

    }

the grid displays but with no data, it does have the columns and the group by section is showing. Using a breakpoint in the controller the output is showing:

"[{\"Id\":1,\"Upc\":\"12345\"},{\"Id\":2,\"Upc\":\"12346\"},{\"Id\":5,\"Upc\":\"12345\"}]"

Using f12 I verified that the controller is returning this data to the browser:

"[{\"Id\":1,\"Upc\":\"12345\"},{\"Id\":2,\"Upc\":\"12346\"},{\"Id\":5,\"Upc\":\"12345\"}]"

I tried manually doing it this way as well:

 List<RebateAssignedUpc> upc = new List<RebateAssignedUpc>{
               new RebateAssignedUpc{Id = 1, Upc = "1234"}

               };

        string jsonString = JsonConvert.SerializeObject(upc);

        return Json(jsonString);

Answer 1

I defined the grid wrong in the beginning and I also needed to provide Schema data.

  @(Html.Kendo().Grid<WebPortal.Controllers.upcReturnData>().Name("gridCustomers")
                                                 .Columns(
                                    c =>
                                    {
                                        c.Bound(e => e.upc).Title("UPC");

                                    })
                                    .Scrollable()
                                    .Resizable(resize => resize.Columns(true))
                                    .DataSource(source =>
                                    {
                                        source.Custom()
                                        .Transport(transport =>
                                        {
                                            transport.Read("GetUPCs", "upc2");
                                        }).Schema(schema =>
                                        {
                                            schema.Data("dataReturned");

                                        });
                                    })

The controller and the partial class of upcReturnedData used in defining the grid:

 public ActionResult GetUPCs()
        {
           // List<upcReturnData> upcDetails = db.RebateAssignedUpc.ToList();

            var result = db.RebateAssignedUpc.Select(x => new
            {
               id= x.Id,
               upc=x.Upc

            }).ToList();


            return Json( new { dataReturned = result });

        }
public partial class upcReturnData
{
    public int id { get; set; }
    public string upc { get; set; }

}