Responsive Grid with AdaptiveUI

[Art Vandelay]

I am looking into the AdaptiveUI option for the Grid, but I am not able to have it work as expected. 

I thought that the rendermode (vertical/horizontal) would be set automatically by the screen size, so for large screens the grid would look like default, but on smaller screens it will switch to vertical.

Using a button to set it programmatically is pretty straightforward, but I would like it to be responsive depending on the screen size.

<div style="position:relative; min-height: 500px;">
  <SfGrid DataSource="@Orders"
    AllowSorting="true"
    AllowFiltering="true"
    EnableAdaptiveUI="true"
    AdaptiveUIMode="AdaptiveMode.Both"
    Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" Height="100%" Width="100%" AllowPaging="true">
    <GridFilterSettings Type="@Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings>
    <GridColumns>
      <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="80"></GridColumn>
      <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
      <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" Width="130"></GridColumn>
      <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="120"></GridColumn>
    </GridColumns>
  </SfGrid>
</div>

Large screen

Small screen (resized), where I would expect vertical rows


How to achieve this?

 

[Monisha Saravanan]

Hi Art Vandelay,

We suggest you achieve your requirement by using SfMediaQuery.

SfMediaQuery allows you to switch between vertical and horizontal mode by considering the screen size. Kindly check the attached sample and code snippet for additional reference.

Here we have used @bind-ActiveBreakPoint. Which will be triggered when the browser screen size is smaller and we can switch to our respective modes as per our requirement. For detailed information please refer the below attached documentation.

Reference: https://blazor.syncfusion.com/documentation/media-query/break-points

 

<p>DataGrid Adaptive UI layout using Media Query Component</p>

 

<div style="position:relative; min-height: 500px;">

    <SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint" />

    @if (activeBreakpoint == "Small")

    {

        rowDirection = RowDirection.Vertical;

    }

    else

    {

        rowDirection = RowDirection.Horizontal;

    }

    <SfGrid DataSource="@Orders" AllowSorting="true" AllowFiltering="true"

            EnableAdaptiveUI="true" AdaptiveUIMode="@AdaptiveUIMode" RowRenderingMode="@rowDirection"

            Height="100%" Width="100%" AllowPaging="true"

            Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })”>

        <GridColumns>

   </SfGrid>

</div>

 

}

Please let us know if you have any concerns.

Regards,

Monisha

Attachment: BlazorApp1_f4210026.zip