I am using Radzen Blazor Studio and I have a Master-Child Grid where Master grid occupying pretty much full width of the page. You can see in image - it is bordered with a blue rectangle.
All the field widths are individually specified there and in my case I get a scroll bar at the bottom of Master Grid and looks fine so far.
The problem is - my Child grid (when expanding the master by clicking a record) is also always occupying entire length of Parent Grid (including the length outside the blue rectangle), i.e. Despite I have only a few columns and ideally they also should well fit within small area but still they are getting distributed across the entire length) this is not acceptable by users. They want, child grid also to behave same way as its parent. i.e. it should respect the outer blue border of the Parent grid and if at all Child is having too many field or big length field then Child should have additional Scroll bar - just like the parent one instead of completely taking over a huge width.
What happens when the row is collapsed? I suspect the parent grid is too wide to begin width and has a horizontal scroll from the start. As a result the child grid stretches to fit all available space. You can try setting the width of the nested grid to some pixel value e.g.
<RadzenDataGrid style="width: 800px" ...>
However I still think you will have horizontal scroll because of the number of columns in the parent grid.
"What happens when the row is collapsed? I suspect the parent grid is too wide to begin width and has a horizontal scroll from the start." --- Ofcourse yes! I already mentioned that. Having a scroll bar in the grid is not at all a problem if that grid is having many columns or columns with big length. Still here (for the parent grid) we get - nicely aligned "Add" button outside grid, which is not floating all around.
But consider about the child. Here as soon as it is occupying the grid width beyond the fixed length of parent, then even to add any element, first we need to scroll the parent grid till the right. That's where my problem is. I'd here also expect it to behave the same way as parent... i.e. it will have a fixed area and when there are many columns then there will be a scroll bar on child grid to scroll to right.
That's what I'm missing somehow (i.e. the scroll bar for child grid).
The child grid has no width by default (unless you set it) and as a result takes all available space - which is the width of the parent grid (total width). This is why I suggested to set the width of the child grid in my previous reply.
Unfortunately, 800px is not an option I can go for because it then spoils responsiveness totally. So sadly, to view child grid's column we are stuck to use parent grid's scrollbar.
Radzen might not agree - but certainly there should be a better way. There should be some way to capture the fixed width of parent grid dynamically and assign that as max width for child grid.
I'll see if I play with java script here to do something. Thanks anyways...
That's a great idea. Many Thanks @korchev - I now used 80vw and looks much nicer. viewport width still seems not fully responsive but upon certain extent (which is sufficient for me) it works great...
