Client side

Client side object model allows you to retrieve column values of selected by user row in the grid.

After installing Grid.Mvc package (see: Installation) Scripts/common.mvc.ui.grid.js was added to your project. If you want to use client object model you need to attach jQuery (http://jquery.com) and gridmvc.min.js, like this:

<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"></script>

When you rendering your grid you need to specify grid client name, using Named method:



       @Html.Grid(Model).Named("ordersGrid").Columns(columns =>
                    {
                        columns.Add(foo => foo.Title).Titled("Custom column title");
                        columns.Add(foo => foo.Description).Sortable(true);
                    })

Grid.mvc.js - provides filtering functionality on the client side and row selecting.
The script register singleton object named 'pageGrids' that contain all grids registred on the page.

To retrive user selected row values, register script:

<script>
    $(function () {
        pageGrids.ordersGrid.onRowSelect(function (e) {
            alert(e.row.OrderID);
        });
    });
</script>

Method onRowSelect register event when user select Grid row.

'e.row' parameter contains all column values of selected row. You can retrive them by calling his properties (names is the same with your model in C#):

js_1.png

Read more: Filtering feature in Grid.Mvc

Last edited Sep 25, 2013 at 9:04 AM by Bukharin, version 11