Edit in JSFiddle

var apps = [{
    AppID : 1,
    AppName : "Microsoft Excel",
    MonoVolume : 224,
    ColorVolume : 12,
    MonthlyCost : 94.30,
    JobsPrinted: 157
}, {
    AppID : 2,
    AppName : "Microsoft Notepad",
    MonoVolume : 29,
    ColorVolume : 0,
    MonthlyCost : 4.53,
    JobsPrinted: 28
}, {
    AppID : 3,
    AppName : "Microsoft Outlook",
    MonoVolume : 105,
    ColorVolume : 0,
    MonthlyCost : 52.06,
    JobsPrinted: 63
}, {
    AppID : 4,
    AppName : "Microsoft PowerPoint",
    MonoVolume : 26,
    ColorVolume : 0,
    MonthlyCost : 0.48,
    JobsPrinted: 5
}]; 

var details = [{
    AppID : 1,
    MonoVolume : 1,
    ColorVolume : 0,
    MonthlyCost : 2.03,
    JobsPrinted: 1,
    Department: "QA"
}, {
    AppID : 1,
    MonoVolume : 1,
    ColorVolume : 0,
    MonthlyCost : 2.03,
    JobsPrinted: 1,
    Department: "Business Administration"
}, {
    AppID : 1,
    MonoVolume : 87,
    ColorVolume : 0,
    MonthlyCost : 1.59,
    JobsPrinted: 68,
    Department: "Business Administration"
}, {
    AppID : 1,
    MonoVolume : 4,
    ColorVolume : 1,
    MonthlyCost : 0.21,
    JobsPrinted: 3,
    Department: "Research & Development"
}, {
    AppID : 2,
    MonoVolume : 2,
    ColorVolume : 0,
    MonthlyCost : 0.03,
    JobsPrinted: 2,
    Department: ""
}, {
    AppID : 2,
    MonoVolume : 3,
    ColorVolume : 0,
    MonthlyCost : 0.06,
    JobsPrinted: 2,
    Department: "Finance & Administration"
}];

$(document).ready(function() {
    var element = $("#grid").kendoGrid({
        dataSource: {
            data: apps,
            schema: {
                model: {
                    fields: {
                        AppName: { type: "string" },
                        MonoVolume: { type: "number" },
                        ColorVolume: { type: "number" },
                        MonthlyCost: { type: "number" },
                        JobsPrinted: { type: "number" }
                    }
                }
            },
            pageSize: 20
        },
        filterable: true,
        groupable: true,
        sortable: true,
        pageable: true,
        detailInit: detailInit,
        dataBound: function() {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
        columns: [
            {
                field: "AppName", title: "Application"
            },
            {
                field: "MonoVolume", title: "Mono Volume"
            },
            {
                field: "ColorVolume", title: "Color Volume"
            },
            {
                field: "MonthlyCost", title: "Monthly Cost", format: "{0:c}"
            },
            {
                field: "JobsPrinted", title: "Jobs Printed"
            }
        ]
    });
});

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: details,
            schema: {
                model: {
                    fields: {
                        AppName: { type: "string" },
                        MonoVolume: { type: "number" },
                        ColorVolume: { type: "number" },
                        MonthlyCost: { type: "number" },
                        JobsPrinted: { type: "number" },
                        Department: { type: "string" }
                    }
                }
            },
            pageSize: 20,
            filter: { field: "AppID", operator: "eq", value: e.data.AppID }
        },
        scrollable: false,
        filterable: true,
        groupable: true,
        sortable: true,
        pageable: true,
        columns: [
            {
                field: "MonoVolume", title: "Mono Volume"
            },
            {
                field: "ColorVolume", title: "Color Volume"
            },
            {
                field: "MonthlyCost", title: "Monthly Cost", format: "{0:c}"
            },
            {
                field: "JobsPrinted", title: "Jobs Printed"
            },
            {
                field: "Department", title: "Department"
            }
        ]
    });
}

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

body { font-family: "Arial", sans-serif; font-size: 10pt; }