Razor Nested WebGrid

Question

How do I have nested WebGrid with lot of formatting for each column. I can do a nested for-loop, but I need it basically for paging. Or is there any other better option?

Answer 1

Excuse the verbose data setup but this works...

@{
    var data = Enumerable.Range(0, 10).Select(i => new { Index = i, SubItems = new object[] { new { A = "A" + i, B = "B" + (i * i) } } }).ToArray();
    WebGrid topGrid = new WebGrid(data);
}

@topGrid.GetHtml(columns:
    topGrid.Columns(
        topGrid.Column("Index"),
        topGrid.Column("SubItems", format: (item) =>
        {
            WebGrid subGrid = subGrid = new WebGrid(item.SubItems);
            return subGrid.GetHtml(
                    columns: subGrid.Columns(
                        subGrid.Column("A"),
                        subGrid.Column("B")
                    )
                );
        })
    )
)

Renders:

Of course you'll have to make sure in the GetHtml() method calls you give each grid (both top and sub) unique parameter names for paging/sorting or you'll end up with conflicts.