Trouble to display kendo grid with model containing db subsets

[Ewa]

I have a grid of model with subset collection property like this:

    public partial class MenuGroup
    {
        public MenuGroup()
        {
            Item = new HashSet<Item>();
        }

        public int Id { get; set; }
        public string Label { get; set; }

        public virtual ICollection<Item> Item { get; set; }
    }

When the `Item` subsets are empty the grid displays without problems.

When the subsets have any items (eg. `Count > 0`) the grid breaks and does not display any records.

My grid:

            @(Html.Kendo().Grid<MenuGroup>().Name("menu")
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.Label);
                      columns.Command(cmd => cmd.Edit());
                  })
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .Model(model => model.Id(m => m.Id))
                      .Read(read => read.Action("Read", "Menu"))
                  )
                  .ToolBar(x=>x.Create())

                  .Pageable()
                  .Sortable()
            )

I am using Entity Framework to populate the menu:

        public async Task<ActionResult> Read([DataSourceRequest]DataSourceRequest request)
        {
            var model = _menuRepository.GetMenuWithItems();

            return Json(model.ToDataSourceResult(request), new JsonSerializerSettings { ContractResolver = new DefaultContractResolver() });
        }

This is my repository:


        public IEnumerable<MenuGroup> GetMenuWithItems()
        {
            try
            {
                var model = _context.MenuGroup.Include(m => m.Item);
                //var model = _context.MenuGroup; // This set (without items) displays well)

                return _context.MenuGroup.Include(m => m.Item);
            }
            catch (Exception err)
            {
                throw new Exception("Error getting the menus: " + err);
            }
        }

[Viktor Tachev]

Hello Ewa,

Would you examine the browser DevTools and see if there are any errors listed when requesting the items? If there are they can point in the right direction.

Also I noticed that async method is used for reading the data. Please try using the ToDataSourceResultAsync method and see how the behavior changes. You can see more about ToDataSourceResultAsync in the Axax binding article below:

• https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding

In case the issue persists please send us a runnable sample where the behavior is replicated so we can examine it locally.


Regards,
Viktor Tachev
Progress Telerik

[Ewa]

I don't get any errors in the console nor in Kendo UI browser console.

The grid displays, it's just empty.

 

With async result method I get this: List<MenuGroup> does not contain definition for ToDataSourceResultAsync

The problem does not disappear though if the method is called synchronously

[Viktor Tachev]

Hi Ewa,

Would you examine the response from the server in the browser DevTools and see how the fields are serialized? By default .NET Core will serialize data using camel case. In such scenario the Grid will not be able to show the data as it expects the fields to be in pascal case. 

In order to specify that the fields should be serialized in pascal case please set the SerializerSettings as described in step 5 from the article below:

• https://docs.telerik.com/aspnet-core/getting-started/getting-started

If the behavior persists please send us a sample project where it is replicated so we can examine it.


Regards,
Viktor Tachev
Progress Telerik