En kendoGrid nos encontramos que no hay una forma «directa» de hacer un maestro detalle, la única manera de conseguirlo es mediante el tag details, nos permite incorporar un template, pero ¿y si en lugar de mostrar el detalle de una row, quiero mostrar un listado?… Pues podemos utilizar el mismo template y «jugar» con el pseudo-knockout que incorpora. Vamos a ver como hacer un detalle de la misma row y otro con un listado en el detalle
Vamos a ver 2 ejemplos utilizando el template de detail. El primero será enfocado a tener más detalles de una row, cuando tenemos demasiadas columnas podemos ocultar una parte para que no se vea una row demasiado extensa. El segundo ejemplo irá más enfocado a tener una row con un listado de ítems.
Mostrando más columnas en los detalles
Este es un ejemplo básico de la utilización de un template, lo que tendremos será una plantilla para mostrar más detalles de una row. Supongamos que tenemos departamentos y en el detalle queremos mostrar el número de trabajadores y donde está ubicado. El js con la configuración de la grid y los datos sería:
$("#gridKendo").kendoGrid({
columns: [
{ field: "Nombre" }
],
dataSource: [
{ Nombre: "mantenimiento", NumeroTrabajadores: 2, ubicacion: "Bacelona" },
{ Nombre: "facturacion", NumeroTrabajadores: 3, ubicacion: "Madrid" }
],
detailTemplate: kendo.template($("#detalles").html())
});
Y el html que necesitamos con el template:
<div id="gridKendo"></div>
<script id="detalles" type="text/x-kendo-template">
<label>Número de trabajadores: #=NumeroTrabajadores#</label><br>
<label>Ubicación: #=ubicacion#</label>
</script>
Este ejemplo lo tenéis en jsFiddle
Mostrando una lista
Un compañero de trabajo me pregunto cómo hacer una grid de solo lectura en kendo, pero el dilema era como mostrar un maestro detalle o algo parecido. Buscando vimos que esta era la opción más sencilla, teniendo en cuenta que no se tienen que modificar datos (sería más sencillo hacerlo con Ko, o de otras formas, pero los requerimientos de cliente eran la utilización de Kendo).
Para mostrarlo, vamos a suponer que en cada departamento tenemos una lista de trabajadores, en el detalle tenemos que recorrer la colección de trabajadores y para ello lo podemos hacer con un for de siempre, pero tenemos que ponerlo de forma que lo entienda kendo. El js quedaría:
$("#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())
});
Y el html con el template:
<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>
De esta forma podríamos visualizarlos e incluso podemos ponerle cabeceras propias o personalizarlo un poco más.
Este ejemplo lo tenéis en jsFiddle