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 Resizing

    La Ignite UI for Blazor Data Grid admite la capacidad de cambiar el tamaño de las columnas, lo que le brinda flexibilidad sobre cómo desea mostrar sus columnas con respecto al ancho de cada una.

    Blazor Ejemplo de cambio de tamaño de columna 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.

    El cambio de tamaño de las columnas en la Ignite UI for Blazor DataGrid está activado de forma predeterminada y se puede controlar mediante la propiedad ColumnResizingMode de la cuadrícula. Esta propiedad tiene tres opciones. Cada una de ellas se explica a continuación:

    • Deferred: la opción predeterminada. Al cambiar el tamaño, aparecerá un separador que muestra qué tan grande o pequeña será la columna cuando se cambie el tamaño.
    • Immediate: Al cambiar el tamaño, no habrá separador. El ancho de la columna seguirá el puntero a medida que arrastre el borde de la columna y cambie el tamaño en consecuencia.
    • None: no se puede cambiar el tamaño de las columnas.

    Cuando el cambio de tamaño de la columna se establece en Deferred, el separador que aparece se puede modificar en color y ancho usando las propiedades ColumnResizingSeparatorBackground y ColumnResizingSeparatorWidth de la cuadrícula, respectivamente.

    También puede animar las columnas a medida que cambian de tamaño cuando el modo de cambio de tamaño está configurado en Solo Deferred. Esto se hace estableciendo la propiedad ColumnResizingAnimationMode en Interpolate.

    Se puede determinar si cada columna de la cuadrícula puede cambiar de tamaño individualmente o no. Si desea habilitar o deshabilitar el cambio de tamaño en una columna en particular, puede configurar la propiedad IsResizingEnabled de esa columna.

    Al cambiar el tamaño de una columna de ancho de estrella, cambiará esa columna a una columna fija.

    Fragmento de código

    El siguiente fragmento de código demuestra cómo implementar el cambio de tamaño de columnas en la cuadrícula de datos Blazor, donde la columna Street en este caso no se podrá cambiar de tamaño. En este caso, el separador de cambio de tamaño de columnas tendrá 5 píxeles de ancho y las columnas que se puedan cambiar de tamaño también se animarán cuando se cambie su tamaño:

    <IgbDataGrid Height="100%" Width="100%"
        AutoGenerateColumns="false"
        DataSource="DataSource"
        ColumnResizingMode="ColumnResizingMode.Deferred"
        ColumnResizingAnimationMode="ColumnResizingAnimationMode.Interpolate"
        ColumnResizingSeparatorWidth="5">
        <IgbTextColumn Field="FirstName" />
        <IgbTextColumn Field="LastName" />
        <IgbTextColumn Field="Street" IsResizingEnabled="false" />
        <IgbTextColumn Field="City" />
    </IgbDataGrid>
    razor

    Referencias de API