Visão geral do redimensionamento de colunas Blazor Grid

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

Dependendo do cenário do usuário, a largura da coluna pode ser definida em pixels, porcentagens ou uma mistura de ambos. Todos esses cenários são suportados pelo recurso Column Resizing. Por padrão, se uma coluna não tiver largura definida, ela se ajusta ao espaço disponível com largura definida em pixels.

Isso significa que a seguinte configuração é possível:

<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.

Pixels

O redimensionamento de colunas com largura em pixels funciona adicionando ou subtraindo diretamente a quantidade horizontal do movimento do mouse do tamanho da coluna.

Percentagens

Ao redimensionar colunas com largura em porcentagens, a quantidade horizontal do movimento do mouse em pixels se traduz aproximadamente em sua quantidade percentual em relação à largura da grade. As colunas permanecem responsivas e qualquer redimensionamento de grade futuro ainda refletirá nas colunas também.

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>

É permitido misturar os tipos de valor de largura mínima e máxima da coluna (pixels ou porcentagens). Se os valores definidos para mínimo e máximo forem definidos como porcentagens, o respectivo tamanho da coluna será limitado aos tamanhos exatos semelhantes aos pixels.

Isso significa que as seguintes configurações são possíveis:

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

<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>

Quando a coluna é inicializada pela primeira vez na exibição, ela resolve sua largura para o tamanho da célula ou cabeçalho mais longo visível. Observe que as células que estão fora das linhas visíveis não são incluídas.

Essa abordagem é mais otimizada em termos de desempenho do que o dimensionamento automático após a inicialização e é recomendada especialmente em casos em que você precisa dimensionar automaticamente um grande número de colunas.

Styling

Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar a cor da alça de redimensionamento, você precisa definir uma classe para a grade primeiro:

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

Em seguida, defina a propriedade CSS relacionada para essa classe:

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

Demo

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.