Grid Adaptive Layout

[Ditchford]

Hello

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

RowDirection.Vertical

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

[Monisha Saravanan]

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.

 

@if(!IsVisible){

     RenderingMode = RowDirection.Vertical;

}

else

{

    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">

        <GridColumns>

            <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>

        </GridColumns>

   </SfGrid>

</div>

 

@code{

    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;

            }

            else

            {

                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.

Regards,

Monisha

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