DxGrid.ColumnResizeMode Property

Specifies whether and how users can resize Grid columns.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(GridColumnResizeMode.Disabled)]
[Parameter]
public GridColumnResizeMode ColumnResizeMode { get; set; }

Property Value

Type	Default	Description
GridColumnResizeMode	Disabled

A GridColumnResizeMode enumeration value.

Available values:

Name	Description
Disabled

A user cannot resize columns.

| | NextColumn |

When a user resizes a column, the width of the column to the right changes (considering the MinWidth value), but the Grid’s total width does not change. Users cannot change the width of the rightmost column.

| | ColumnsContainer |

When a user resizes a column, all other columns retain their widths, but the width of the container that stores all Grid columns changes.

Remarks

If the ColumnResizeMode property is set to Disabled (the default value), a user cannot change a column’s width at runtime.

To enable column resize operations, set the ColumnResizeMode property to one of the following values:

NextColumn

ColumnsContainer

When a user resizes a column, all other columns retain their widths, but the width of the container that stores all Grid columns changes.

The Grid fixes column widths specified in percentages. Fixed values are calculated in pixels. If the sum of all column widths (considering the MinWidth value) is greater than the container’s total width, the Grid displays the horizontal scrollbar. Otherwise, an empty space remains to the right.

If ColumnResizeMode is not Disabled, the following column resize operations are available to users:

Drag a column header’s right border.
Double-click a column’s right border to apply optimal width based on column content.

Limitations

A column before a fixed column is not resizable.
In NextColumn mode, users cannot resize columns if the component container width is less than the sum of all column widths.

Example

The following code snippet activates NextColumn resize mode:

Razor
Supplier
NwindDataService.cs
Program.cs

razor

@inject NwindDataService NwindDataService

<DxGrid Data="@Data"
        ColumnResizeMode="GridColumnResizeMode.NextColumn">
  <Columns>
      <DxGridDataColumn FieldName="ContactName" MinWidth="100" />
      <DxGridDataColumn FieldName="ContactTitle" MinWidth="100" />
      <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
      <DxGridDataColumn FieldName="City" Width="10%" MinWidth="80" />
      <DxGridDataColumn FieldName="Country" Width="10%" MinWidth="80" />
      <DxGridDataColumn FieldName="Phone" Width="15%" MinWidth="80" />
  </Columns>
</DxGrid>

@code {
    IEnumerable<Supplier> Data { get; set; }

    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetSuppliersAsync();
    }
}

csharp

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public partial class Supplier {
        public Supplier() {
            Products = new HashSet<Product>();
        }

        public int SupplierId { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }
        public string HomePage { get; set; }

        public virtual ICollection<Product> Products { get; set; }
    }
}

csharp

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data.Northwind;
using BlazorDemo.DataProviders;

namespace BlazorDemo.Services {
    public partial class NwindDataService {
        public Task<IEnumerable<Supplier>> GetSuppliersAsync(CancellationToken ct = default) {
            // Return your data here
        }
    }
}

csharp

// ...
builder.Services.AddScoped<NwindDataService>();

Run Demo: Grid - Column Resize

Run Demo: Responsive Grid

YouTube video

Implements

ColumnResizeMode