Web Components Selección de celdas de cuadrícula de árbol

    The Ignite UI for Web Components Cell Selection in Web Components Tree Grid enables rich data select capabilities and offers powerful API in the IgcTreeGridComponent component. The Web Components Tree Grid supports three selection modes:

    • Selección de celdas múltiples de cuadrícula de árbol
    • Tree Grid Single Selection
    • Cuadrícula de árbol Ninguna selección

    Profundicemos en cada una de estas opciones.

    Web Components Tree Grid Cell Selection Example

    The sample below demonstrates the three types of IgcTreeGridComponent's cell selection behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.

    Selection Types

    Tree Grid Multiple-Cell Selection

    Cómo seleccionar celdas:

    • ​Arrastrando con el mouse: se realizará la selección de datos rectangulares de las celdas.
    • Al CTRL presionar la tecla + arrastrar el mouse, se realizarán múltiples selecciones de rango. Se conservará cualquier otra selección de celdas existente.
    • Selección instantánea de varias celdas mediante el uso SHIFT de la llave. Seleccione una sola celda y seleccione otra celda individual manteniendo presionada la SHIFT tecla. Se seleccionará el rango de celdas entre las dos celdas. Tenga en cuenta que si se selecciona otra segunda celda mientras se mantiene presionada SHIFT la tecla, el rango de selección de celda se actualizará en función de la posición de la primera celda seleccionada (punto de inicio).
    • Selección de varias celdas del teclado usando las Arrow teclas mientras mantiene presionada SHIFT la tecla. El rango de selección de varias celdas se creará en función de la celda enfocada.
    • Selección de varias celdas del teclado usando las teclas + ↑​ ​← ↓ → y CTRL + HOME / END mientras mantiene presionada SHIFT la CTRL tecla. El rango de selección de varias celdas se creará en función de la celda enfocada.
    • Al hacer clic con la tecla izquierda del mouse mientras mantiene presionada CTRL la tecla, se agregarán rangos de celdas individuales a la colección de celdas seleccionadas.
    • La selección continua de múltiples celdas está disponible haciendo clic con el mouse y arrastrando.

    Manifestación

    Tree Grid Single Selection

    When you set the CellSelection to single, this allows you to have only one selected cell in the grid at a time. Also the mode mouse drag will not work and instead of selecting a cell, this will make default text selection.

    When single cell is selected selected event is emitted, no matter if the selection mode is single or multiple. In multi-cell selection mode when you select a range of cells RangeSelected event is emitted.

    Cuadrícula de árbol Ninguna selección

    If you want to disable cell selection you can just set CellSelection to none. In this mode when you click over the cell or try to navigate with keyboard, the cell is not selected, only the activation style is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below.

    Keyboard Navigation Interactions

    While Shift Key is Pressed

    • SHIFT + ↑ para agregar la celda anterior a la selección actual.
    • SHIFT + ↓ para agregar la celda inferior a la selección actual.
    • SHIFT + ← para agregar la celda izquierda a la selección actual.
    • SHIFT + → para agregar la celda derecha a la selección actual.

    While Ctrl + Shift Keys are Pressed

    • CTRL + SHIFT + ↑ para seleccionar todas las celdas por encima de la celda enfocada en la columna.
    • CTRL + SHIFT + ↓ para seleccionar todas las celdas debajo de la celda enfocada en la columna.
    • CTRL + SHIFT + ← para seleccionar todas las celdas hasta el comienzo de la fila.
    • CTRL + SHIFT + → para seleccionar todas las celdas hasta el final de la fila.
    • CTRL + SHIFT + HOME para seleccionar todas las celdas de la celda enfocada hasta la primera celda de la cuadrícula
    • CTRL + SHIFT + END para seleccionar todas las celdas de la celda enfocada hasta la última celda de la cuadrícula

    [!Note] Continuous scroll is possible only within Grid's body.

    Api Usage

    A continuación se detallan los métodos que puede utilizar para seleccionar rangos, borrar la selección u obtener datos de celdas seleccionadas.

    Select range

    SelectRange - Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.

    const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid.selectRange(range);

    Clear cell selection

    ClearCellSelection will clear the current cell selection.

    this.grid.clearCellSelection();

    Get Selected Data

    getSelectedData will return array of the selected data in format depending on the selection. Examples below:

    • Si se seleccionan tres celdas individuales diferentes:
    expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];
    • Si se seleccionan tres celdas de una columna:
    expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];
    • Si se seleccionan tres celdas arrastrando el mouse desde una fila y tres columnas:
    expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];
    • Si se seleccionan tres celdas arrastrando el mouse desde dos filas y tres columnas:
    expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];
    • Si se seleccionan dos rangos diferentes:
    expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];
    • Si se seleccionan dos rangos superpuestos, el formato sería:
    expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];

    Features Integration

    La selección de varias celdas se basa en índices (selección de elementos DOM).

    • Sorting - When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending.
    • Paging - On paging selected cells will be cleared. Selection wont be persisted across pages.
    • Filtering - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells.
    • Resizing - On column resizing selected cells will not be cleared.
    • Hiding - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected.
    • Pinning - Selected cell will not be cleared. Same as hiding
    • GroupBy - On column grouping selected cells will not be cleared.

    Styling

    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 clase para la cuadrícula:

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

    Luego configure las propiedades CSS relacionadas para esa clase:

    .treeGrid {
    --ig-grid-cell-selected-text-color: #fff;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062a3;
    --ig-grid-cell-editing-background: #0062a3;
}

    Manifestación

    API References

    Additional Resources

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