@model IQueryable<Person>

@(Html
    .Grid(Model)
    .Build(columns =>
    {
        columns.Add(model => model.Name).Titled("Name").Hidden();
        columns.Add(model => model.Surname).Titled("Surname");
        columns.Add(model => model.MaritalStatus).Titled("Marital status");

        columns.Add(model => model.Age).Titled("Age").Width(150);
        columns.Add(model => model.Birthday).Titled("Birthday").Formatted("{0:d}");
        columns.Add(model => model.IsWorking).Titled("Employed");
    })
    .Empty("No data found")
    .Named("preferences")
    .Configure(...) // Load configuration from backend, otherwise use client side function.
    .Filterable()
    .Sortable()
    .Pageable()
)

[HttpGet]
public ViewResult Index()
{
    return View(Context.Set<Person>());
}

const configuration = localStorage.getItem("grid-config");
const grid = new MvcGrid(document.querySelector(".mvc-grid"));

if (configuration) {
    // Client side configuration function
    grid.configure(JSON.parse(configuration));
}

document.getElementById("GridConfigure").addEventListener("click", function () {
    new MvcGrid(document.querySelector(".mvc-grid")).showConfiguration(this);
});

document.addEventListener("gridconfigure", e => {
    const grid = e.detail.grid;
    const configuration = grid.getConfiguration();

    // Save configuration to a cookie/local storage/backend/etc.
    // Every configuration should have a unique name for every grid, preferrably grid name.
    localStorage.setItem("grid-" + grid.name, JSON.stringify(configuration));
});