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

Grid with Custom Datasource Empty after read

5 Answers 1360 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ruben
Top achievements
Rank 1
Ruben asked on 03 Oct 2017, 06:54 PM

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

5 Answers, 1 is accepted

Sort by
0
Ruben
Top achievements
Rank 1
answered on 03 Oct 2017, 06:58 PM

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();
}
0
Ruben
Top achievements
Rank 1
answered on 05 Oct 2017, 12:10 PM
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.
0
Accepted
Viktor Tachev
Telerik team
answered on 05 Oct 2017, 01:53 PM
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.
0
serge
Top achievements
Rank 2
Bronze
Iron
Iron
answered on 26 Apr 2021, 08:11 AM | edited on 27 Apr 2021, 06:09 PM

@Victor, why didn't Telerik adapt the samples on the default .NET Core serialization?

That is, camelCase? In the documentation you gave, there is any word on the json / serialization configuration. How the developers should guess about it?

0
Mihaela
Telerik team
answered on 27 Apr 2021, 01:54 PM

Hi Serge,

The article below describes how to configure the JSON serialization in the ASP.NET Core project:

https://docs.telerik.com/aspnet-core/compatibility/json-serialization

When the Telerik UI Grid for ASP.NET Core is bound to a strongly-typed model, it expects that the property name casing from the response matches the casing of the Model. To make sure that the names of the Model's properties are aligned with these defined in the grid, it is required to update the ConfigureServices method as is stated in the article above.

In addition, the Custom DataSource type of data binding provides the ability to specify the field of the original record which value to be used in the Model method configuration. This is the "From" method.

As per your feedback that the article does not contain information about the default casing, we will consider mentioning this. By design, this is specific to the ASP.NET Core framework and such information can be found in the official Microsoft resources. 

In case of any other questions, don't hesitate to let me know.

 

Regards, Mihaela Lukanova Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

serge
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 27 Apr 2021, 06:13 PM | edited

Mihaela, imagine I just started using telerik, installed the Nuget, and followed all the recommendations to install telerik in the ASP.NET Core application. Now, I try to use the Grid... Any of the GettingStarted flows does not bring me to the page you linked. So, people who starts using Telerik should every time spend a lot of time, so, money, and nerves, to try to understand what is happening, when the problem is just the Json serialisation, to be configured.
Mihaela
Telerik team
commented on 28 Apr 2021, 01:45 PM

Hi Serge,

Thank you for your suggestion on how to improve the "Getting Started" section in the documentation for Telerik UI for APS.NET Core. I agree that the document related to the JSON serialization should be linked in the First-Steps articles.

Thanks again for your feedback. If there is anything else that you have spotted and needs attention/improvement, let us know.

Tags
Grid
Asked by
Ruben
Top achievements
Rank 1
Answers by
Ruben
Top achievements
Rank 1
Viktor Tachev
Telerik team
serge
Top achievements
Rank 2
Bronze
Iron
Iron
Mihaela
Telerik team
Share this question
or