Blazor Master-Detail Grid

    El componente IgbGrid admite la especificación de una plantilla de detalles que muestra detalles adicionales para una fila en particular expandiendo/contrayendo su contenido. Cuando se especifica, cada registro actúa como un maestro, que al expandirse muestra una plantilla de detalles personalizable con datos contextuales para el registro actual.

    Este modo es útil cuando necesita mostrar datos de estilo maestro-detalle en una estructura jerárquica.

    Ejemplo de cuadrícula maestra y detallada Blazor

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Configuración

    Para configurar IgbGrid para que se muestre en modo maestro-detalle, debe especificar una plantilla para la cuadrícula:

        <IgbGrid DetailTemplateScript="DetailTemplate"  AutoGenerate=true  Data=northwindEmployees></IgbGrid>
    razor

    El contexto de la plantilla son los datos del registro maestro, de modo que los valores del registro maestro se pueden mostrar en la plantilla de detalles. Por ejemplo:

    // In JavaScript
    igRegisterScript("DetailTemplate", (ctx) => {
        var html = window.igTemplating.html;
        var data = ctx.implicit;
        return html` <div class="contact-container">
            <span><strong>Name:</strong> ${data.ContactName}</span> <br/>
            <span><strong>Title:</strong> ${data.ContactTitle}</span> <br/>
            <span><strong>Company:</strong> ${data.CompanyName}</span> <br/>
        </div>`;
    }, false);
    razor

    API

    También se exponen métodos API adicionales para controlar los estados de expansión:

    Navegación por teclado

    • Cuando el foco está en una fila de detalles:

      • 🡑: navega una fila hacia arriba, enfocando una celda de la fila anterior.
      • 🡓: navega una fila hacia abajo, enfocando una celda de la siguiente fila.
      • Tabulador: permite que el foco se mueva al siguiente elemento enfocable dentro de la plantilla si hay elementos enfocables; de lo contrario, se mueve a la siguiente fila de la cuadrícula.
      • Shift + Tab: mueve el foco a la fila anterior.
    • Cuando el foco está en una fila de datos con expansor:

      • Alt + 🡒 or Alt + 🡓 - expands the row.
      • Alt + 🡐 or Alt + 🡑 - collapses the row.

    Problemas conocidos y limitaciones

    Limitaciones conocidas Descripción
    Es posible que la navegación con pestañas dentro de la plantilla de detalles personalizada no actualice la posición de desplazamiento de la cuadrícula maestra en caso de que el siguiente elemento enfocado esté fuera del puerto de visualización visible. La navegación por pestañas dentro de la plantilla de detalles personalizada se deja en manos del navegador.
    Al crear una plantilla de cuadrícula dentro de la vista de detalles que tiene una<igc-column> definiciones, la cuadrícula principal también representará esas columnas. Esto se puede evitar usando autoGenerate=true para la cuadrícula anidada. En caso de que sea necesario modificar algún aspecto de esas columnas,ColumnInit Se puede utilizar el evento.
    La plantilla de detalles no se exportará a Excel. Como la plantilla de detalles puede contener cualquier tipo de contenido, no podemos exportarla a Excel de forma inmediata.
    La función de búsqueda no resaltará elementos de la plantilla de detalles.

    Referencias de API