Reply To: Creating a row-major grid

[Markov]

Hi Randy,

My colleague, just sent you a support email. I will post it here as well

Please, find below an example of a Transposed Grid in Blazor. We pass data with rows and columns, transpose it and pass it to the Grid to display it.

Hope this helps:

<Grid DataSource="@TransposedRows">
    <Columns>
        <Column DataField="AttributeName" Label="Attribute" />
        @foreach (var col in OriginalRowNames)
            {
                <Column DataField="@col" Label="@col" />
            }
        </Columns>
    </Grid>

@code {
    // Original data (e.g., 3 rows × 4 columns)
    private List<Dictionary<string, object>> OriginalData = new()
    {
        new Dictionary<string, object>{{"Name","Elem1"},{"Height",180},{"Weight",75},{"Color","Red"}},
        new Dictionary<string, object>{{"Name","Elem2"},{"Height",165},{"Weight",60},{"Color","Blue"}},
        new Dictionary<string, object>{{"Name","Elem3"},{"Height",172},{"Weight",68},{"Color","Green"}}
    };

    private List<ExpandoObject> TransposedRows = new();
    private List<string> OriginalRowNames = new();
    private List<string> Attributes = new();

    protected override void OnInitialized()
    {
        TransformData();
    }

    private void TransformData()
    {
        // Extract row names (from "Name" field)
        OriginalRowNames = OriginalData.Select(d => d["Name"].ToString()).ToList();

        // Extract attributes (keys except "Name")
        Attributes = OriginalData.First().Keys.Where(k => k != "Name").ToList();

        // Build transposed rows
        foreach (var attr in Attributes)
        {
            dynamic newRow = new ExpandoObject();
            var dict = (IDictionary<string, object>)newRow;
            dict["AttributeName"] = attr;

            for (int i = 0; i < OriginalData.Count; i++)
            {
                dict[OriginalRowNames[i]] = OriginalData[i][attr];
            }

            TransposedRows.Add(newRow);
        }
    }

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/