Creating a row-major grid

[Randy More]

Hello All.
I am attempting to create a row-major grid.

My project is a Blazor WebAssembly Standalone App.

The attempt is to be able to edit attributes of a record (element in our parlance) where each attribute is a different row and there are 1 to N instances of elements each in a column.

I have tried a bunch of ways but the most obvious seems to be to just manually create the grid.  The following example builds the correct grid topology but all of the values are just blank.

@page “/”
@using Smart.Blazor

<h3>Row Major Grid</h3>

<Grid DataSource=”@GridRows”>
<Columns>
@foreach (var col in GridColumns)
{
<Column Label=”@col.Label” />
}
</Columns>
</Grid>

@code {
private List<GridColumn> GridColumns;
private List<GridRow> GridRows;

private List<string> attributeNames = new() { “Height”, “Weight”, “Color”, “Speed”, “Density” };
private List<string> elementNames = new() { “Elem1”, “Elem2”, “Elem3” };

protected override void OnInitialized()
{
BuildGridColumns();
BuildGridRows();
}

private void BuildGridColumns()
{
GridColumns = new List<GridColumn>();

// First column (Attribute Name, read-only)
GridColumns.Add(new GridColumn
{
DataField = “AttributeName”,
Label = “Attribute”,
AllowEdit = false
});

// One column per element
foreach (var element in elementNames)
{
GridColumns.Add(new GridColumn
{
DataField = element,
Label = element
});
}
}

private void BuildGridRows()
{
GridRows = new List<GridRow>();

foreach (string attr in attributeNames)
{
GridRow row = new GridRow();
List<GridRowCell> cells = new List<GridRowCell>();
cells.Add(new GridRowCell() { Value = attr });

foreach (var element in elementNames)
{
GridRowCell cell = new GridRowCell();
cell.Value = $”{attr}_{element}”;
cells.Add(cell);
}

row.Cells = cells;
GridRows.Add(row);
}
}
}

[Randy More]

turns out transposed grids are not natively supported in Smart.Blazor as in some other packages.
may I suggest this would be a nice feature in future.
In any event can just transpose the data in code and get a similar result, just a bit of bother

[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/

[Author]

Posts