Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.

    Blazor Grid Column Pinning Overview

    La cuadrícula de datos de Ignite UI for Blazor admite la capacidad de anclar columnas, lo que permite a los usuarios finales bloquear una columna en un orden de columna determinado.

    Se pueden fijar una columna o varias columnas en el lado izquierdo o derecho de la cuadrícula de datos. Además, puede cambiar el estado de los pines de las columnas utilizando la función PinColumn.

    Blazor Ejemplo de anclaje de columnas de cuadrícula

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

    La API de fijación de columnas en la cuadrícula de datos se puede habilitar configurando la propiedad Pinned de una columna o al configurarla utilizando la función PinColumn de la cuadrícula.

    La propiedad Pinned tiene tres opciones:

    • Izquierda: habilitar Left colocará las columnas fijadas en el lado izquierdo de la cuadrícula.
    • Derecha: habilitar Right colocará las columnas fijadas en el lado derecho de la cuadrícula.
    • Ninguno: habilitar None desanclará una columna y reubicará su ubicación predeterminada dentro de la cuadrícula.

    Las columnas no fijadas que están adyacentes a columnas fijadas seguirán manteniendo el desplazamiento horizontal.

    La función PinColumn contiene dos parámetros obligatorios. El primer parámetro es la columna que se va a fijar y el segundo es la configuración de enumeración PinnedPositions.

    Fragmento de código

    En el código siguiente se muestra cómo implementar el anclaje de columnas en la cuadrícula de datos de Blazor con el anclaje de columnas mediante el método Pinned propiedad y PinColumn función:

    <IgbDataGrid Height="100%" Width="100%"
        DefaultColumnMinWidth="120"
        DataSource="@DataSource"
        AutoGenerateColumns="false"
        @ref="DataGridRef">
    
        @*Columns Pinned Left*@
        <IgbTextColumn Field="ID" Pinned="PinnedPositions.Left" />
        <IgbTextColumn Field="FirstName" Pinned="PinnedPositions.Left" />
        <IgbTextColumn Field="LastName" Pinned="PinnedPositions.Left" />
    
        @*Columns Unpinned*@
        <IgbDateTimeColumn Field="Birthday" Pinned="PinnedPositions.None" />
        <IgbNumericColumn Field="Age" Pinned="PinnedPositions.None" />
        <IgbImageColumn Field="CountryFlag" Pinned="PinnedPositions.None" />
    
        @*Columns Pinned Right*@
        <IgbTextColumn Field="Street" Pinned="PinnedPositions.Right" />
        <IgbTextColumn Field="City" Pinned="PinnedPositions.Right" />
        <IgbTextColumn Field="Country" Pinned="PinnedPositions.Right" />
    </IgbDataGrid>
    razor

    IU de fijación de columnas de la barra de herramientas

    Se puede acceder a la interfaz de usuario de fijación de columnas desde el componente IgbDataGridToolbar separado de la cuadrícula. Para ello, todo lo que tenemos que hacer es establecer la propiedad columnPinning de la barra de herramientas en verdadero. La barra de herramientas mostrará un IgbButton y, al hacer clic en él, se mostrará la interfaz de usuario de fijación de columnas. Este botón también muestra el total de columnas fijadas a la izquierda. Si no se crea la barra de herramientas, habilitar la propiedad columnPinning no tendrá ningún efecto y ocultará el botón.

    IgbDataGridToolbar proporciona propiedades adicionales, como agregar un título a la barra de herramientas mediante la propiedad ToolbarTitle, colocar texto en IgbButton configurando la propiedad columnPinningText y agregar un encabezado de título a la interfaz de usuario que oculta la columna configurando columnPinningTitle.

    Manifestación

    EXAMPLE
    MODULES
    DATA GENERATOR
    DATA SOURCE
    RAZOR
    CSS

    Fragmento de código

    <IgbDataGridToolbar TargetGrid="DataGridRef"
        ToolbarTitle="Grid Toolbar Title"
        ColumnPinning="true"
        ColumnPinningText="Pinning"
        ColumnPinningTitle="Column Pinning" />
    <IgbDataGrid Height="100%" Width="100%"
        @ref="DataGridRef"
        DataSource="DataSource" />
    
    @code {
        private IgbDataGrid grid;
        public IgbDataGrid DataGridRef
        {
            get
            {
                return grid;
            }
            set
            {
                grid = value;
                StateHasChanged();
            }
        }
    }
    razor

    Referencias de API