jQuery Grid Hierarchy

To implement hierarchical grid structure you need to handle the detailCreated event and to initialize a new grid into the detail cell.

 $(document).ready(function () {
     $("#grid").shieldGrid({
         dataSource: {
             data: gridData                 
         },
         paging: {
             pageSize: 20
         },
         events: {
             detailCreated: detailCreated
         },
         columns: [                
         { field: "id", width: "70px", title: "ID" },
         { field: "name", title: "Person Name" },
         { field: "age", title: "Age" },
         { field: "company", width: "170px", title: "Company Name"},
         { field: "balance", title: "Balance" },
         ]
     });
 });
function detailCreated(e) {
    $("<div/>").appendTo(e.detailCell).shieldGrid({
        dataSource: {
            data: e.item.friends
        },
        sorting: {
            multiple: true
        },
        paging: {
            pageSize: 5
        },
        columns: [
        { field: "id", width: "100px", title: "Friend ID" },
        { field: "name", title: "Friend Name" }
        ]
    });
}

Online example you can find here: Hierarchical grid