13.2 HGrid

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.lob.js"></script>
<link rel="stylesheet" href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css">
<link rel="stylesheet" href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css">
<table id="hierarchicalGrid"></table>

JavaScript

$(function () {

            var data = [
                {
                    Id: "Drink", 
                    Submitted: "Submitted",
                    SubBy: [
                        { Id: "Bread", Yum: "Yummy", Submitted: [{Rem:"TR",Id:"ID"}] },
                        { Id: "Pizza", Yum: "Yummy", Submitted: [{Rem:"TR",Id:"ID"}] }
                    ]
                },
                {
                    Id: "Beverages",
                    Submitted: "Submitted",
                    SubBy: [
                        { Id: "Bread", Yum: "Yummy"},
                        { Id: "Pizza", Yum: "Yummy"}
                    ]
                }
            ];

            $("#hierarchicalGrid").igHierarchicalGrid({
                width: "100%",
                dataSource: data, //Array of objects defined above
                autoGenerateLayouts: true
            });

        });