MVC WebGrid Dynamic Columns

Question

So I have a model that contains a list of meta data items that is customizable per user.

public class MyModel {
    public int ID { get; set; }
    public String Name { get; set; }
    public DateTime Created { get; set; }

    // Need to diplay each as a column
    public List<MetaData> Data { get; set; }
}
public class MetaData {
    public int ID { get; set; }
    public String Name { get; set; }
    public String Label { get; set; }
    public String Value { get; set; }
}

For each metadata item on MyModel I need to add a column to the WebGrid that has the name as the column name, the label as the header, and the value outputted for each MyModel.

@{
    WebGrid grid = new WebGrid(source: Model, rowsPerPage: 5, canPage: true);

    List<WebGridColumn> cols = new List<WebGridColumn>();
    cols.Add(grid.Column("Name", "Name"));
    cols.Add(grid.Column("Created"));
    for (int i = 0; i < Model.FirstOrDefault().Data.Count; i++)
    {
        cols.Add(grid.Column(Model.FirstOrDefault().Data[i].Name, Model.FirstOrDefault().Data[i].Label,
            format: item => @<text>@item.Data[i].Value</text>
        ));
    }
}

@grid.GetHtml(
    tableStyle: "table",
    htmlAttributes: new { id = "MyGrid" },
    columns: cols)

The metadata columns are shared between all MyModels so each one will not have a new set of columns. The name and label will be the same throughout the different MyModel's. If anyone can help, it would be much appreciated.

score 2 · Accepted Answer · edited May 23 '17 at 11:45

When the lambda syntax gets too complex, you can switch to using Html.Raw. Also, it seems you have a sort of "modified closure" issue with the index, because the runtime is trying to use the last value of i -- you can fix this by making a "local" (inside the loop) copy of i. This works for me:

for (int i = 0; i < Model.First().Data.Count; i++)
{
    int local = i;
    cols.Add(grid.Column(Model.First().Data[i].Name, Model.First().Data[i].Label, 
        format: item => Html.Raw("<text>" + item.Data[local].Value + "</text>")
    ));
}

Edit

Hacking at the "format" lambda ... this also apparently works:

format: item => @item.Data[local].Value

MVC WebGrid Dynamic Columns

1 Answers1

Linked