Kendo Parent Child Grid

Kendo Grid with child detail rows that share the parent grid columns and column headers.

by Josh Eastburn

HTML

<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.metro.min.css">
<div id="main">
    <div id="grid"
        data-role="grid"
        data-bind="source: parentChildData"
        data-detail-template="tmpl-child-detail"        
        data-columns="[
            { field: 'name' },
            { field: 'address' },
            { template: '&nbsp;', title: 'grade' }
        ]"></div>
    
    
    
        <script id="tmpl-child-detail" type="text/x-kendo-template">
        <div data-role="grid"
             data-bind="source: children"
             data-columns="[
                { field: 'name' },
                { template: '&nbsp;' },
                { field: 'grade' }
             ]"></div>

    </script>
</div>

CSS

.k-grid .k-detail-cell .k-grid-header {
  display: none;
}
.k-grid .k-detail-cell {
  border-bottom: 0;
  padding: 0;
}
.k-grid td {
    border-width: 0;
}
.k-detail-cell .k-grid-content {
    overflow-y: auto;
}
.k-detail-cell .k-grid {
    border: 0;
}
.k-detail-cell .k-alt {
    background-color: rgb(249, 249, 249);
}

JavaScript

(function () {

        function resizeDetailGrid() {
            debugger;
        // resize detail column widths to match master column headings
        var gridElement = $('#grid');
        gridElement.find('.k-detail-cell tbody tr td').each(function (index) {
            var headerCell, detailCell, headerCellSelector, detailCellSelector;
            headerCellSelector = kendo.format('.k-master-row td:nth-child({0})', index + 2);
            detailCellSelector = kendo.format('.k-detail-cell tbody tr td:nth-child({0})', index + 1);
            headerCell = gridElement.find(headerCellSelector).first();
            detailCell = gridElement.find(detailCellSelector);
            detailCell.width(headerCell.width());
        });
    }

    var viewModel = kendo.observable({
        parentChildData: [
            {
                name: 'Lucy Jones',
                address: '100 S. Main St',
                grade: null,
                children: [
                    {
                        name: 'Sally Jones',
                        grade: '1st'
                    },
                    {
                        name: 'Timmy Jones',
                        grade: '3rd'
                    }]
            },
            {
                name: 'Frank Johnston',
                address: '331 Chestnut St',
                grade: null,
                children: [
                    {
                        name: 'Luther Johnston',
                        grade: '5th'
                    },
                    {
                        name: 'Hilda Johnston',
                        grade: '8th'
                    },
                    {
                        name: 'Felicity Johnston',
                        grade: '10th'
                    }]
            },
            {
                name: 'Mary Kinnerly',
                address: '2089 W North Ave',
                grade: null,
                children: [
                    {
                       ...