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

    Con la función de selección de la Ignite UI for Blazor en Blazor Grid, puede interactuar fácilmente con los datos y manipularlos mediante interacciones simples con el mouse. Hay tres modos de selección disponibles:

    • Selección de fila
    • Selección de celda
    • Column selection

    Con laRowSelection propiedad, puedes especificar:

    • Ninguno
    • Soltero
    • Selección múltiple

    Blazor Grid Selection Example

    La muestra siguiente muestra tres tipos de comportamientos de selección celular en elIgbGrid. Utiliza los botones de abajo para activar cada uno de los modos de selección disponibles.

    Blazor Grid Selection Options

    The Ignite UI for Blazor IgbGrid component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the IgbGrid. In order to change/enable selection mode you can use RowSelection, CellSelection or Selectable properties.

    Blazor Grid Row Selection

    PropiedadRowSelection te permite especificar las siguientes opciones:

    • None- La selección de filas estaría deshabilitada para elIgbGrid.
    • Single- La selección de solo una fila dentro de laIgbGrid estaría disponible.
    • Multiple- La selección de varias filas estaría disponible usando los selectores de filas, con una combinación de teclas como CTRL + click, o pulsando la space key opción una vez que una celda está enfocada.

    Vaya al tema Selección de filas para obtener más información.

    Blazor Grid Cell Selection

    PropiedadCellSelection te permite especificar las siguientes opciones:

    • None- La selección de celdas estaría deshabilitada para elIgbGrid.
    • Single- La selección de solo una celda dentro de laIgbGrid estaría disponible.
    • Multiple- Actualmente, este es el estado predeterminado de la selección en elIgbGrid. La selección de varias celdas está disponible arrastrando el ratón sobre las celdas, después de que un botón izquierdo hiciera clic continuamente.

    Vaya al tema Selección de celda para obtener más información.

    Blazor Grid Column Selection

    LaSelectable propiedad te permite especificar las siguientes opciones para cadaIgbColumn uno. La selección de columna correspondiente estará habilitada o deshabilitada si esta propiedad se establece como verdadero o falso, respectivamente.

    Esto lleva a las siguientes tres variaciones:

    • Selección única: haga clic con el mouse sobre la celda de la columna.
    • Selección de varias columnas: mantener presionado CTRL + mouse click sobre las celdas de la columna.
    • Selección de columna de rango: mantener presionado SHIFT + mouse click selecciona todo lo que hay en el medio.

    Vaya al tema Selección de columnas para obtener más información.

    Blazor Grid Context Menu

    Usando elContextMenu evento puedes añadir un menú contextual personalizado para facilitar tu trabajoIgbGrid. Con un clic derecho en el cuerpo de la cuadrícula, el evento emite la celda en la que se activa. El menú contextual funcionará con la celda emitida.

    Si hay una selección multicelda, pondremos lógica, que comprobará si la celda seleccionada está en el área de selección multicelda. Si es así, también emitiremos los valores de las celdas seleccionadas.

    Básicamente la función principal se verá así:

        public void RightClick(MouseEventArgs e)
    {
        this.MenuX = e.ClientX + "px";
        this.MenuY = e.ClientY + "px";
    }


    public void onMenuShow(IgbGridCellEventArgs e)
    {
        IgbGridCellEventArgsDetail detail = e.Detail;
        this.ShowMenu = true;
        this.ClickedCell = detail.Cell;
    }

    El menú contextual tendrá las siguientes funciones:

    • Copia el valor de la celda seleccionada.
    • Copie el dataRow de la celda seleccionada.
    • Si la celda seleccionada está dentro de un rango de selección de varias celdas, copie todos los datos seleccionados.
        public void CopyCellData()
    {
        this.ShowMenu = false;
        this.SelectedData = this.ClickedCell.Value.ToString();
        StateHasChanged();
    }


    public async void CopyRowData()
    {
        this.ShowMenu = false;
        NwindDataItem rowData = this.NwindData.ElementAt(this.ClickedCell.Id.RowIndex);
        this.SelectedData = JsonConvert.SerializeObject(rowData);
        StateHasChanged();
}

    public async void CopyCellsData()
    {
        this.ShowMenu = false;
        var selectedData = await this.grid.GetSelectedDataAsync(true, false);
        this.SelectedData = JsonConvert.SerializeObject(selectedData);
        StateHasChanged();
    }

    EllosIgbGrid recogen los datos copiados y los pegan en un elemento contenedor.

    La plantilla que vamos a utilizar para combinar la grilla con el menú contextual:

    <div class="container vertical">
    <div class="wrapper" oncontextmenu="event.preventDefault()">
        <IgbGrid AutoGenerate="false"
                 CellSelection="GridSelectionMode.Multiple"
                 ContextMenu="onMenuShow"
                 @oncontextmenu="RightClick"
                 Name="grid"
                 @ref="grid"
                 Data="NwindData">
            <IgbColumn Field="ProductID"
                       Header="Product ID">
            </IgbColumn>

            <IgbColumn Field="ProductName"
                       Header="Product Name">
            </IgbColumn>

            <IgbColumn Field="UnitsInStock"
                       Header="Units In Stock"
                       DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn Field="UnitPrice"
                       Header="Units Price"
                       DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn Field="Discontinued"
                       DataType="GridColumnDataType.Boolean">
            </IgbColumn>

            <IgbColumn Field="OrderDate"
                       Header="Order Date"
                       DataType="GridColumnDataType.Date">
            </IgbColumn>

        </IgbGrid>
        <div class="selected-data-area">
            @SelectedData
        </div>
        </div>
        @if (ShowMenu)
        {
            <div id="menu" class="contextmenu" style="left: @MenuX; top: @MenuY">
                <span id="copySingleCell" class="item" @onclick="CopyCellData">
                    <IgbIcon @ref=icon IconName="content_copy" Collection="material"></IgbIcon>Copy Cell Data
                </span>
            <span id="copyRow" class="item" @onclick="CopyRowData">
                    <IgbIcon IconName="content_copy" Collection="material"></IgbIcon>Copy Row Data
                </span>
            <span id="copyMultiCells" class="item" @onclick="CopyCellsData">
                    <IgbIcon IconName="content_copy" Collection="material"></IgbIcon>Copy Cells Data
                </span>
            </div>
        }
</div>

    Seleccione varias celdas y presione el botón derecho del mouse. Aparecerá el menú contextual y después de seleccionar Copiar datos de celdas, los datos seleccionados aparecerán en el cuadro vacío de la derecha.

    El resultado es:

    Known Issues and Limitations

    Cuando la cuadrícula noPrimaryKey tiene un sistema fijo y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar o desplazar las solicitudes de disparo a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado tras completar una solicitud de datos:

    • Selección de fila
    • Fila Expandir/contraer
    • Edición de filas
    • Fijación de filas

    API References

    Additional Resources

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