Grid Multirow Header Groups

This example shows how to use multi-row header groups in a grid.
The HeaderGroups method is used to define the header groups.
We match the columns to the header groups using the HeaderGroups property of the Column.

GridMultiRowHeaderGroups/Index.cshtml


@(Html.Awex().Grid<Lunch>("GridHg")
    .Main()
    .HeaderGroups(
        new HeaderGroup { Content = "Main details", Level = 0, Id = "main" },
        new HeaderGroup { Content = "Dinner details", Level = 0, Id = "dinfo" },
        new HeaderGroup { Content = "Chef", Id = "chef", Level = 1 },
        new HeaderGroup { Content = "Address", Id = "addr", Level = 1 })
    .Columns(b => {
        b.Add(o => o.Id, new Column { Width = 75, Groupable = false, Resizable = false });
        b.Add(o => o.Person, new Column { HeaderGroups = new[] { "main" } });
        b.Add(o => o.Dish.Name, new Column { HeaderGroups = new[] { "main" } });
        b.Add(o => o.Price, new Column { Width = 100 });
        b.Add(o => o.Date, new Column { Width = 120, HeaderGroups = new[] { "dinfo" } });
        b.Add(o => o.Location, new Column { HeaderGroups = new[] { "dinfo", "addr" } });
        b.Add(o => o.Country.Name, new Column { Header = "Country", HeaderGroups = new[] { "dinfo", "addr" } });
        b.Add(o => o.Chef.FirstName, new Column {Header = "First Name", HeaderGroups = new[] { "dinfo", "chef" } });
        b.Add(o => o.Chef.LastName, new Column { Header = "Last Name", HeaderGroups = new[] { "dinfo", "chef" } });
    })            
    .Url(Url.Action("GetItems", "LunchGrid"))
    .Resizable()
    .Reorderable()
    .Height(400))

Comments