Search code examples
asp.net-mvcjsonjqgridmvcjqgrid

Load data for jqgrid treegrid using json doesn't work


I just try to use jqgrid in my site. I'm using vs 2013, asp.net mvc 5, and installed jqgrid and jqgridmvc (jqgrid mvc helper) from nuget. I followed the example from the jqgridmvc maker (which using xml as source) and it works fine: http://mvcjqgrid.skaele.it/Home/TreeGrid

However, when I try to use json as the source, somehow it doesn't work. My suspicion is somehow my json format is wrong, but I'm not sure where:

Controller code:

public JsonResult TreeGridData(GridSettings gridSettings)
  {
  var jsonData = new
    {
    total = 1,
    page = 1,
    records = 2,
    rows = new[]{
      new {id = 1, cell = new object[] {"1", "root 1", "0", null, false, false, true}},
      new {id = 11, cell = new object[] {"11", "child 11", "1", "1", true,false, true}}
      }
    };
 return Json(jsonData, JsonRequestBehavior.AllowGet);
 }

View Code:

@(Html.Grid("treeGrid")
.SetCaption("TreeGrid")
.AddColumn(new Column("ItemID")
  .SetLabel("Id").SetKey(true))
.AddColumn(new Column("Name")
  .SetAsExpandable())
.SetUrl(Url.Action("TreeGridData"))
.EnableTreeGrid()
 )

thanks!

Edit: Per suggestion in comment, I added the response generated from the controller (www.localhost.../controller/treegriddata):

{
"total":1,
"page":1,
"records":2,
"rows":
[{"id":1,"cell":["1","root 1","0",null,false,false,true]},
 {"id":11,"cell":["11","child 11","1","1",true,false,true]}]
}

Solution

  • Ok, turns out it's because of the library that I used (mvcjqgrid) doesn't support the latest version of jqgrid that I downloaded from Nuget. the generated grid code is "treedatatype", while for the newer jqgrid the correct code is "datatype". So I just run function below in onBeforeRequest event and everything works!

    function DataTypeCorrection() {
        $("#tc-jqgrid").setGridParam({ datatype: 'json' });
    }