We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid Adaptive Layout


I have been exploring adaptive layout in grids and have a couple of questions about: 


The resulting grid with vertical fields is too big vertically because I have 10 fields in my grid. I was wondering if it is possible to:

  1. Not display certain fields when the row direction is vertical (but keep them when the grid is displaying horizontally)
  2. Control the styling of the vertical grid.  For example, is it possible to reduce the white space between fields and left align fields that are right aligned in the horizontal grid.

Thank you

1 Reply

MS Monisha Saravanan Syncfusion Team December 19, 2022 11:37 AM UTC

Hi Ditchford,

Greetings from Syncfusion support.

Query: “Not display certain fields when the row direction is vertical (but keep them when the grid is displaying horizontally)”

You can use visible property of the Grid column to make column visible based on the row rendering mode.

Query: “Control the styling of the vertical grid”

You can use TextAlign and Width property of Grid column  to align the text and to reduce the Width of the DataGrid. We have prepared an simple sample. Kindly refer the attached sample for your reference.



     RenderingMode = RowDirection.Vertical;




    RenderingMode = RowDirection.Horizontal;


<SfButton @onclick="Change">Change</SfButton>


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

    <SfGrid @ref="Grid" DataSource="@Orders" AllowSorting="true" AllowFiltering="true" EnableAdaptiveUI="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" RowRenderingMode="@RenderingMode" Height="100%" Width="500" AllowPaging="true">


            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" IsPrimaryKey="true" Width="80"></GridColumn>

            <GridColumn Field=@nameof(Order.CustomerID) Visible="@IsVisible" TextAlign="TextAlign.Right" HeaderText="Customer Name" Width="120"></GridColumn>

            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" TextAlign="TextAlign.Right" Format="d" Type="ColumnType.Date" Width="130"></GridColumn>

            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" TextAlign="TextAlign.Right" Format="C2" Width="120"></GridColumn>






    public List<Order> Orders { get; set; }

    public SfGrid<Order> Grid;

    public bool IsVisible = false;

    public RowDirection RenderingMode { get; set; }


    public void Change()


          if (IsVisible)


                IsVisible = false;




                IsVisible = true;






Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid_Server1940549230.zip

If you still face any difficulties then kindly get back to us with additional details.



If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Live Chat Icon For mobile
Up arrow icon