[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Blazor Grid Column Resizing
A Grade de Dados do Ignite UI for Blazor oferece suporte à capacidade de redimensionar colunas, oferecendo flexibilidade sobre como você deseja exibir suas colunas em relação à largura de cada uma.
Blazor Grid Column Resizing Example
O redimensionamento de coluna no Ignite UI for Blazor DataGrid está ativado por padrão e pode ser controlado usando a ColumnResizingMode propriedade da grade. Esta propriedade tem três opções. Cada opção é explicada abaixo:
Deferred: A opção padrão. Ao redimensionar, um separador aparecerá mostrando o tamanho da coluna quando redimensionada.Immediate: Ao redimensionar, não haverá separador. A largura da coluna seguirá o ponteiro à medida que você arrasta a borda da coluna e redimensiona de acordo.None: As colunas não podem ser redimensionadas.
Quando o redimensionamento de coluna é definido como Deferred, o separador que aparece pode ser modificado em cor e largura usando as ColumnResizingSeparatorBackground propriedades e ColumnResizingSeparatorWidth da grade, respectivamente.
Você também pode animar as colunas à medida que elas são redimensionadas quando o modo de redimensionamento é definido como Deferred apenas. Isso é feito definindo a ColumnResizingAnimationMode propriedade como Interpolate.
Cada coluna na grade pode ser determinada se pode ou não ser redimensionada individualmente. Se você quiser habilitar ou desabilitar o redimensionamento em uma coluna específica, você pode definir a propriedade IsResizingEnabled dessa coluna.
Ao redimensionar uma coluna com largura de estrela, ela se tornará uma coluna fixa.
Code Snippet
O snippet de código a seguir demonstra como implementar o redimensionamento de coluna na grade de dados Blazor, em que a coluna Street, nesse caso, não será redimensionável. Nesse caso, o separador de redimensionamento de coluna terá 5 pixels de largura e as colunas redimensionáveis também serão animadas quando redimensionadas:
<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>