En el caso donde tenemos una estructura de datos repetitiva en la que cada ítem a su vez tiene una estructura repetitiva, como por ejemplo una colección de Facturas donde cada factura tiene sus detalles y queremos mostrar en una grilla las facturas y al seleccionar un ítem de la grilla poblar una sub-grilla con los detalles de esa factura se puede hacer de la siguiente manera colocando código en el OnLoad del Formulario:
//Agregamos un listener del evento onRowSelected en la Grilla Cabecera
BizuitForm.controls['grdCabecera'].addEventListener('onRowSelected', (value) => {
//Guardamos en una variable detalles el valor de la columna de la cabecera donde se encuentra el ítem repetitivo.
var detalles = value.selected[0].Detalles.Detalle;
//En caso que la grilla se encuentre en un subFormulario, es necesario transformar a string el contenido de esa columna, almacenarlo en el parámetro del subform:
//var paramSubForm=JSON.stringify(value.selected[0].Detalles.Detalle));
//Una vez recibido el parámetro en el subForm es necesario transformarlo nuevamente a JSON:
//detalles = JSON.parse(paramSubForm);
//Obtenemos la Grilla de Detalles en una variable tablaDetalle
const tablaDetalle = BizuitForm.controls['grdDetalles'];
//Limpiamos la grilla de Detalles de registros que pudiera tener
tablaDetalle.value = {
pages: {},
rows: []
};
//Creamos un array vacío llamado rows
const rows = [];
//Insertamos en el array rows el valor de la variable detalles, verificando si tiene uno o más ítems.
rows.push(...(Array.isArray(detalles) ? detalles : [detalles]))
//Asignamos a la variable tablaDetalle las filas del array rows
tablaDetalle.value = {
pages: {},
rows: rows
};
});
Importante: La grilla de Cabecera cuyos ítems seleccionaremos debe estar marcada como seleccionable en la propiedad “Tipo de Selección de Fila”