[HttpGet]
public ActionResult Index()
{
    if (HttpContext.Request.Headers.XRequestedWith == "XMLHttpRequest")
        return PartialView("_IndexGrid", repository.GetPeople());

    return View();
}

@Html.AjaxGrid(Url.Action("Index"))

@model IQueryable<Person>

@* Should only include grid declaration *@

@(Html
    .Grid(Model)
    .Build(columns =>
    {
        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 => DateTime.Now).Titled("Time stamp");
    })
)

const grid = document.querySelector(".mvc-grid");

// Triggered when grid's row is clicked. It's recommended to use event delegation in ajax scenarios.
document.addEventListener("rowclick", e => {
    e.detail.data - clicked row's data from columns.
    e.detail.grid - grid's instance.
    e.detail.originalEvent - original tr click event which triggered the rowclick.
});

// Triggered before grid starts loading. It's recommended to use event delegation in ajax scenarios.
document.addEventListener("reloadstart", e => {
    e.detail.grid - grid's instance.
});

// Triggered after grid stop loading. It's recommended to use event delegation in ajax scenarios.
document.addEventListener("reloadend", e => {
    e.detail.grid - grid's instance.
});

// Triggered after grid reload fails. It's recommended to use event delegation in ajax scenarios.
document.addEventListener("reloadfail", e => {
    e.detail.reason - failed response promise reason.
    e.detail.grid - grid's instance.

    // Preventing default stops failed promise from bubbling out.
});

// Triggered after grid configuration changes. It's recommended to use event delegation in ajax scenarios.
document.addEventListener("gridconfigure", e => {
    e.detail.grid - grid's instance.
});