CODEWITHSUNDEEP
asp.net-mvc
JsonStatham
JsonStatham

Reputation: 10374

Grid MVC how to add the details section

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
}

Upvotes: 1

Views: 500

Answers (1)

Jamie Rees
Jamie Rees

Reputation: 8183

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);
}

Upvotes: 2

Related Questions