TreeGrid Sample

by mestevez85

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<TABLE ID='table'></TABLE>

JavaScript

var mydata = [
	{ "id": 1, "cell": ["Catalonia",    "",        25, 	0, null, 	false,	true] },
	{ "id": 2, "cell": ["Barcelona",    "ITEM1",   10,	1, 1,		true,	true] },
	{ "id": 3, "cell": ["Girona",       "ITEM3",   15,	1, 1,		true,	true] },
	{ "id": 4, "cell": ["France",       "",        20,	0, null, 	false,	true] },
    { "id": 5, "cell": ["Paris",        "ITEM4",   8,	1, 4,		true,	true] },
    { "id": 6, "cell": ["Lion",         "ITEM4",   10,	1, 4,		true,	true] },
    { "id": 7, "cell": ["Toulouse",     "ITEM4",   12,	1, 4,		true,	true] },
];
var grid = $("#table");

grid.jqGrid({
    idPrefix : "_tr_",
	colNames		: ["City", "Item", "Quantity"],
    colModel 	: [        
		{ name: "city", 		width: 100, sorttype: "text" },
		{ name: "item", 		width: 80, sorttype: "text" },
		{ name: "qty",			width: 80, sorttype: "int" }
	],		
	datastr		: mydata,
	datatype	: "jsonstring",
	jsonReader : {
		cell		: "cell",
		id			: "id",
		repeatitems : true,
        root: function(obj) { return obj; }
	},
	height	: "auto",
	treeGrid		: true,
	treeGridModel	: "adjacency",
	ExpandColumn	: "city"
});