How to Transpose a WinForms Datagrid in Two Easy Steps

What You Will Need

• ComponentOne WinForms Edition
• Visual Studio 2022

Controls Referenced

• FlexGrid

Tutorial Concept

How to create a transposed grid that flips the rows and columns so that the headers display down the left side and rows display across the screen.

---

A transposed datagrid swaps the rows and columns so that the headers display down the left side and rows display across the screen.

In this blog, we will demonstrate the benefits of transposing a datagrid and how to create one in WinForms using the DataGridView and FlexGrid controls. This blog will discuss:

• Reasons to Transpose a Datagrid
• How to Transpose the .NET DataGridView
  • Create a New DataTable and Swap Rows and Columns
  • Transpose FlexGrid for WinForms

Why Transpose a Datagrid?

A transposed display prioritizes horizontal scrolling with horizontal traversing down a column. One use case is optimizing data entry. For example, if users need to quickly edit all records for a single field (column), they may find it easier to traverse this operation horizontally rather than vertically. This is because different grids and applications may handle the Tab and Enter keys differently, and every user has their own preference.

Another use case is data analysis. If your data has more columns than rows, transposing a datagrid can be a quicker way to discover trends and compare data across rows. Take a look at the following example from Dragon Group Hotels.

First, we see the data in a traditional datagrid. Each row represents a different hotel property, but we have to expand our window or scroll to see the entire dataset.

Dragon Hotel Group Traditional View

When we transpose the datagrid, we can see more data in our view.

Dragon Hotel Group Transposed View

Transposing is great not only for column-heavy data sets but also for column-based selection! Consider the above data set—if we want to allow the selection of a field, such as “Room Revenue,” it’s much more intuitive to transpose the grid so that users can select the row. Column selection is not as intuitive or typical because clicking column headers also sorts, filters, and reorders the grid.

For example, now we can select “Room Revenue” easily and bind it to our data visualization (pie chart).

Transposed View Enables Easier Column Selection

By transposing the data, we can streamline the report structure, converting it into a format where each hotel property’s performance metrics are listed in rows. This rearrangement significantly enhances the report's readability and analysis, allowing stakeholders to quickly identify trends, patterns, and areas of improvement across the Dragon Group of Hotels' properties.

How to Transpose the .NET DataGridView

The DataGridView is the .NET Windows Forms datagrid control. This control lacks a built-in feature for transposing, so it can only be accomplished with some brute-force workarounds.

Solution: Create a New DataTable and Swap Rows and Columns

As users have pointed out on StackOverflow, a straightforward approach is to create a new DataTable at runtime that flips your rows and columns before populating the DataGridView. 

This only requires about 12 lines of code for a quick solution, but there are some serious considerations:

• You are duplicating your data set in memory and may be losing some of the features because the DataGridView still thinks it’s a regular datagrid.
• You have to customize the DataGridViewRow.HeaderCell.Value to set your column header and hide the default column headers.
• You may want to create a dummy column to act as the row headers and manually populate this column with your header texts.
• Every cell will likely need to be a string, so you may lose automatic numeric and date formatting.
• If you have more than one data type in your columns (which are now displayed as a row), it may be a problem since the DataType is defined at the column level in DataGridView. Overriding the DataGridView to define the data type at the row or cell level is not recommended for performance reasons.

The truly best way to achieve transposed views is to create your own datagrid implementation so that you can handle every concern, such as column data types, row headers, selection, sorting, filtering, etc. This would take a long time and require hundreds of lines of code, which is why developers typically turn to a third-party datagrid control for this feature.

Easier Solution: Transpose FlexGrid for WinForms

Starting with the 2024 v1 update, you can now easily create a transposed datagrid view using FlexGrid for WinForms. This feature is supported in .NET Framework 4.6.2, 4.8, .NET 6, and .NET 8. It’s also supported for WPF, WinUI, Blazor, and .NET MAUI, though the code is slightly different.

You can enable the transposed feature in WinForms with just two easy steps.

1. Set the “Transposed” property to true.
2. Call the FlexGrid’s AutoSizeCols() and AutoSizeRows() methods.

Step two is technically optional, as these methods impact performance (text measuring), but they will make the datagrid look its best. Below is the full code snippet and animation if we ran this code behind a checkbox:

    c1FlexGrid1.Transposed = true;
    c1FlexGrid1.AutoSizeRows();
    c1FlexGrid1.AutoSizeCols();

Additionally, you can hide the column headers and set the row header style to gray if you want them to contrast with the rows.

    // set fixed cell back color
    c1FlexGrid1.Styles["Fixed"].BackColor = Color.LightGray;
    // hide column headers
    c1FlexGrid1.Cols.Fixed = 0;

You can check out a full sample on GitHub.

Conclusion

Transposing a datagrid is a feature you’re better off using a third-party UI control to handle for you. Even if you follow the DataGridView advice posted above, smaller issues are bound to pop up since the control never really knows it’s transposed. The best solution is to extend your own DataGridView or leverage one like FlexGrid to do the job.