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

    The Web Components Tree Grid Column Selection feature in Ignite UI for Web Components 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.

    Web Components Tree Grid Column Selection Example

    The sample below demonstrates the three types of IgcTreeGridComponent's column selection behavior. Use the column selection dropdown below to enable each of the available selection modes.

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

    Basic Usage

    The column selection feature can be enabled through the ColumnSelection input, which takes GridSelectionMode values.

    Interacciones

    The default selection mode is None. If set to Single or Multiple, all of the presented columns will be selectable. With that being said, in order to select a column, we just need to click on one, which will mark it as selected. If the column is not selectable, no selection style will be applied on the header, while hovering.

    [!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 detalles personales, solo se pueden seleccionar el ID de columna y el Título.

    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

    The API provides some additional capabilities when it comes to the non-visible columns such that, every hidden column could be marked as selected by setting the corresponding setter.

    [!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

    In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

    <igc-tree-grid class="grid"></igc-tree-grid>

    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.

    IgcTreeGridComponent properties:

    • ColumnSelection
    • SelectedColumns
    • SelectColumns
    • DeselectColumns
    • SelectAllColumns
    • DeselectAllColumns

    IgcColumnComponent properties:

    columnGroup properties:

    IgcTreeGridComponent events:

    • OnColumnsSelectionChange

    Additional Resources

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