Blazor Descripción general de la selección de columnas de cuadrícula de árbol

    La función de selección de columnas de cuadrícula de árbol de Blazor en Ignite UI for Blazor ofrece una forma simplificada y similar a Excel de seleccionar y resaltar una columna completa con un solo clic. Se puede habilitar a través de la columnSelection entrada. Gracias a la rica API, la función permite una fácil manipulación del estado de selección, la extracción de datos de las fracciones seleccionadas, operaciones de análisis de datos y visualizaciones.

    Blazor Ejemplo de selección de columnas de cuadrícula de árbol

    El siguiente ejemplo demuestra los tres tipos de IgbTreeGrid 's selección de columna comportamiento. Utilice el menú desplegable de selección de columnas a continuación para habilitar cada uno de los modos de selección disponibles.

    * Precio unitario y Descontinuado tienen la selección de columna deshabilitada.

    EXAMPLE
    DATA
    MODULES
    RAZOR
    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.

    Uso básico

    La función de selección de columnas se puede habilitar a través de la entrada ColumnSelection, que toma valores GridSelectionMode.

    Interacciones

    El modo de selección predeterminado es None. Si se establece en Single o Multiple, todas las columnas presentadas serán Selectable. Dicho esto, para seleccionar una columna, solo necesitamos hacer clic en una, lo que la marcará como Selected. Si la columna no se puede seleccionar, no se aplicará ningún estilo de selección en el encabezado mientras se desplaza el cursor.

    La función Encabezados de columnas múltiples no se refleja en la entrada seleccionable. El ColumnGroupComponent es seleccionable si al menos uno de sus hijos tiene habilitado el comportamiento de selección. Además, el componente se marca como Seleccionado si todos sus descendientes seleccionables están seleccionados.

    *En Grupo de columnas de detalles personales, solo se pueden seleccionar el ID de columna y el Título.

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    Combinaciones de teclado

    Las combinaciones de teclado están disponibles solo cuando la entrada ColumnSelection de la cuadrícula está configurada en múltiple.

    Hay dos escenarios para la navegación con el teclado de la función Selección de columnas:

    • Selección de varias columnas: mantenga presionado Ctrl + clic en cada celda del encabezado seleccionable.
    • Selección de columnas de rango: al mantener presionada la tecla Mayús + clic se seleccionan todas las columnas seleccionables intermedias.

    Manipulaciones API

    La API proporciona algunas capacidades adicionales cuando se trata de columnas no visibles, de modo que cada columna oculta se puede marcar como Selected configurando el definidor correspondiente.

    La declaración anterior también se aplica al ColumnGroupComponent, excepto que cuando se cambia la propiedad Seleccionada, cambia el estado de sus descendientes.

    Puede encontrar más información sobre las manipulaciones de API en la sección Referencias de API.

    Estilo

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una class para la cuadrícula:

    <IgbTreeGrid class="grid"></IgbTreeGrid>
    razor

    Luego establezca las propiedades CSS relacionadas con esta clase:

    .grid {
        --ig-grid-row-selected-background: #0062A3;
        --ig-grid-row-selected-text-color: #ecaa53;
        --ig-grid-row-selected-hover-background: #0062A3;
        --ig-grid-header-selected-text-color: #ecaa53;
        --ig-grid-header-selected-background: #0062A3;
        --ig-grid-row-selected-hover-text-color: #ecaa53;
        --ig-grid-row-selected-hover-background: #0062A3;
    }
    css

    Manifestación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    Referencias de API

    La interfaz de usuario de selección de columnas tiene algunas API más para explorar, que se enumeran a continuación.

    IgbTreeGrid properties:

    IgbColumn properties:

    IgbColumnGroup properties:

    IgbTreeGrid events:

    • OnColumnsSelectionChange

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.