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