Is there a way to invert the rows and columns in a grid?

[Unknown]

Is there a way to invert the rows and columns in a grid?  

if yes, please let me know through an example

[Vignesh Natarajan]

Hi Leeeunlin,  

 

Thanks for contacting Syncfusion support. 

 

Query: “Is there a way to invert the rows and columns in a grid? ”  

 

We have analyzed your query and we suspect that you want to render a Transposed Grid (inverted rows and columns). We do not have direct support for transposed Grid, but we can achieve your requirement to display the Transposed Grid with ExpandoObject using ColumnTemplate feature of the Grid. 

 

Refer the below code example.  

 

<SfGrid TValue="ExpandoObject" GridLines="GridLine.Horizontal" RowHeight="60" Width="auto" DataSource="@Transposed" AllowSelection="false" EnableHover="false"> 

    <GridColumns> 

        @foreach (var col in Cols) 

        { 

            <GridColumn Field="@col"> 

                <Template> 

                    @{ 

                        dynamic data = (context as ExpandoObject); 

                        <span>@(((IDictionary<String, Object>)data)[col])</span> 

                    } 

                </Template> 

            </GridColumn> 

        } 

    </GridColumns> 

</SfGrid> 

 

 

Refer the below screenshot for your reference 

 

 

 

Kindly download the sample from below which we have prepared using above solution.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/161011/ze/DataGrid-1399264502  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template  

https://blazor.syncfusion.com/documentation/datagrid/templates/  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

 

[Unknown]

I checked the working code with your help.

This is very beautiful

But there is one problem

Only the characters have changed within the same code, but the top line looks like a header.

And I want to adjust the column spacing and keep it fixed. Can you tell me how?

[Vignesh Natarajan]

Hi Leeeunlin,  

 

Thanks for the update.  

 

Query1: “Only the characters have changed within the same code, but the top line looks like a header.” 

 

We have analyzed your query and we are able to reproduce the reported behavior at our end when Bootstrap theme is used. We suggest you to use the below style tag in you application to resolve the issue. We have accessed the grid header and changed its font weight 

 

<style> 

    .e-grid .e-gridheader .e-headercell .e-headercelldiv { 

        font-weight: normal; 

    } 

</style> 

 

 

Query2: “I want to adjust the column spacing and keep it fixed. Can you tell me how?” 

 

We suggest you to achieve your requirement using Width property of the GridColumn. Refer the below code example for your reference 

 

<SfGrid TValue="ExpandoObject" GridLines="GridLine.Both" RowHeight="60" Width="400" DataSource="@Transposed" AllowSelection="false" EnableHover="false">    <GridColumns>        @foreach (var col in Cols)        {            <GridColumn Field="@col" Width="150">                <Template>                    @{                        dynamic data = (context as ExpandoObject);                        <span>@(((IDictionary<String, Object>)data)[col])</span>                    }                </Template>            </GridColumn>        }    </GridColumns></SfGrid>

 

For your convenience we have modified the sample using above solution. Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/161011/ze/DataGrid-Up-1619761785  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan  

 

[Unknown]

Everything works fine

But still the top part is fixed and looks like a header.

Can I set the overall size of the grid to 100% and only reduce the size of the left column?

Can you solve both problems?

[Vignesh Natarajan]

Hi Leeeunlin,  

 

Thanks for the update.  

 

Query1: “But still the top part is fixed and looks like a header” && “Can I set the overall size of the grid to 100% and only reduce the size of the left column?” 

 

Yes, we can define the overall size of Grid as 100% by defining the Width and Height property of Grid as 100%. By default Grid height and width will be adjusted to browser’s width, when width and height property of Grid is defined as 100%, then it will consider the immediate parent elements width and height. So kindly ensure to define the static height and width to immediate parent element of Grid.  

 

And also we have modified an condition while transposing the datatable and remove the Grid header to resolve the first query. Please find the modified code example. 

 

<div style="width: 800px;height: 450px"> 

    <SfGrid TValue="ExpandoObject" GridLines="GridLine.Both" RowHeight="60" Width="100%" Height="100%" DataSource="@Transposed" AllowSelection="false" EnableHover="false"> 

        <GridColumns> 

            @foreach (var col in Cols) 

            { 

                <GridColumn Field="@col" Width=@(Cols.IndexOf(col) == 0 ? "50" : "100")> 

                    <Template> 

                        @{ 

                            dynamic data = (context as ExpandoObject); 

                            <span>@(((IDictionary<String, Object>)data)[col])</span> 

                        } 

                    </Template> 

                </GridColumn> 

            } 

        </GridColumns> 

    </SfGrid> 

</div> 

<style> 

    .e-grid .e-gridheader { 

        display: none; 

    } 

    .e-grid .e-gridcontent { 

        border-top: 1px solid; 

        border-top-color: rgb(222, 226, 230); 

    } 

</style> 

  

@code{ 

    DataTable dtFlat; 

    public void GenerateListFromTable(DataTable input) 

    { 

        Transposed = new List<ExpandoObject>(); 

        System.Dynamic.ExpandoObject ECol = new System.Dynamic.ExpandoObject(); 

        foreach (DataColumn col in input.Columns) 

            ECol.TryAdd(col.ColumnName, col.ColumnName); 

        Transposed.Add(ECol); 

        foreach (DataRow row in input.Rows) 

        { 

            System.Dynamic.ExpandoObject e = new System.Dynamic.ExpandoObject(); 

            foreach (DataColumn col in input.Columns) 

                e.TryAdd(col.ColumnName, row.ItemArray[col.Ordinal]); 

            Transposed.Add(e); 

        } 

    } 

 

Also we have modified the width of the first column using a ternary condition in Width property of GridColumn.  

 

Please find the modified sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/161011/ze/DataGrid-Up1549385783  

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

 

 

[Calculei Calculei]

is it possible to do the same in a angular project?

[Prathap Senthil]

We have branched a new thread for your last query. We close this thread now for any updates or further communication regarding that particular request, we kindly ask you to refer to the following thread -Inverting the rows and columns in EJ2 Angular grid - Branched from 161011 | Angular - EJ 2 Forums | Syncfusion