Is it possible to assign data fields to rows instead of columns?

[Bertrand Spitz]

Hi,

I have the following code.

@code {

    public List<VOR_Data> VOR_Datas = new List<VOR_Data>();

    protected override void OnInitialized()

    {

        VOR_Datas.Add(new VOR_Data(0.0, 0.0, 0.0, 0.0));

        VOR_Datas.Add(new VOR_Data(45.0, 0.0, 0.0, 0.0));

        VOR_Datas.Add(new VOR_Data(90.0, 0.0, 0.0, 0.0));

    }

    public class VOR_Data

    {

        public VOR_Data(double alphaRx, double alphaMesure, double erreur, double tdm30Hz)

        {

            AlphaRx = alphaRx;

            AlphaMesure = alphaMesure;

            Erreur = erreur;

            Tdm30Hz = tdm30Hz;

        }

        public double AlphaRx { get; set; }

        public double AlphaMesure { get; set; }

        public double Erreur { get; set; }

        public double Tdm30Hz { get; set; }

    }

}

Which gives the following result.

But what I need is something as shown below.

So I need to have the headers on the left and the data displayed in columns instead of rows.

Is it possible to achieve this with the DataGrid component?

Thank you

[Keerthana Ganesan]

Hi Bertrand,

Thanks for contacting Syncfusion support.

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 using the ColumnTemplate feature of the Grid.

Refer to 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

Refer to 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,

Keerthana.