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. Image for the cookie policy date

transpose rows and columns of datagrid

Hi,
How do i change the orientation of the datagrid so the columns are down the left-hand side, rather than along the top.
This article demonstrates what I'm trying to achieve ... https://www.grapecity.com/en/blogs/4-steps-to-creating-an-inverted-datagrid.
Eg

Change

 |Column1|Column2|Column3|
1|Data1.1|Data1.2|Data1.3|
2|Data2.1|Data2.2|Data2.3|

to

       |1      |2      |3
Column1|Data1.1|Data2.1|Data3.1
Column2|Data1.2|Data2.2|Data3.2
Column3|Data1.3|Data2.3|Data3.3

Cheers,
James.

4 Replies

DY Deivaselvan Y Syncfusion Team March 27, 2019 06:06 AM UTC

Hi James,

Thank you for using Syncfusion products.

You can refer the below article to change the orientation of the DataGrid and let us know if this helps you.

https://www.syncfusion.com/kb/2606/how-to-change-the-orientation-rotating-of-sfdatagrid

Regards,
Deivaselvan 



JR James Randle March 27, 2019 10:58 AM UTC

Hi,
That helps, thanks!

Unfortunately though, all the columns are a fixed width, and some of my column's data is variable width, so some of the columns do not display the full data.
Eg

       |1      |2      |3      |
Column1|DATAOK |DATAOK |DATAOK |
Column2|DATAOK |DATAOK |DATAOK |
Column3|LONGDAT|LONGERD|LONGDAT|

should be

       |1       |2         |3       |
Column1|DATAOK  |DATAOK    |DATAOK  |
Column2|DATAOK  |DATAOK    |DATAOK  |
Column3|LONGDATA|LONGERDATA|LONGDATA|

How do i resize the columns so that the data is visible, depending on the length of the text?

Thanks again,
James.


DY Deivaselvan Y Syncfusion Team March 28, 2019 05:02 PM UTC

Hi James, 

We have analyzed your query to resize the column width based on the data in transposed SfDataGrid. We are currently validating the feasibility to achieve your requirement and we will update you with more details on 1st April,2019. 

We will appreciate your patience until then. 

Regards, 
Deivaselvan 



DB Dinesh Babu Yadav Syncfusion Team April 2, 2019 10:05 AM UTC

Hi James, 
 
Thanks for your patience. 
 
We have analyzed your query to auto fit the column based on the data in transposed SfDataGrid. And you can achieve this by using QueryRowHeight event and customizing the GridColumnSizer as like below code snippet 
 
this.datagrid.GridColumnSizer = new CustomerGridColumnSizer(); 
this.datagrid.QueryRowHeight += datagrid_QueryRowHeight; 
 
private void datagrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) 
        { 
            if (e.RowIndex > this.datagrid.GetHeaderIndex()) 
            { 
                e.Height = (this.datagrid.GridColumnSizer as CustomerGridColumnSizer).GetAutoRowWidth(e.RowIndex); 
                e.Handled = true; 
            } 
        } 
 
public class CustomerGridColumnSizer : GridColumnSizer 
    { 
        public double GetAutoRowWidth(int rowIndex) 
        { 
            var rowData = this.DataGrid.GetRecordAtRowIndex(rowIndex); 
            double autoWidth = double.NaN; 
            foreach(var col in this.DataGrid.Columns) 
            { 
                var width = GetAutoWidth(col,rowData); 
                if (double.IsNaN(autoWidth)) 
                    autoWidth = width; 
                else if (width > autoWidth) 
                    autoWidth = width; 
            } 
            return autoWidth; 
        } 
 
        public double GetAutoWidth(GridColumn column, object record) 
        { 
            var colIndex = this.DataGrid.Columns.IndexOf(column); 
            int scrollColumnIndex = this.DataGrid.ResolveToScrollColumnIndex(colIndex); 
            double colWidth = this.DataGrid.GetVisualContainer().ColumnWidths[scrollColumnIndex]; 
            double rowHeight = this.DataGrid.GetVisualContainer().RowHeights.DefaultLineSize; 
            double resultWidth = 0; 
            int stringLenth = 0; 
            object rowData = null; 
            var clientSize = new Size(colWidth, rowHeight); 
            if (record == null) 
               return 0; 
 
            if (column is GridTemplateColumn) 
            { 
                var textsize = this.GetCellSize(clientSize, column, record, GridQueryBounds.Width); 
                if (textsize.IsEmpty) 
                    return 0; 
                resultWidth = textsize.Width; 
            } 
            else 
            { 
                var text = this.GetDisplayText(column, record); 
                if (text.Length >= stringLenth) 
                { 
                    stringLenth = text.Length; 
                    rowData = record; 
                } 
            } 
 
            if (!(column is GridTemplateColumn)) 
            { 
                var textsize = this.GetCellSize(clientSize, column, record, GridQueryBounds.Width); 
                resultWidth = textsize.Width; 
            } 
            return Math.Round(resultWidth); 
        } 
    } 
 
Please find sample for the same from the below link 
 
 
Please let us know, if you need any further assistance on this. 
 
Regards,
Dinesh Babu Yadav
 
 


Loader.
Live Chat Icon For mobile
Up arrow icon