Question about DataGrid Master Detail Hierarchy on demand

Radzen.Blazor Components
1

Hi guys,

Just a quick question about "Hierarchy on demand" demo provided on the website -> Blazor DataGrid Component - Hierarchy on Demand | Free UI Components by Radzen.

Side note: The master datagrid has the expandmode set to single, this is the reason only 1 child datagrid is shown at a time. When removing the expandmode single multiple child datagrid can be shown at the same time.

In my case the child datagrids are of type -> DataGrid InLine Editing
Now the issue is that when multiple inline edit datagrids are shown, only the last expanded works. I think this is because all the inline edit datagrids have the same @ref on component level.

The structure looks something like this,

Take for example a project that has 5 items, and each item has 2 appointments.

<RadzenDataGrid Data="project.Items">
   <Template Context="item">
      <RadzenDataGrid Data="item.Appointments" @ref="grid">
           Inline columns and such
      </RadzenDataGrid>
   </Template>
</RadzenDataGrid>

For example grid.EditRow(order) is used inside Async Task EditRow. But there are multiple grid objects in my case, and my assumption is that the latest is used.

I would like to know if and how it would be possible to make this work, any thoughts?

2

Your observation is correct - in line editing in hierarchical mode is supported only in single expand mode by default in our template. To support this in multiple expand mode you need to change how the reference are kept and retrieved - most probably by data item, not as simple variable.

3

Thank you for the quick response, are there any examples or demo's that roughly showcase setting this up? Many thanks!

4

I’m afraid we don’t have such example.

UPDATE: This thread might help you: c# - Add @ref to a Blazor component in a loop - Stack Overflow

5

Thank you, I think I got it working for now by:

  • Created a new dictionary on this page:
Dictionary<int, RadzenDataGrid<ItemDate>> gridList = new Dictionary<int, RadzenDataGrid<ItemDate>>();
  • Add all the required items to the dictionary in OnInitialized
            foreach (PhaseItem phaseItem in projectPhase.Items)
            {
                RadzenDataGrid<ItemDate> grid = new RadzenDataGrid<ItemDate>();
                gridList.Add(phaseItem.Id, grid);
            }
  • And just use the previously created structures like so:
<RadzenDataGrid @ref="gridList[item.Id]"/>

Finally, adjusted the required Tasks like so (counts for all Tasks btw)

    async Task EditRow(ItemDate itemDate)
    {

        if (itemDatesToInsert.Count() > 0)
        {
            Reset();
        }

        itemDatesToUpdate.Add(itemDate);

        await gridList[itemDate.PhaseItem.Id].EditRow(itemDate);
    }
6

Got all the default methods working, the only one that isn't working is InsertRow

    async Task InsertRow(int phaseItemId)
    {
        try
        {
            Reset();

            //New appointment, first create the newly desired objects
            ItemDate newItemDate = new ItemDate();

            Appointment newAppointment = new Appointment();
            newAppointment.Subject = "Subject";

            //Set parent and/or related objects to the newly created objects
            newItemDate.PhaseItemId = phaseItemId;
            newItemDate.Appointment = newAppointment;

            itemDatesToInsert.Add(newItemDate);

            RadzenDataGrid<ItemDate> gridForInsertion = gridList[phaseItemId];
            await gridForInsertion.InsertRow(newItemDate);

           
        }
        catch (Exception)
        {
            throw;
        }
    }

No errors or exceptions, the row just isn't added. I'm sure I receive the correct DataGrid from the debugger.

Any thoughts?

7

Fixed, the data source I used before was a cast to observable collection, this somehow prevented the inline new row to be added.