Grid with Custom Datasource Empty after read

4 posts, 1 answers
  1. Ruben
    Ruben avatar
    22 posts
    Member since:
    Sep 2017

    Posted 03 Oct 2017 Link to this post

    Hi, 

    I feel like I may be missing something, but like my title says, my grid is not populating with data after the read function. Here is my code:

    // grid

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
    </head>
    <body>
        <div>
            @(Html.Kendo().Grid<DataManager.Models.CommodityCodesViewModels.IndexViewModel>()
          .Name("commodityCodesGrid")
          .Columns(columns =>
          {
              columns.Bound(c => c.CommodityCodeId).Width(100);
              columns.Bound(c => c.CommodityCode).Width(100);
              columns.Bound(c => c.Description).Width(100);
          })
        .HtmlAttributes(new { style = "height: 700px;" })
        .Scrollable(s => s.Height(700))
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .Filterable()
        .DataSource(dataSource => dataSource
            .Custom()
            .Batch(true)
            .PageSize(20)
            .Schema(schema => schema.Model(m => m.Id(p => p.CommodityCodeId)))
            .Transport(transport =>
            {
                transport.Read(read =>
                   read.Url("http://localhost:51088/api/commoditycodes")
                       .DataType("jsonp")
                );
            })
        )
    )
        </div>
    </body>
    </html>

     

    // View Model

    public class IndexViewModel
    {
        public int CommodityCodeId { get; set; }
        [Required, MaxLength(3)]
        public string CommodityCode { get; set; }
        [Required, MaxLength(50)]
        public string Description { get; set; }
    }

     

    I have also attached two screenshots. One illustrates the returned data via the corresponding url, and the other shows the response when testing the grid. 

    Thanks,

    Ruben

  2. Ruben
    Ruben avatar
    22 posts
    Member since:
    Sep 2017

    Posted 03 Oct 2017 Link to this post

    Addendum:

    This is the web api's controller action that is being called: 

    // GET api/CommodityCodes
    //[Authorize]
    [HttpGet]
    public IQueryable<CommodityCodes> GetAll()
    {
        return _commodityCodesData.GetAll();
    }
  3. Ruben
    Ruben avatar
    22 posts
    Member since:
    Sep 2017

    Posted 05 Oct 2017 Link to this post

    Solution: It appears that the Json being returned from my api was not formatted right. First of all, it was "json" and not "jsonp". After changing the datatype, I was able to see the correct number of rows present in my grid however, they are all empty.
  4. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 05 Oct 2017 Link to this post

    Hello Ruben,

    I have examined the code and it seems that the data is serialized in camelCase. However, the properties in the Model are defined in PascalCase. Thus the Grid expects fields with different names. 

    This behavior is common in .NET Core project when the serialization is not configured. In order to do this you can modify the ConfigureServices method in Startup.cs like shown below:


    public void ConfigureServices(IServiceCollection services)
    {
        ...
        // Maintain property names during serialization. See:
        services
            .AddMvc()
            .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
     
        // Add Kendo UI services to the services container
        services.AddKendo();
    }


    If you would like more more information on configuring the Grid you would find the article below interesting.



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top