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.
