kendo ui grid not working with .net core - postgresql

Question

I am trying to get Kendo UI grid MVC working in a .net core, reading data from PostgreSQL database.
I set up a project, connected it to a database, scaffolded controller with appropriate views and it's working ok (meaning CRUD operations are working ok).
Now I want to hook it up with Kendo.
I followed guide from kendo website and installed successfully (although it didn't offer pro version in nugget so I had to install trial??). I added all those CSS/js files in _Layout.cshtml
this is my code in controller:
public ActionResult kendo()
{
return View();
}
// GET for Kendo
public ActionResult Categories_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(GetCategories().ToDataSourceResult(request));
}
public static IEnumerable<Category> GetCategories()
{
var result = from c in _context.Categories
select new Category()
{
Id = c.Id,
Name = c.Name
};
return result;
}
this is my code in kendo.cshtml
#(Html.Kendo().Grid<Category>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Title("id");
columns.Bound(c => c.Name);
})
.HtmlAttributes(new { style = "height: 550px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Categories_Read", "Categories"))
.PageSize(20)
)
Model is simple
public class Category
{
public int Id { get; set; }
public string Name { get; set; }
}
The problem is that there is no data displayed in kendo grid. I can see in debugger that there is request going forward and data coming backwards but nothing is shown in grid.
?

Answer 1

The problem is most probably caused by the new ASP.NET Core serialization mechanism. Follow the guidelines in the "second" Step 4 here:
http://docs.telerik.com/kendo-ui/aspnet-mvc/mvc-core/getting-started
Step 4 Open Startup.cs, using a text editor (IDE) and update it as described below.
Locate the ConfigureServices method and add a call to services.AddKendo at the end.
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();
}
Locate the Configure method and add a call to app.UseKendo at the end.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
...
// Configure Kendo UI
app.UseKendo(env);
}
UPDATE
In order to verify that the above configuration is applied, check the server response and see if it has the following structure and letter casing for Data and Total:
{
"Data": [
{ "Id": "1", "Name": "Name 1" },
{ "Id": "2", "Name": "Name 2" }
],
"Total": "2"
}

Answer 2

I had the same problem in a .net core 3.1 project, the solution here is to add the following lines in Startup.cs:
services
.AddMvc()
.AddJsonOptions(options =>
{
options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
options.JsonSerializerOptions.PropertyNamingPolicy = null;
});
services.AddKendo();