Grid MVC how to add the details section - asp.net-mvc

Question

I have been using Grid.Mvc to display some records for a while now, however as more and more properties have been added to the model, the grid has become ugly and too busy.
So I revisted the Grid.Mvc documentation pages and realised that in the demo provided:
http://gridmvc.azurewebsites.net/
They are rather neatly displaying full details of the record in a div on the right hand side of the page under the title Order details, meaning the actual grid does not get bogged down with the finer details.
I want to implement this to my project but I cannot work out how this works, there seems to be no documentation on the website that I can find that explains this, even though it seems to be used in every example they show. When I click view source I cannot see any source for how the data is being retrieved asynchronously per row.
How do I add a details section for each selected row as per the example linked?
edit: Object im passing back as JSON
public class MasterEmailViewModel
{
public int EmailId { get; set; }
public int MvpId { get; set; }
public string FirstName { get; set; }
public string Surname { get; set; }
public string AddressLineOneOld { get; set; }
public string AddressLineTwoOld { get; set; }
public string AddressLineThreeOld { get; set; }
public string AddressLineFourOld { get; set; }
public string AddressLineFiveOld { get; set; }
public string PostcodeOld { get; set; }
public string AddressLineOneNew { get; set; }
public string AddressLineTwoNew { get; set; }
public string AddressLineThreeNew { get; set; }
public string AddressLineFourNew { get; set; }
public string AddressLineFiveNew { get; set; }
public string PostcodeNew { get; set; }
public bool IsChecked { get; set; }
public string Comment { get; set; }
//navigation prop
}

Answer 1

I have done the exact same thing with one of my projects.
The example is just using a jquery $post
View
<div class="row">
<div class="col-md-3 col-md-push-9">
<h4>Order details
</h4>
<div id="emailId">
<p class="muted">
Select order to display detailed infomation
</p>
</div>
<div id="firstNameId">
</div>
</div>
<div class="col-md-9 col-md-pull-3">
//Grid stuff
</div>
</div>
JS
$(function () {
// ordersGrid is what you called your Grid e.g. #Html.Grid(Model).Named("ordersGrid")
pageGrids.ordersGrid.onRowSelect(function (e) {
$.post("/Home/GetOrder?id=" + e.row.OrderID, function (data) {
if (data.Status <= 0) {
alert(data.Message);
return;
}
// Replace the data
$("#emailId").html(data.EmailId);
$('#firstNameId').html(data.FirstName);
});
});
});
Controller
[HttpPost]
public ActionResult GetOrder(int id)
{
// Get the data
return Json(data);
}