asp.net mvc - How can I bind my view model to a jqGrid?

Question

Using MVC2 and EF framework. Most references/blog posts I've found so far pertain to binding a single table and its data (sometimes hierarchical) to a jqGrid with editing capabilities. I don't need this. I don't even need to edit the data--just display. I need to display and page the data. Sorting is a plus, searching a bonus I guess.

jqGrid's documentation shows the data source being bound as follows:

return gridModel.OrdersGrid.DataBind(northWindModel.Orders);

But, I only have my Entities context without a reference to the view model. Could I create an Entity set here? Not very familiar with this.

All my view models contain data from several different tables. What can I do to bind the view model properties to a jqGrid? I'm playing with Trirand's 30-day trial of jqGrid for MVC. Again, I just need to display and page the data, but I'm not sure how to hook up the view models to the jqGrid data source.

Edit

public ActionResult test()
    {
        var gridModel = new testmodel();
        var viewModel = gridModel.testgrid;
        SetupTestGrid(viewModel);
        return View(gridModel);
    }

    private void SetupTestGrid(JQGrid viewModel)
    {
        viewModel.ID = "TestGrid";
        viewModel.DataUrl = Url.Action("SearchTestGridDataRequested");
        viewModel.ToolBarSettings.ShowEditButton = false;
        viewModel.ToolBarSettings.ShowAddButton = false;
        viewModel.ToolBarSettings.ShowDeleteButton = false;
    }

    public JsonResult SearchTestGridDataRequested(string sidx, string sord, int page, int rows)
    {
        var gridModel = new testmodel(sidx, sord, page, rows);
        SetupTestGrid(gridModel.testgrid);
        return Json(gridModel.datasource);
    }

In testmodel and testmodel(parameters), I create an anonymous type (named datasource) containing Phil Haack's parameters; total, page, records and rows. This property is JSON'ified in the last statement of SearchTestGridDataRequested.

Answer 1

I don't really know the commercial version of the jqGrid, but the product use internally the Open Source jqGrid and so I could explain how it should work together with ASP.NET MVC.

In general to use jqGrid in MVC you can have a page (a View) with two elements <table> and a <div> used for the pager. Both (<table> and <div>) must have and id attribute. No other complex View binding to the Model is required.

Now you can place in the header of the page loading of all JavaScripts needed: jQuery, jqGrid and you page specific JavaScript which define jqGrid which you want to display, for example column model and different jqGrid parameters. The most important parameter which you need to bind the grid to the data are url parameter. If you define for example in the Home controller the action GetData then the url could be "Home/GetData" or '<%= Url.Content("~/Home/GetData")%>'. This is enough of have "data binding". No usage of Model data is required.

The action GetData could be defined as following:

JsonResult GetData(string sidx, string sord, int page, int rows)

if you want support only data sorting and paging but don't need any searching (filtering) support.

In case of the searching support you need to add an additional parameters. If you want to use Advanced Searching or Toolbar Searching with stringResult:true parameter you should add one additional parameter string filter:

JsonResult GetData (string sidx, string sord, int page, int rows, string filter)

In case of implementing Single Field Searching in your grid it should be

JsonResult GetData (string sidx, string sord, int page, int rows,
                    string searchField, string searchString, string searchOper)

You can also make an universal action:

JsonResult GetData (string sidx, string sord, int page, int rows, string _search
                    string searchField, string searchString, string searchOper,
                    string filter)

So in all cases you have to do almost the same, but you will receive additional parameters in a little other form.

Now you should decide in which form you want provide the data for jqGrid from the controller action. jqGrid is very flexible and you can either get back data in the standard format

{ 
  "total": "xxx",   // the total number of pages
  "page": "yyy",    // the current page number of the data returned
  "records": "zzz", // the total number of records
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", ...,  "cell1n"]},
    {"id" :"2", "cell":["cell21", "cell22", ..., "cell2n"]},
      ...
  ]
}

or in another (more readable, but more long) format. In the last case you will have to define a small parameter jsonReader which describe how the data should be read (see documentation).

If you look inside of some old answers like this, this, this or this you will find enough code fragments of full working MVC projects which you can modify for your propose. The first reference from the list should gives hopefully the answer on you main question how to prepare data from EF source or any other IQueryable<T> source the data which jqGrid need.

In another my old answer where I describe the general schema how jqGrid can be used in MVC environment more detailed, but for people who tested already different implementation ways.