Syncfusion Blazor Grid issue: adaptive mode not working differently for desktop and mobile width

Question

I tried to set up grid control to display differently for large and small screen resolutions. I use next configuration of SfGrid:

<SfGrid @ref="DataGrid" EnableAdaptiveUI="true" AdaptiveUIMode="AdaptiveMode.Mobile" RowRenderingMode="RowDirection.Vertical" Height="100%" Width="100%" DataSource="items">

I tried to set width for columns, but no result.

Expected behavior is changing row rendering mode from horisontal to vertical on some fixed width. Does somebody succeeded with it or have some thoughts?

Can I dynamically switch grid Vertical to Horizontal row displaying and vice versa?

Answer 1

Found official video where described how to dynamically switch between directions:

https://www.youtube.com/watch?v=RFMGdOyEWFo

Shortly, need to use SfMediaQuery component:

@code{
    private string? activeBreakpoint;
    private RowDirection rowDirection;
}
<SfMediaQuery @bind-ActiveBreakpoint="activeBreakpoint"></SfMediaQuery>
@if (activeBreakpoint == "Medium" || activeBreakpoint == "Small")
{
    rowDirection = RowDirection.Vertical;
}
else
{
    rowDirection = RowDirection.Horizontal;
}
<SfGrid @ref="DataGrid" EnableAdaptiveUI="true" AdaptiveUIMode="AdaptiveMode.Both" RowRenderingMode="@rowDirection" Height="100%" Width="100%" DataSource="items">