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 asked on 03 Oct 2017, 06:54 PM

getrequestdata.png

gridapplicationtestrun.png

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

Accepted

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:

// https://github.com/aspnet/Announcements/issues/194

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.

http://docs.telerik.com/aspnet-core/getting-started/getting-started

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.

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?

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

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

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.