Invisible data for nested datagrids after selecting a row

If you have nested datagrids, selecting a row makes some data from the nested grid dissappear because the applied CSS styles don't let you to see it, even if it is there.

Before selecting the row:

After selecting the row:

Hovering over the dissappeared row:

The DataGrid makes the cell text white on hover. We never anticipated that someone would put another DataGrid in a cell and in general don't recommend it.

When you have very complex objects, you need to edit stuff using several nesting levels. I'm evaluating your components and I was going to recommend my boss to purchase a support license for them, as they are good (although the validation UI feedback for the form controls seems to be missing! and the autocomplete does not have server side search implemented in blazor), but if nesting datagrids is not supported, this is a major showstopper for me. I hope you reconsider.

Actually, the problem happened in a dialog that was opened from a datagrid (dg1), and the dialog had a datagrid (dg3) inside another datagrid (dg2). dg3 is going to have buttons to open a dialog and will have another datagrid inside...

DataGrid hierarchy is supported via the detail template. We don't think adding a DataGrid in a regular cell of another DataGrid is good UX.

IMHO there is no good or bad. It depends on the circunstances. Using goto is usually a bad practice but in some complex validation code it can make the code much more clear.

Anyway... can you at least provide an AllowSelecting property? The row selection css classes are inserted if the RowSelect callback has a delegate. There is no way to turn it off dynamically. I have components that configure the datagrid with the datagrid with the same configuration we use in all the pages, and in most of them we do use selection with several preconfigured cases (open in dialog, redirect to page, etc). However, in cases like the one above, we would want to disable the insertion of the css classes for selection without having to configure the datagrid, and that is not possible right now. So, please, could you provide an AllowSelecting property to turn that off dynamically?

The selection classes are applied when the user handles the RowSelect event. Introducing another property for the same purpose is unnecessary.

I agree. However, chaning callbacks can only be done in the same class or in subclasses, so I had to subclass the grid to allow disabling the selection dynamically.

Anyway, nesting datagrids seems to work nicely (even hierarchical ones) with the exception of the selected styles making the text dissapear in the example I posted above.