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.

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.

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

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

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

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.