Descripción general del cambio de tamaño de la columna de cuadrícula de árbol de Blazor

    La función de cambio de tamaño de columna Ignite UI for Blazor en Blazor cuadrícula de árbol permite a los usuarios ajustar fácilmente el ancho de las columnas de la IgbTreeGrid. De forma predeterminada, verán un indicador de cambio de tamaño temporal mientras la operación de cambio de tamaño de arrastre esté en efecto. Hay varias opciones de cambio de tamaño disponibles: Cambiar el tamaño de las columnas en píxeles/porcentajes, Restringir el tamaño de las columnas, Ajustar el tamaño automático de las columnas al hacer doble clic y Ajustar el tamaño automático de las columnas al inicializar.

    Ejemplo de cambio de tamaño de columna de cuadrícula de árbol de Blazor

    EXAMPLE
    DATA
    MODULES
    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 también está habilitado a nivel de columna, lo que significa que IgbTreeGrid puede tener una combinación de columnas redimensionables y no redimensionables. Esto se hace a través de la entrada Resizable de IgbColumn.

    <IgbColumn Field="ID" Resizable=true Width="100px"></IgbColumn>
    razor

    Puede suscribirse al evento ColumnResized de IgbTreeGrid para implementar alguna lógica personalizada cuando se cambia el tamaño de una columna. Tanto el ancho de columna anterior como el nuevo, así como el objeto IgbColumn, se exponen a través de los argumentos del evento.

    <IgbTreeGrid Data=data AutoGenerate=false ColumnResized="onResize" PrimaryKey="ID" ForeignKey="ParentID">
        <IgbColumn Field="Title" Resizable=true Width="100px"></IgbColumn>
        <IgbColumn Field="HireDate" Resizable=true Width="100px"></IgbColumn>
    </IgbTreeGrid>
    
    @code {
        private void onResize(IgbColumnResizeEventArgs args)
        {
            IgbColumnType col = args.Detail.Column;
            string pWidth = args.Detail.PrevWidth;
            string nWidth = args.Detail.NewWidth;
        }
    }
    razor

    Cambiar el tamaño de las columnas en píxeles/porcentajes

    Dependiendo del escenario del usuario, el ancho de la columna se puede definir en píxeles, porcentajes o una combinación de ambos. Todos estos escenarios son compatibles con la función de cambio de tamaño de columna. De forma predeterminada, si una columna no tiene el ancho establecido, se ajusta al espacio disponible con el ancho establecido en píxeles.

    Esto significa que es posible la siguiente configuración:

    <IgbTreeGrid Data=data AutoGenerate=false ColumnResized="onResize" PrimaryKey="ID" ForeignKey="ParentID">
        <IgbColumn Field="Title" Resizable=true Width="10%"></IgbColumn>
        <IgbColumn Field="HireDate" Resizable=true Width="100px"></IgbColumn>
        <IgbColumn Field="Age" Resizable=true></IgbColumn>
    </IgbTreeGrid>
    razor

    Hay una ligera diferencia en la forma en que funciona el cambio de tamaño para las columnas configuradas en píxeles y porcentajes.

    Píxeles

    Cambiar el tamaño de las columnas con ancho en píxeles funciona sumando o restando directamente la cantidad horizontal del movimiento del mouse del tamaño de la columna.

    Porcentajes

    Al cambiar el tamaño de las columnas con ancho en porcentajes, la cantidad horizontal del movimiento del mouse en píxeles se traduce aproximadamente a su porcentaje relativo al ancho de la cuadrícula. Las columnas siguen respondiendo y cualquier cambio de tamaño futuro de la cuadrícula también se reflejará en las columnas.

    Restringir el cambio de tamaño de la columna

    También puede configurar los anchos de columna mínimos y máximos permitidos. Esto se hace a través de las entradas MinWidth y MaxWidth de IgbColumn. En este caso, la operación de arrastre del indicador de cambio de tamaño está restringida para notificar al usuario que no se puede cambiar el tamaño de la columna fuera de los límites definidos por MinWidth y MaxWidth.

    <IgbColumn Field="ContactTitle" Resizable=true Width="100px" MinWidth="60px" MaxWidth="230px"></IgbColumn>
    razor

    Se permite mezclar los tipos de valores de ancho de columna mínimo y máximo (píxeles o porcentajes). Si los valores establecidos para mínimo y máximo se establecen en porcentajes, el tamaño de columna respectivo se limitará a esos tamaños exactos similares a los píxeles.

    Esto significa que son posibles las siguientes configuraciones:

    <IgbColumn Field="ContactTitle" Resizable=true Width="10%" MinWidth="60px" MaxWidth="230px"></IgbColumn>
    razor

    o

    <IgbColumn Field="ID" Resizable=true Width="100px" MinWidth="5%" MaxWidth="15%"></IgbColumn>
    razor

    Tamaño automático de columnas al hacer doble clic

    Se puede cambiar el tamaño de cada columna automáticamente haciendo doble clic en el lado derecho del encabezado; la columna se ajustará al valor de celda más largo actualmente visible, incluido el encabezado mismo. Este comportamiento está habilitado de forma predeterminada, no se necesita configuración adicional. Sin embargo, la columna no tendrá un tamaño automático en caso de que MaxWidth esté configurado en esa columna y el nuevo ancho exceda ese valor de MaxWidth. En este caso, el tamaño de la columna se ajustará al valor MaxWidth preestablecido.

    También puede ajustar automáticamente el tamaño de una columna de forma dinámica utilizando el método Autosize expuesto en IgbColumn.

    @code {
        private IgbTreeGrid gridRef;
    
        private void AutosizeColumn()
        {
            IgbColumn column = gridRef.Columns.Where((col) => { return col.Field == "ID"; }).FirstOrDefault();
            column.Autosize(false);
        }
    }
    razor

    Tamaño automático de columnas en la inicialización

    Cada columna se puede configurar para que tenga un tamaño automático en la inicialización configurando Width en 'auto':

    <IgbColumn Width="auto"></IgbColumn>
    razor

    Cuando la columna se inicializa por primera vez en la vista, resuelve su ancho al tamaño de la celda o encabezado visible más largo. Tenga en cuenta que las celdas que están fuera de las filas visibles no se incluyen.

    Este enfoque optimiza más el rendimiento que la inicialización de publicaciones con tamaño automático y se recomienda especialmente en los casos en los que necesita ajustar el tamaño automáticamente de una gran cantidad de columnas.

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    Estilo

    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 el color del controlador de cambio de tamaño, primero debe establecer una clase para la cuadrícula:

    <IgbTreeGrid class="grid"></IgbTreeGrid>
    razor

    Luego establezca la propiedad CSS relacionada para esa clase:

    .grid {
        --ig-grid-resize-line-color: #f35b04;
    }
    css

    Manifestación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    Referencias de API

    Recursos adicionales

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