Jq tree grid did not load the data from a controller - jqgrid

Question

I am using a jqgrid and i want to display the grid from the jquery a call to controller which return me json data my grid did not show the data code is here
my controller action is like this
private static List<Category> GetProducts(int parent, int childs)
{
string[] procat = { "Electrical", "Computer", "Furniture", "House Hold", "Automobiles" };
var data = new List<Category>();
for (int i = 0; i < parent; i++)
{
data.Add(new Category { CatId = i, CatName = procat[i % 5], Products = new List<Product>() });
for (int j = 0; j < childs; j++)
{
data[i].Products.Add(new Product
{
ProId = j,
ProName = "ABC",
desc = "A web browser built for speed, simplicity, and security",
desc1 = "Google Chrome",
desc2 = (i * j).ToString(),
desc3 = "Copyright 2013 Google Inc. All rights reserved.",
desc4 = i.ToString(),
desc5 = j.ToString(),
desc6 = "Google Chrome",
desc7 = (i * j).ToString(),
desc8 = "Copyright 2013 Google Inc. All rights reserved.",
desc9 = i.ToString(),
desc10 = j.ToString(),
desc11 = "Google Chrome",
desc12 = (i * j).ToString(),
desc13 = "Copyright 2013 Google Inc. All rights reserved.",
desc14 = i.ToString(),
desc15 = j.ToString(),
desc16 = "Google Chrome",
desc17 = (i * j).ToString(),
desc18 = "Copyright 2013 Google Inc. All rights reserved.",
desc19 = i.ToString(),
desc20 = j.ToString(),
desc21 = "Google Chrome",
desc22 = (i * j).ToString(),
desc23 = "Copyright 2013 Google Inc. All rights reserved.",
desc24 = i.ToString(),
desc25 = j.ToString()
});
}
}
return data;
}
public JsonResult PlainObjectsView()
{
var res = new List<FlatProduct>();
string[] procat = { "Electrical", "Computer", "Furniture", "House Hold", "Automobiles" };
int i = 1;
foreach (var item in procat)
{
res.Add(new FlatProduct
{
CatId = i,
CatName = item,
ProName = item,
ProId = i,
level = 0,
parent =null,
Isleaf = false,
IsLoaded = true,
Isexpanded = true
});
i++;
}
var data = GetProducts(5, 5);
foreach (var cats in data)
{
foreach (var prods in cats.Products)
{
res.Add(new FlatProduct
{
CatId = cats.CatId + 1,
CatName = cats.CatName,
ProId = prods.ProId,
ProName = prods.ProName,
desc = prods.desc,
desc1 = prods.desc1,
desc2 = prods.desc2,
desc3 = prods.desc3,
desc4 = prods.desc4,
desc5 = prods.desc5,
desc6 = prods.desc6,
desc7 = prods.desc7,
desc8 = prods.desc8,
desc9 = prods.desc9,
desc10 = prods.desc10,
desc11 = prods.desc11,
desc12 = prods.desc12,
desc13 = prods.desc13,
desc14 = prods.desc14,
desc15 = prods.desc15,
desc16 = prods.desc16,
desc17 = prods.desc17,
desc18 = prods.desc18,
desc19 = prods.desc19,
desc20 = prods.desc20,
desc21 = prods.desc21,
desc22 = prods.desc22,
desc23 = prods.desc23,
desc24 = prods.desc24,
desc25 = prods.desc25,
level = 1,
parent = cats.CatId + 1,
Isleaf = false,
IsLoaded = true,
Isexpanded = true
});
}
}
double pagesize = 5;
var finalRes = new { page = 1, records = res.Count, rows = res, total = Math.Ceiling(res.Count / pagesize), id = res.Select(c=>c.CatId), };
return Json(finalRes, JsonRequestBehavior.AllowGet);
}
and my jquery is like this
<script type="text/javascript">
$(document).ready(function () {
'use strict';
$("#treegrid").jqGrid({
url: '#Url.Content("~/TreeGrid/PlainObjectsView")',
datatype: "json",
mtype: "Get",
colModel: [
{ name: "CatId", width: 150,key:true, hidden:true},
{ name: "CatName", width: 200 },
{ name: "desc", width: 200 },
{ name: "desc1", width: 300 },
{ name: "desc10", width: 300 },
{ name: "desc11", width: 150 },
{ name: "desc12", width: 200 },
{ name: "desc13", width: 300 },
{ name: "desc14", width: 150 },
{ name: "desc15", width: 200 },
{ name: "desc16", width: 300 },
{ name: "desc17", width: 150 },
{ name: "desc18", width: 200 },
{ name: "desc19", width: 300 },
{ name: "desc2", width: 150 },
{ name: "desc20", width: 150 },
{ name: "desc21", width: 200 },
{ name: "desc22", width: 300 },
{ name: "desc23", width: 150 },
{ name: "desc24", width: 200 },
{ name: "desc25", width: 300 },
{ name: "desc3", width: 200 },
{ name: "desc4", width: 300 },
{ name: "desc5", width: 150 },
{ name: "desc6", width: 200 },
{ name: "desc7", width: 300 },
{ name: "desc8", width: 150 },
{ name: "desc9", width: 200 },
{ name: "ProId", width: 300, hidden:true },
{ name: "ProName", width: 150 }
],
treeGridModel: 'adjacency',
height: "auto",
ExpandColumn: 'CatName',
// ExpandColClick: true,
loadonce:true,
treeGrid: true,
// gridview: true,
viewrecords: true,
caption: "Tree Grid Example"
});
});
</script>
help me please where is i m wrong

Answer 1

First of all we should ordered the data in specific json format first add parent and then add its children like this
public IEnumerable<FlatProduct> TreeGridjsonData()
{
var res = PlainObjectsViewNew();
int count = 1;
var list1 = (from rs in res
where rs.parent == null
select rs).ToList<FlatProduct>();
foreach (var item in list1)
{
finalList.Add(
new FlatProduct
{
Id = count,
CatId = item.CatId,
CatName = item.CatName,
level = 0,
parent = null,
Isleaf = false,
//IsLoaded = true,
Isexpanded = false
});
AddChildren(item.CatId, count);
count += 6;
}
return finalList;
}
public IEnumerable<FlatProduct> AddChildren(int parentid, int count)
{
int lscount = count + 1;
var res = PlainObjectsViewNew();
var list1 = from rs in res
where rs.parent == parentid
select rs;
foreach(var item in list1)
{
finalList.Add(new FlatProduct
{
CatName = item.CatName,
ProId = item.ProId,
ProName = item.ProName,
Id = lscount,
desc = item.desc,
desc1 = item.desc1,
desc2 = item.desc2,
desc3 = item.desc3,
desc4 = item.desc4,
desc5 = item.desc5,
desc6 = item.desc6,
desc7 = item.desc7,
desc8 = item.desc8,
desc9 = item.desc9,
desc10 = item.desc10,
desc11 = item.desc11,
desc12 = item.desc12,
desc13 = item.desc13,
desc14 = item.desc14,
desc15 = item.desc15,
desc16 = item.desc16,
desc17 = item.desc17,
desc18 = item.desc18,
desc19 = item.desc19,
desc20 = item.desc20,
desc21 = item.desc21,
desc22 = item.desc22,
desc23 = item.desc23,
desc24 = item.desc24,
desc25 = item.desc25,
level = 1,
parent = count,
Isleaf = true,
IsLoaded = true,
Isexpanded = true
});
lscount++;
}
return finalList;
}
After that convert this list into json format for this
public JsonResult GetPlainobject()
{
var rows = (PlainObjectsViewNew()
.Select(c => new
{
id=c.Id,
cell =new []
{
c.Id.ToString(),
c.CatName,
c.desc,
c.desc1,
c.desc10,
c.desc11,
c.desc12,
c.desc13,
c.desc14,
c.desc15,
c.desc16,
c.desc17,
c.desc18,
c.desc19,
c.desc2,
c.desc20,
c.desc21,
c.desc22,
c.desc23,
c.desc24,
c.desc25,
c.desc3,
c.desc4,
c.desc5,
c.desc6,
c.desc7,
c.desc8,
c.desc9,
c.ProId.ToString(),
c.ProName,
c.level.ToString(),
c.parent.ToString(),
c.Isexpanded.ToString(),
c.IsLoaded.ToString(),
c.Isleaf.ToString(),
}
})).ToArray();
return Json(new
{
page = 1,
records = rows.Length,
rows
}, JsonRequestBehavior.AllowGet);
}
And after that some change in the javascript function
$(document).ready(function () {
$("#treegrid").jqGrid({
url: '#Url.Content("~/TreeGrid/GetPlainobjectOrderdData")',
datatype: "json",
mtype: "Get",
colModel: [
{ name: "CatId", width: 150,key:true, hidden:true},
{ name: "CatName", width: 200 },
{ name: "desc", width: 200 },
{ name: "desc1", width: 300 },
{ name: "desc10", width: 300 },
{ name: "desc11", width: 150 },
{ name: "desc12", width: 200 },
{ name: "desc13", width: 300 },
{ name: "desc14", width: 150 },
{ name: "desc15", width: 200 },
{ name: "desc16", width: 300 },
{ name: "desc17", width: 150 },
{ name: "desc18", width: 200 },
{ name: "desc19", width: 300 },
{ name: "desc2", width: 150 },
{ name: "desc20", width: 150 },
{ name: "desc21", width: 200 },
{ name: "desc22", width: 300 },
{ name: "desc23", width: 150 },
{ name: "desc24", width: 200 },
{ name: "desc25", width: 300 },
{ name: "desc3", width: 200 },
{ name: "desc4", width: 300 },
{ name: "desc5", width: 150 },
{ name: "desc6", width: 200 },
{ name: "desc7", width: 300 },
{ name: "desc8", width: 150 },
{ name: "desc9", width: 200 },
{ name: "ProId", width: 300, hidden:true },
{ name: "ProName", width: 150 }
],
// gridComplete: doGridComplete,
onInitGrid: doOnInitGrid,
loadComplete: doloadComplete,
treeGridModel: 'adjacency',
height: "auto",
ExpandColumn: 'CatName',
//gridview: true,
loadonce:false,
treeGrid: true,
treedatatype:'jsonstring',
viewrecords: true,
treeIcons: { leaf: 'ui-icon-document-b' },
caption: "Tree Grid Example"
});
});
and this is done