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

    The Blazor Grid Column Selection feature in Ignite UI for Blazor offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the ColumnSelection input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations.

    Blazor Grid Column Selection Example

    La muestra siguiente muestra los tres tipos deIgbGrid 's Selección de columnas comportamiento. Utiliza el desplegable de selección de columnas a continuación para activar cada uno de los modos de selección disponibles.

    * Las columnas Título de contacto, Ciudad y Dirección tienen la selección de columna deshabilitada.

    Basic Usage

    La función de selección de columna puede activarse mediante laColumnSelection entrada, que tomaGridSelectionMode valores.

    Interacciones

    El modo de selección predeterminado esNone. Si se configura comoSingle oMultiple, todas las columnas presentadas loSelectable serán. Dicho esto, para seleccionar una columna, solo tenemos que hacer clic en una, que la marcará comoSelected. Si la columna no es seleccionable, no se aplicará ningún estilo de selección en el encabezado mientras se pasa el cursor.

    [!Note] The Multi Column Headers feature does not reflect on the Selectable input. The ColumnGroupComponent is Selectable, if at least one of its children has the selection behavior enabled. In addition, the component is marked as Selected if all of its Selectable descendants are Selected.

    *En Grupo de columnas de información del país, solo se pueden seleccionar la columna Ciudad y Código postal.

    Keyboard Combinations

    [!Note] The keyboard combinations are available only when the grid ColumnSelection input is set to multiple.

    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 + click en cada celda de encabezado seleccionable.
    • Selección de columna de rango: mantener presionado SHIFT + click selecciona todas las columnas seleccionables en el medio.

    API Manipulations

    La API ofrece algunas capacidades adicionales en lo que respecta a las columnas no visibles, de modo que cada columna oculta podría marcarse comoSelected configurando el configurador correspondiente.

    [!Note] The above statement also applies to the ColumnGroupComponent, except that when the Selected property is changed it changes the state of its descendants.

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

    Styling

    Además de los temas predefinidos, la cuadrícula podía personalizarse aún más estableciendo algunas de las propiedades CSS disponibles. En caso de que quieras cambiar algunos de los colores, primero tienes que establecer aclass para la cuadrícula:

    <IgbGrid class="grid"></IgbGrid>

    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;
}

    Demo

    API References

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

    IgbGrid properties:

    IgbColumn properties:

    IgbColumnGroup properties:

    IgbGrid events:

    • OnColumnsSelectionChange

    Additional Resources

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