Visão geral do redimensionamento de colunas Blazor Grid

O recurso Ignite UI for Blazor Column Resizing no Blazor Grid permite que os usuários ajustem facilmente a largura das colunas do IgbGrid. Por padrão, eles verão um indicador de redimensionamento temporário enquanto a operação de redimensionamento por arrasto estiver em vigor. Há várias opções de redimensionamento disponíveis - Redimensionar colunas em pixels/porcentagens, Restringir redimensionamento de colunas, Redimensionar colunas automaticamente ao clicar duas vezes e Redimensionar colunas automaticamente na inicialização.

Blazor Grid Column Resizing Example

O redimensionamento de colunas também é habilitado por nível de coluna, o que significa que o IgbGrid pode ter uma mistura de colunas redimensionáveis e não redimensionáveis. Isso é feito por meio da entrada Resizable do IgbColumn.

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

Você pode assinar o evento ColumnResized do IgbGrid para implementar alguma lógica personalizada quando uma coluna é redimensionada. Ambas as larguras de coluna, anterior e nova, bem como o objeto IgbColumn, são expostos por meio dos argumentos do evento.

<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

Você também pode configurar as larguras mínima e máxima permitidas para as colunas. Isso é feito por meio das entradas MinWidth e MaxWidth do IgbColumn. Nesse caso, a operação de arrastar do indicador de redimensionamento é restrita para notificar o usuário de que a coluna não pode ser redimensionada fora dos limites definidos por MinWidth e 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

Cada coluna pode ser dimensionada automaticamente clicando duas vezes no lado direito do cabeçalho - a coluna será dimensionada para o maior valor de célula visível no momento, incluindo o próprio cabeçalho. Esse comportamento é habilitado por padrão, nenhuma configuração adicional é necessária. No entanto, a coluna não será dimensionada automaticamente caso MaxWidth seja definido nessa coluna e a nova largura exceda esse valor MaxWidth. Nesse caso, a coluna será dimensionada de acordo com o valor MaxWidth predefinido.

Você também pode dimensionar automaticamente uma coluna dinamicamente usando o método Autosize exposto em 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

Cada coluna pode ser definida para tamanho automático na inicialização, definindo Width como '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.