Preview
# Name Surname Marital status Age Birthday Employed
1 Joe Crosswave Married 32 1/5/1992 Unemployed
2 Merry Lisel Widowed 42 5/6/1982 Unemployed
3 Henry Crux Single 30 11/19/1994 Employed
4 Cody Jurut 50 8/11/1974 Unemployed
5 Simon Scranton Single 35 10/10/1989 Unemployed
6 Leena Laurent Divorced 20 7/1/2004 Unemployed
7 Ode Cosmides Married 54 4/17/1970 Employed
8 Diandra Mizner Single 21 8/20/2003 Unemployed
9 Pete Cassel Married 23 3/13/2001 Unemployed
10 Nicky Tremblay Married 32 1/5/1992 Employed
11 Mary Cassel Married 25 7/10/1999 Employed
View

@model IQueryable<Person>

@(Html
    .Grid(Model)
    .Build(columns =>
    {
        columns.Add(model => Html.CheckBox("Check_" + model.Id)).Titled(Html.CheckBox("CheckAll"));
        columns.Add().RenderedAs((model, row) => row + 1).Titled("#").Css("text-center");

        columns.Add(model => model.Name).Titled("Name");
        columns.Add(model => model.Surname).Titled("Surname");
        columns.Add(model => model.MaritalStatus).Titled("Marital status");

        columns.Add(model => model.Age).Titled("Age");
        columns.Add(model => model.Birthday).Titled("Birthday").Formatted("{0:d}");
        columns.Add(model => model.IsWorking).Titled("Employed").RenderedAs(model => model.IsWorking == true ? "Employed" : "Unemployed");
    })
)

Javascript

<script>
    document.getElementById("CheckAll").addEventListener("change", function () {
        document.querySelectorAll("[id^='Check_'").forEach(checkbox => checkbox.checked = this.checked);
    });
</script>