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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the orientation (rotating) of SfDataGrid?

The orientation of SfDataGrid is customized horizontally by customizing style for SfDataGrid, GridCell and GridHeaderCellControl. SfDataGrid exposes properties: CellStyle and HeaderStyle that customizes the appearance of GridCell and GridHeaderCellControl.

To change the orientation of SfDataGrid horizontally by using Style, CellStyle and HeaderStyle properties you can refer the following code example.

XAML

 

The following section explains you how the SfDataGrid style (SfDataGridStyle1), GridCell style (GridCellStyle1) and GridHeaderCellControl style (GridHeaderCellControlStyle1) are customized to change the orientation of SfDataGrid.

SfDataGrid style (SfDataGridStyle1) is customized to rotate its content (ScrollViewer and its panel) to 270 degree using rotate transformation. When rotating SfDataGrid panel (VisualContainer), the rows become columns and columns become rows and the RowHeight & ColumnWidth remain same. Now you can change the RowHeight to ColumnWidth value and vice versa in the VisualContainer Loaded event.

Refer the following code example to customize the RowHeight and ColumnWidth in VisualContainer Loaded event.

C#

Refer the following code example to rotate the SfDataGrid ScrollViewer and the panel inside it into 270 degree by customizing SfDataGrid style (SfDataGridStyle1),

XAML

When rotating SfDataGrid panel into 270 degree, vertical Scrollbar is rotated to horizontal (is displayed at the top) and the horizontal Scrollbar is moved as vertical (is displayed at the right side). Now you can change the Scrollbar displayed at the top to bottom by customizing the ScrollViewer Style (ScrollViewerControlTemplate1). Refer the following code example.

When rotating SfDataGrid panel into 270 degree, GridCell content changed as Vertical. To display the cell content’s horizontally, you can rotate the GridCell content into 90 degree using rotate transformation by customizing GridCell style (GridCellStyle1). Refer the following code example to rotate the GridCell content by customizing GridCell style (GridCellStyle1).

XAML

Like the GridCell, you can rotate the GridHeaderCellControl content into 90 degree using rotate transformation by customizing GridHeaderCellControl style (GridHeaderCellControlStyle1) as follows.

XAML

Refer the following screenshot where the orientation of SfDataGrid is changed (Column is displayed at the left side instead of top and records are displayed horizontally instead of vertically).

Note: It is recommended not to use Filtering, Grouping, and Resizing operations when changing the Orientation of SfDataGrid.

Sample Links:

WPF

WRT

UWP

Article ID: Published Date: Last Revised Date: Platform: Control: .NET Framework:
2606 09/19/2014 03/28/2017 WPF SfDataGrid 4.5
Did you find this information helpful?
Comments
Brent Hoskisson Apr 01, 2015
The version of Syncfusion is not provided in this article. It doesn't compile with version 11.2045.0.25. Either this uses newer features or some of the references are not included in the sample.
Reply
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon