Trouble to display kendo grid with model containing db subsets

4 posts, 0 answers
  1. Ewa
    Ewa avatar
    2 posts
    Member since:
    Oct 2018

    Posted 01 Oct 2018 Link to this post

    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);
                }
            }
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 03 Oct 2018 Link to this post

    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:


    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Ewa
    Ewa avatar
    2 posts
    Member since:
    Oct 2018

    Posted 03 Oct 2018 in reply to Viktor Tachev Link to this post

    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

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 05 Oct 2018 Link to this post

    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:


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


    Regards,
    Viktor Tachev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top