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?

Sceptre

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.

Ogden

+1 I need paging only for outer grid. Inner grid will have at the most 5 to 7 rows and I might not make it more than one column. So for nested grid, I'm planning to have one long column with all Model fields formatted in it. – Sceptre