Kendo Grid UI - Detalle de un listado dentro de una row

Ejemplo de Kendo Grid mostrando un detalle que contiene un listado

by Eric Torre

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<div id="gridKendo"></div>

<script id="detalles" type="text/x-kendo-template">
    <table>
    #for(var i = 0; i < trabajadores.length; i++){#
       <tr>
            <td><span>#=trabajadores[i].nombre#</span></td>
            <td><span>#=trabajadores[i].edad#</span></td>
        </tr>
    #}#
    </table>
</script>

JavaScript

$("#gridKendo").kendoGrid({
  columns: [
    { field: "Nombre" },
    { field: "Edad" }
  ],
  dataSource: [
    { Nombre: "mantenimiento", "Edad": null, trabajadores: [{nombre:'Jorge', edad: 22}, {nombre:'Oriol', edad:32}] },
    { Nombre: "facturacion", "Edad": null, trabajadores: [{nombre:'Francisco', edad: 31}, {nombre:'Agustin', edad:18}] }
  ],
  detailTemplate: kendo.template($("#detalles").html())
});