Blazor Descripción general del cambio de tamaño de las columnas de cuadrícula

    The Ignite UI for Blazor Column Resizing feature in Blazor Grid allows users to easily adjust the width of the columns of the IgbGrid. By default, they will see a temporary resize indicator while the drag resizing operation is in effect. There are several resizing options available - Resizing Columns in Pixels/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, and Auto-Size Columns on Initialization.

    Blazor Grid Column Resizing Example

    Column resizing is also enabled per-column level, meaning that the IgbGrid can have a mix of resizable and non-resizable columns. This is done via the Resizable input of the IgbColumn.

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

    You can subscribe to the ColumnResized event of the IgbGrid to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the IgbColumn object, are exposed through the event arguments.

    <IgbGrid Data=data AutoGenerate=false ColumnResized="onResize">
    <IgbColumn Field="ID" Resizable=true Width="100px"></IgbColumn>
    <IgbColumn Field="CompanyName" Resizable=true Width="100px"></IgbColumn>
</IgbGrid>

@code {
    private void onResize(IgbColumnResizeEventArgs args)
    {
        IgbColumnType col = args.Detail.Column;
        string pWidth = args.Detail.PrevWidth;
        string nWidth = args.Detail.NewWidth;
    }
}

    Resizing Columns in Pixels/Percentages

    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:

    <IgbGrid Data=data AutoGenerate=false ColumnResized="onResize">
    <IgbColumn Field="ID" Resizable=true Width="10%"></IgbColumn>
    <IgbColumn Field="CompanyName" Resizable=true Width="100px"></IgbColumn>
    <IgbColumn Field="ContactTitle" Resizable=true></IgbColumn>
</IgbGrid>

    [!Note] There is a slight difference in the way resizing works for columns set in pixels and percentages.

    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.

    Restrict Column Resizing

    You can also configure the minimum and maximum allowable column widths. This is done via the MinWidth and MaxWidth inputs of the IgbColumn. In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by MinWidth and MaxWidth.

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

    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>

    o

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

    Auto-Size Columns on Double Click

    Each column can be auto sized by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be auto-sized in case MaxWidth is set on that column and the new width exceeds that MaxWidth value. In this case the column will be sized according to preset MaxWidth value.

    You can also auto-size a column dynamically using the exposed Autosize method on IgbColumn.

    @code {
    private IgbGrid gridRef;

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

    Auto-Size Columns on Initialization

    Each column can be set to auto-size on initialization by setting Width to 'auto':

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

    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.

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

    <IgbGrid class="grid"></IgbGrid>

    Luego establezca la propiedad CSS relacionada para esa clase:

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

    Demo

    API References

    Additional Resources

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