DxGridColumn.FixedPosition Property

Allows you to anchor the column to the Grid’s left or right edge.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(GridColumnFixedPosition.None)]
[Parameter]
public GridColumnFixedPosition FixedPosition { get; set; }

Property Value

Type	Default	Description
GridColumnFixedPosition	None	An enumeration value.

Available values:

Name	Description
None	The column is moved when a user scrolls the Grid horizontally.
Left	The column is anchored to the Grid’s left edge and remains visible when a user scrolls the Grid horizontally.
Right	The column is anchored to the Grid’s right edge and remains visible when a user scrolls the Grid horizontally.

Remarks

A Grid component displays a horizontal scrollbar when the total width of all its columns exceeds the size of the component. Use a column’s FixedPosition property to freeze the column and keep it visible on screen while users scroll the Grid horizontally.

Note

When you export Grid data to an XLS or XLSX file, Grid keeps data columns anchored to the left edge frozen, while columns anchored to the right edge become regular columns.

The example below anchors (fixes) the Ship Name and Shipped Date columns to the Grid’s left and right edges:

Razor

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<style>
    .my-class {
        width: 950px;
    }
</style>

<DxGrid Data="Data" CssClass="my-class">
    <Columns>
        <DxGridDataColumn FieldName="ShipName" FixedPosition="GridColumnFixedPosition.Left" Width="250px" />
        <DxGridDataColumn FieldName="ShipAddress" Width="350px" />
        <DxGridDataColumn FieldName="ShipCity" Width="200px" />
        <DxGridDataColumn FieldName="ShipPostalCode" Width="150px" />
        <DxGridDataColumn FieldName="ShipCountry" Width="200px" />
        <DxGridDataColumn FieldName="Freight" Width="100px" />
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" Width="120px" />
        <DxGridDataColumn FieldName="ShippedDate" FixedPosition="GridColumnFixedPosition.Right" Width="120px" />
    </Columns>
</DxGrid>

@code {
    IEnumerable<object> Data { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Data = await Northwind.Orders.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Order

using System;
using System.Collections.Generic;

#nullable disable

namespace Grid.Northwind {
    public partial class Order {
        public Order() {
            OrderDetails = new HashSet<OrderDetail>();
        }

        public int OrderId { get; set; }
        public string CustomerId { get; set; }
        public int? EmployeeId { get; set; }
        public DateTime? OrderDate { get; set; }
        public DateTime? RequiredDate { get; set; }
        public DateTime? ShippedDate { get; set; }
        public int? ShipVia { get; set; }
        public decimal? Freight { get; set; }
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }

        public virtual Customer Customer { get; set; }
        public virtual Shipper ShipViaNavigation { get; set; }
        public virtual ICollection<OrderDetail> OrderDetails { get; set; }
    }
}

NorthwindContext

using Microsoft.EntityFrameworkCore;
#nullable disable

namespace Grid.Northwind {
    public partial class NorthwindContext : DbContext {

        public NorthwindContext(DbContextOptions<NorthwindContext> options)
            : base(options) {
        }
        // ...
        public virtual DbSet<Order> Orders { get; set; }
        // ...

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
            if(!optionsBuilder.IsConfigured) {
                optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true");
            }
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder) {
            modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
            // ...
            modelBuilder.Entity<Order>(entity => {
                entity.HasIndex(e => e.CustomerId, "CustomerID");
                entity.HasIndex(e => e.CustomerId, "CustomersOrders");
                entity.HasIndex(e => e.EmployeeId, "EmployeeID");
                entity.HasIndex(e => e.EmployeeId, "EmployeesOrders");
                entity.HasIndex(e => e.OrderDate, "OrderDate");
                entity.HasIndex(e => e.ShipPostalCode, "ShipPostalCode");
                entity.HasIndex(e => e.ShippedDate, "ShippedDate");
                entity.HasIndex(e => e.ShipVia, "ShippersOrders");
                entity.Property(e => e.OrderId).HasColumnName("OrderID");
                entity.Property(e => e.CustomerId)
                    .HasMaxLength(5)
                    .HasColumnName("CustomerID")
                    .IsFixedLength(true);
                entity.Property(e => e.EmployeeId).HasColumnName("EmployeeID");
                entity.Property(e => e.Freight)
                    .HasColumnType("money")
                    .HasDefaultValueSql("((0))");
                entity.Property(e => e.OrderDate).HasColumnType("datetime");
                entity.Property(e => e.RequiredDate).HasColumnType("datetime");
                entity.Property(e => e.ShipAddress).HasMaxLength(60);
                entity.Property(e => e.ShipCity).HasMaxLength(15);
                entity.Property(e => e.ShipCountry).HasMaxLength(15);
                entity.Property(e => e.ShipName).HasMaxLength(40);
                entity.Property(e => e.ShipPostalCode).HasMaxLength(10);
                entity.Property(e => e.ShipRegion).HasMaxLength(15);
                entity.Property(e => e.ShippedDate).HasColumnType("datetime");
                entity.HasOne(d => d.Customer)
                    .WithMany(p => p.Orders)
                    .HasForeignKey(d => d.CustomerId)
                    .HasConstraintName("FK_Orders_Customers");
                entity.HasOne(d => d.ShipViaNavigation)
                    .WithMany(p => p.Orders)
                    .HasForeignKey(d => d.ShipVia)
                    .HasConstraintName("FK_Orders_Shippers");
            });
            // ...
            OnModelCreatingPartial(modelBuilder);
        }

        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

Program.cs

using Microsoft.EntityFrameworkCore;
// ...
builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => {
    var env = sp.GetRequiredService<IWebHostEnvironment>();
    var dbPath = Path.Combine(env.ContentRootPath, "Northwind-5e44b51f.mdf");
    options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
});

Fixed Column Layout

The Grid layout can include multiple zones with columns. The display order of zones is as follows:

1. Columns fixed to the left edge.
2. Regular columns.
3. Columns fixed to the right edge.

In a zone, the Grid displays columns based on their visible indexes in the following order:

1. Columns with non-negative visible indexes. The smaller the index, the more to the left the Grid displays the column.

2. Columns with unset and negative visible indexes. The display order of these columns corresponds to the column order in the grid markup.

Grouped columns are invisible unless you set the Grid’s ShowGroupedColumns property to true.

Refer to the following section for more information about the grid layout: Layout Specifics.

Change a Fixed Position at Runtime

Implement custom UI elements to allow users to fix and unfix columns at runtime. The example below demonstrates how to change the command column’s FixedPosition once a user changes the value of a combo box. In the example, fixed columns are colored gray for demonstration purposes.

Razor

<div class="option-component">
    <label for="combo-box" class="pe-2">Command Column Fixed Position:</label>
    <DxComboBox Data="Enum.GetValues<GridColumnFixedPosition>()"
        CssClass="my-combo-box-class"
        Id="combo-box"
        Value="CommandColumnFixedPosition"
        ValueChanged="(GridColumnFixedPosition newValue) => ChangeCommandColumnFixedPosition(newValue)" />
</div>
<DxGrid @ref=Grid Data="Data" CssClass="my-grid-class" CustomizeElement="OnCustomizeElement">
    <Columns>
        <DxGridCommandColumn @ref="CommandColumn" Width="200px" />
        <DxGridDataColumn FieldName="ShipName" Width="250px" />
        <DxGridDataColumn FieldName="ShipAddress" Width="350px" />
        <DxGridDataColumn FieldName="ShipCity" Width="200px" />
        <DxGridDataColumn FieldName="ShipPostalCode" Width="150px" />
        <DxGridDataColumn FieldName="ShipCountry" Width="200px" />
        <DxGridDataColumn FieldName="Freight" Width="100px" />
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" Width="120px" />
        <DxGridDataColumn FieldName="ShippedDate" Width="120px" />
    </Columns>
</DxGrid>

@code {
    IGrid Grid { get; set; }
    IGridCommandColumn CommandColumn { get; set; }
    IEnumerable<object> Data { get; set; }
    GridColumnFixedPosition CommandColumnFixedPosition { get; set; } = GridColumnFixedPosition.None;

    void OnCustomizeElement(GridCustomizeElementEventArgs e) {
        if(e.ElementType == GridElementType.CommandCell && e.Column.FixedPosition != GridColumnFixedPosition.None) {
            e.Style = "background-color: #efefef;";
        } 
    } 

    void ChangeCommandColumnFixedPosition(GridColumnFixedPosition fixedPosition) {
        CommandColumnFixedPosition = fixedPosition;
        Grid.BeginUpdate();
        CommandColumn.FixedPosition = CommandColumnFixedPosition; 
        Grid.EndUpdate();
    }
    // ...
}

CSS

.my-grid-class {
    width: 950px;
}

.my-combo-box-class{
    width: 200px;
}

.option-component {
    display: flex;
    align-items: center;
    margin-bottom: 0.35rem;
}

View Example: Display a Context Menu

Reorder Fixed Columns

When users move a column in the Grid or Column Chooser, the Grid component updates the column’s VisibleIndex property and reorders columns in the corresponding zone.

The Grid prevents users from moving a column from one zone to another. For instance, users cannot place an unfixed column before columns anchored to the Grid’s left edge.

The following image demonstrates how users can reorder grid columns. Fixed columns on the image are colored gray for demonstration purposes.

If your DxGrid uses an ObservableCollection data source, you can incorporate row drag and drop support. Refer to the following example for more information: Incorporate Drag and Drop Support.

Resize Fixed Columns

Set the Grid’s ColumnResizeMode property to NextColumn or ColumnsContainer to allow users to change column widths. A column before a fixed column is not resizable. The image below demonstrates how users can resize columns in ColumnsContainer resize mode. Fixed columns on the image are colored gray for demonstration purposes.

In NextColumn resize mode, users cannot change the width of a zone at the expense of another zone. That is, users cannot drag borders that separate zones.

Implements

FixedPosition