Kendo

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div class="loadData">Click to load data</div>

<div id="grid"></div>

<script type="text/x-kendo-template" id="template">
    <div id="detailGrid"></div>
</script>

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr class="k-master-row">
        <td class="k-hierarchy-cell"><a href="\#" class="k-icon k-plus"></a></td>
        <td>${firstName}</td>
        <td>${lastName}</td>
    </tr>
</script>

JavaScript

$(document).ready(function() {
    var blankData = [];
    var gridData = [
        { firstName: 'Bob', lastName: 'Dylan' },
        { firstName: 'Mick', lastName: 'Jagger' }
    ];
        
    showGrid(blankData);
    
    $('.loadData').click(function() {
        showGrid(gridData);            
    });
});

function showGrid(gridData) {        
    var element = $("#grid").kendoGrid({
        dataSource: {
            data: gridData,
            pageSize: 5
        },
        height: 450,
        sortable: true,
        detailTemplate: kendo.template($("#template").html()),
        detailInit: detailInit,
        columns: [
            {
            field: "firstName",
            title: "First Name"},
        {
            field: "lastName",
            title: "Last Name"}
        ],
        rowTemplate: kendo.template($("#rowTemplate").html())
    });
}

function detailInit(e) {
    var detailRow = e.detailRow;
    var detailData = [
        { firstName: 'Bob', lastName: 'Dylan' },
        { firstName: 'Mick', lastName: 'Jagger' }
    ];

    detailRow.find("#detailGrid").kendoGrid({
        dataSource: {
            data: detailData,            
            pageSize: 6
        },
        columns: [
            {
            field: "firstName",
            title: "First Name"},
        {
            field: "lastName",
            title: "Last Name"}
        ]
    });
}