When you use Grid or other data-bound components, ensure that the property name casing does not change during serialization.
The data-bound Telerik UI components like the Grid, Scheduler, ListView, and more, depend on Pascal case-formatted response from the server. However, the default casing for JSON strings in ASP.NET Core is Camel case. If the serializer changes the casing to Camel, the data-bound components cannot display the data correctly.
This document describes the recommended approaches to maintain the Pascal case in different ASP.NET Core versions.
Configure JSON Serialization in ASP.NET Core 6 and the Minimal Hosting ModelFor applications using .NET 6 and the minimal hosting model, open the Program.cs
file. To set the serialization options of the application, use any of the approaches demonstrated below.
Use the default serialization that is delivered with ASP.NET Core (recommended approach).
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews()
.AddJsonOptions(options =>
options.JsonSerializerOptions.PropertyNamingPolicy = null);
builder.Services.AddKendo();
Use the Newtonsoft
library.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews()
.AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver());
builder.Services.AddKendo();
To configure the JSON serialization in ASP.NET Core 3 to 5, use any of the following approaches:
Use the default serialization that is delivered with ASP.NET Core. Locate the ConfigureServices
method and update it by adding the code below (recommended approach).
public void ConfigureServices(IServiceCollection services)
{
...
services
.AddControllersWithViews()
.AddJsonOptions(options =>
options.JsonSerializerOptions.PropertyNamingPolicy = null);
services.AddKendo();
}
Maintain the property names casing globally. Locate the ConfigureServices
method and update it by adding the using Newtonsoft.Json.Serialization;
line at the top.
using Newtonsoft.Json.Serialization;
...
public void ConfigureServices(IServiceCollection services)
{
...
services.AddMvc()
.AddNewtonsoftJson(options =>
options.SerializerSettings.ContractResolver =
new DefaultContractResolver());
services.AddKendo();
}
Use the default JSON serialization throughout the application and include the built-in System.Text.Json.JsonSerializerOptions
in the Controller Action method response.
using System.Text.Json;
public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
{
DataSourceResult result = orders.ToDataSourceResult(request);
return Json(result, new JsonSerializerOptions() { PropertyNameCaseInsensitive = false });
}
To maintain the property names casing, locate the ConfigureServices
method and update it by adding the using Newtonsoft.Json.Serialization;
line at the top.
using Newtonsoft.Json.Serialization;
...
public void ConfigureServices(IServiceCollection services)
{
...
services
.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
.AddJsonOptions(options =>
options.SerializerSettings.ContractResolver = new DefaultContractResolver());
services.AddKendo();
}
Serialization Indentation Options
For applications using .NET 9, System.Text.Json
provides indentation properties that allow you to specify an indentation character and indentation size of the JSON string.
The following example shows how to set the indentation options for the JSON result in the Grid's read request response.
public IActionResult ReadGridData([DataSourceRequest] DataSourceRequest request)
{
var gridData = new List<OrderViewModel>()
{
new OrderViewModel
{
ID = 1,
OrderName = "Name 1"
},
new OrderViewModel
{
ID = 2,
OrderName = "Name 2"
}
};
DataSourceResult result = gridData.ToDataSourceResult(request);
return Json(result, new JsonSerializerOptions() {
WriteIndented = true,
IndentCharacter = '\t',
IndentSize = 1,
});
}
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
...
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadGridData", "Home"))
...
)
)
@addTagHelper *, Kendo.Mvc
<kendo-grid name="grid">
<datasource type="DataSourceTagHelperType.Ajax">
<transport>
<read url="@Url.Action("ReadGridData","Home")"/>
</transport>
</datasource>
</kendo-grid>
The next example shows how to set the indentation options for the default JSON serialization of the application.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews()
.AddJsonOptions(options =>
{
options.JsonSerializerOptions.PropertyNamingPolicy = null;
options.JsonSerializerOptions.WriteIndented = true;
options.JsonSerializerOptions.IndentCharacter = '\t';
options.JsonSerializerOptions.IndentSize = 1;
});
builder.Services.AddKendo();
See Also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4