How do you get to the underlying data in an MVC3 WebGrid using jQuery?

Question

I have a simple MVC WebGrid. When a user clicks on a row, I'd like to do something based on the row he clicked. Its pretty simple in jqGrid and even using jquery templates, but I'd like to get it right using the MVC WebGrid.

I have the following:

<h2>OrderList</h2>
@{
    var grid = new WebGrid(canPage: true, rowsPerPage: 20, canSort: true, ajaxUpdateContainerId: "grid_Orders");
    grid.Bind(Model.Orders, rowCount: Model.TotalOrders, autoSortAndPage: true);
    grid.Pager(WebGridPagerModes.All);
    @grid.GetHtml(htmlAttributes: new { id = "grid_Orders" },
        columns: grid.Columns(
            grid.Column(columnName: "OrderNo", header: "Order No"),
            grid.Column(columnName: "TotalAmountDisplay", header: "Amount", format:@<div style="text-align:right"> R @item.TotalAmountDisplay</div>, canSort: false)
    ));
}

and the following jQuery

$(document).ready(function () {
    $("#grid_Orders").delegate("tbody tr", "hover", function () {
        $(this).css("cursor", "pointer");
        $(this).toggleClass("datahighlight");
    });

    $("#grid_Orders").delegate("tbody tr", "click", function () {
        //How do I get the underlying data in this row???
    });

});

I've managed to get the OrderNo out, but I'm sure this is not the right way of doing it $("#grid_Orders").delegate("tbody tr", "click", function () { alert($(this).children(':first-child').html()); }); — Peter Munnings, May 31 '11 at 09:58

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

Unfortunately you will need to use jQuery in order to access each row's html data - there is no rich programming model against it that Im aware of (the beauty of MVC at times as well ha)

The same scenario applies here: MVC WebGrid - How to programatically get the current page, sort column etc

edited May 23 '17 at 12:04

Community

1
1

answered May 31 '11 at 15:13

Adam Tuliper

29,982
4
53
71

Hopefully the Template/Databinding team gets some input into this helper in the near future – Peter Munnings Jun 01 '11 at 09:18
if you use json and bind to a grid you have access to your source data. not sure if the webgrid supports this but teleriks does - which is a 100x better grid imho and free. – Adam Tuliper Jun 01 '11 at 15:58

How do you get to the underlying data in an MVC3 WebGrid using jQuery?

1 Answers1