Columns in Blazor Grid

• Apr 01, 2026
• 13 minutes to read

DevExpress Blazor Grid supports the following column types: data column (bound and unbound), command column, and selection column.

DxGrid generates user-friendly captions for all data columns. Caption text is based on the bound data field name. Use the Caption property to change the generated caption.

Data Column (Bound)

Bound columns obtain their data from data source fields. Declare a DxGridDataColumn object in the Columns tag and specify the FieldName property to bind the column to a data field.

Note

The FieldName property value must be unique for each data column.

Razor

@inject WeatherForecastService ForecastService

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" Width="120px" />
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" Width="120px" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
}

WeatherForecast

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
    public string Forecast { get; set; }
    public string CloudCover { get; set; }
    public bool Precipitation { get; set; }
}

WeatherForecastService

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Threading.Tasks;

    public class WeatherForecastService {
        private List<WeatherForecast> Forecast { get; set; }

        private static string[] CloudCover = new[] {
            "Sunny", "Partly cloudy", "Cloudy", "Storm"
        };

        Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
            Tuple.Create( 22 , "Hot"),
            Tuple.Create( 13 , "Warm"),
            Tuple.Create( 0 , "Cold"),
            Tuple.Create( -10 , "Freezing")
        };

        public WeatherForecastService() {
            Forecast = CreateForecast();
        }

        private List<WeatherForecast> CreateForecast() {
            var rng = new Random();
            DateTime startDate = DateTime.Now;
            return Enumerable.Range(1, 15).Select(index => {
                var temperatureC = rng.Next(-10, 30);
                return new WeatherForecast {
                    Date = startDate.AddDays(index),               
                    TemperatureC = temperatureC,
                    CloudCover = CloudCover[rng.Next(0, 4)],
                    Precipitation = Convert.ToBoolean(rng.Next(0, 2)),
                    Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
                };
            }).ToList();
        }

        public IEnumerable<WeatherForecast> GetForecast() {
            return Forecast.ToArray();
        }
        // ...
}

Program.cs

// ...
builder.Services.AddSingleton<WeatherForecastService>();

Run Demo: Grid - Data Binding Read Tutorial: Bind Blazor Grid to Data

Data Column (Unbound)

Unbound columns display values that are not stored in the assigned data collection. To create an unbound column, declare a DxGridDataColumn object in the Columns tag and specify the following properties:

UnboundType

Indicates that the column is unbound and specifies its data type.

FieldName

Specifies a unique name used to identify the column. This name must not match field names in the data source.

You can use one of the following APIs to populate an unbound column with data:

UnboundExpression property

Specifies an expression used to calculate column values. An expression can consist of field names, constants, operators, and functions and should use criteria language syntax.

UnboundColumnData event

Allows you to implement custom logic or obtain column values from a custom/external data source.

<DxGrid Data="forecasts" UnboundColumnData="Grid_CustomUnboundColumnData">
    <Columns>
        <DxGridDataColumn FieldName="Date" Caption="Date" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temperature (\x2103)")" />
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temperature (\x2109)")"
                          UnboundType="GridUnboundColumnType.Decimal"
                          UnboundExpression="32 + [TemperatureC] / 0.5556" />
        <DxGridDataColumn FieldName="Summary"
                          UnboundType="GridUnboundColumnType.String" />
    </Columns>
</DxGrid>

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }

    void Grid_CustomUnboundColumnData(GridUnboundColumnDataEventArgs e) {
        if (e.FieldName == "Summary") {
            int temperature = Convert.ToInt32(e.GetRowValue("TemperatureC"));
            e.Value = GetTemperatureString(temperature);
        }
    }

    static string GetTemperatureString(int value) {
        if (value < -10)
            return "Cool";
        if (value >= -10 && value < 5)
            return "Chilly";
        if (value >= 5 && value < 15)
            return "Warm";
        return "Hot";
    }
}

View Example: Create and Edit Unbound Columns

Run Demo: Unbound Columns

Limitations

• When you use a Server Mode data source, unbound columns are unavailable if their values are populated via the UnboundColumnData event. Create unbound columns using UnboundExpression instead.
• When you use a GridDevExtremeDataSource, unbound columns are unavailable.

Command Column

Declare a DxGridCommandColumn object in the Columns tag to display a command column:

<DxGrid Data="DataSource" KeyFieldName="ProductId">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
    </Columns>
</DxGrid>

A command column contains CRUD-related buttons (New, Edit, and Delete) and the Clear button that resets values in the filter row. For edited rows in EditRow/EditCell mode, the column displays Save and Cancel buttons. DisplayMode specifies whether command buttons display icons, captions, or both.

Run Demo: Edit Row Run Demo: Filter Row Read Tutorial: Edit Data in Blazor Grid

The following properties allow you to hide unnecessary command buttons:

• NewButtonVisible
• EditButtonVisible
• DeleteButtonVisible
• ClearFilterButtonVisible
• SaveButtonVisible
• CancelButtonVisible

Selection Column

Declare a DxGridSelectionColumn object in the Columns tag to display a selection column:

<DxGrid Data="Products" KeyFieldName="ProductId">
    <Columns>
        <DxGridSelectionColumn />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" />
        <DxGridDataColumn FieldName="UnitsInStock" Caption="Units in Stock" />
        <DxGridDataColumn FieldName="QuantityPerUnit" Caption="Quantity per Unit" />
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
</DxGrid>

Run Demo: Selection Column Read Tutorial: Selection and Focus in Blazor Grid

Single Selection

When the SelectionMode property is set to Single, the selection column displays radio buttons. Users can click a button to select one row at a time.

<DxGrid Data="Products" KeyFieldName="ProductId" SelectionMode="GridSelectionMode.Single">
    <Columns>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" />
        <DxGridDataColumn FieldName="UnitsInStock" Caption="Units in Stock" />
        <DxGridDataColumn FieldName="QuantityPerUnit" Caption="Quantity per Unit" />
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
</DxGrid>

Multiple Selection

When the SelectionMode property is set to Multiple (the default value), the selection column displays checkboxes. Users can click them to select and deselect individual rows.

In Multiple selection mode, the selection column displays the Select All checkbox in the column header. A user can click this checkbox to select or deselect all rows on the current page or on all grid pages depending on the SelectAllCheckboxMode property value. Available property values are as follows:

Page

The Select All checkbox selects and deselects all rows on the current grid page. This mode changes to Mixed when the Grid is bound to a Server Mode or Queryable data source and vertical virtual scrolling mode is activated.

AllPages

The Select All checkbox selects and deselects all rows on all grid pages. This mode changes to Mixed when the Grid is bound to a Server Mode or Queryable data source.

Mixed

The Select All checkbox selects and deselects all rows on the current grid page. An additional drop-down button displays a context menu that allows users to select and deselect all rows on all grid pages.

<DxGrid Data="Products" 
        KeyFieldName="ProductId" 
        SelectAllCheckboxMode="GridSelectAllCheckboxMode.Mixed">
    <Columns>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" />
        <DxGridDataColumn FieldName="UnitsInStock" Caption="Units in Stock" />
        <DxGridDataColumn FieldName="QuantityPerUnit" Caption="Quantity per Unit" />
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
</DxGrid>

To hide the Select All checkbox, disable the AllowSelectAll option.

Note

The Select All checkbox functionality has limitations. For additional information, refer to the following section: Selection Limitations.

Band Column (Header Bands)

You can combine columns into logical groups called bands. To create such a group, declare a DxGridBandColumn object and specify child columns in the Columns tag. You can create as many nesting levels as your business task requires.

<DxGrid @ref="Grid"
        Data="Data">
    <Columns>
        <DxGridDataColumn FieldName="SalesPerson" Caption="Salesperson" />
        <DxGridBandColumn Caption="Order">
            <Columns>
                <DxGridDataColumn FieldName="CompanyName" />
                <DxGridDataColumn FieldName="OrderDate" Caption="Date" Width="100px" />
                <DxGridBandColumn Caption="Product">
                    <Columns>
                        <DxGridDataColumn FieldName="ProductName" Caption="Name" />
                        <DxGridDataColumn FieldName="UnitPrice" 
                                          DisplayFormat="c" 
                                          CaptionAlignment="GridTextAlignment.Right" 
                                          Width="100px" />
                    </Columns>
                </DxGridBandColumn>
                <DxGridDataColumn FieldName="Quantity" Width="80px" />
            </Columns>
        </DxGridBandColumn>
    </Columns>
</DxGrid>

Run Demo: Grid - Header Bands

Task-Based Examples

Display an Image Column

To display an image from a binary source, place an <img> element into the CellDisplayTemplate and specify the image source:

<DxGridDataColumn FieldName="ImageData">
    <CellDisplayTemplate>
        <img style="width: 300px;" src="@GetImageSource(context)" />
    </CellDisplayTemplate>
</DxGridDataColumn>

const string ImageSourceFormat = "data:image/gif;base64,{0}";

void GetImageSource(GridCellDisplayTemplateContext context) {
    return string.Format(ImageSourceFormat, Convert.ToBase64String((byte[])context.Value));
}

Create a Foreign Key (ComboBox/Lookup) Column

A foreign key is a database key that manages relationships between tables. It identifies a column in a referenced table and lets you access that column’s data. Follow the steps below to create such a column:

1. Add a DxGridDataColumn object to the Columns tag.
2. Assign the field name that stores foreign keys to the column’s FieldName property.
3. Place DxComboBoxSettings into the column’s EditSettings tag.
4. Assign an external data source to the Data property.
5. Assign the name of the external data source field that stores foreign keys to the ValueFieldName property. The TextFieldName property allows you to specify text strings displayed within the Grid instead of foreign keys.

<DxGrid Data="Products"
        EditModelSaving="OnEditModelSaving"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn DeleteButtonVisible="false" />
        <DxGridDataColumn FieldName="CategoryId" Caption="Category Name">
            <EditSettings>
                <DxComboBoxSettings
                    Data="Categories"
                    ValueFieldName="CategoryId"
                    TextFieldName="CategoryName"
                    FilteringMode="DataGridFilteringMode.Contains"
                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"/>
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" />
        <DxGridDataColumn FieldName="UnitsInStock" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
    </Columns>
</DxGrid>

@code {
    NorthwindContext Northwind { get; set; }
    List<Product> Products { get; set; }
    List<Category> Categories { get; set; }
    @* ... *@
    async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {  
        var editableProduct = (Product)e.EditModel;
        e.CopyChangesToDataItem();
        await Northwind.SaveChangesAsync();

        Products = await Northwind.Products.ToListAsync();
    }
    @* ... *@
}

View Example: Create a Foreign Key (ComboBox) Column

Create Columns at Runtime

The following example creates columns at runtime. Note: you can combine columns declared in markup and created at runtime.

Razor

@using System.Reflection
@using System.ComponentModel 
@inject EmployeeService EmployeeData

<DxGrid Data="employees">
    <Columns>
        <DxGridCommandColumn />
        @BuildGridColumns(typeof(Employee))
    </Columns>
</DxGrid>

@code {
    IEnumerable<Employee> employees;
    protected override async Task OnInitializedAsync() {
        employees = await EmployeeData.GetData();
    }
    RenderFragment BuildGridColumns(Type itemType) {
    var props = TypeDescriptor.GetProperties(itemType);
    return b => {
      foreach(PropertyDescriptor prop in props) {
        b.OpenComponent(0, typeof(DxGridDataColumn));
        b.AddAttribute(1, "FieldName", prop.Name);
        b.CloseComponent();
      }
    };
  }
}

EmployeeService.cs

public class EmployeeService {
    public Task<Employee[]> GetData() {
        List<Employee> employee = new List<Employee>();
        employee.Add(new Employee() { ID = 00156, FirstName = "Nancy", LastName = "Davolio", BirthDate = new DateTime(1978, 08, 12), HireDate= new DateTime(2002, 10, 01), Email= "[e-mail]", Retired = true });
        employee.Add(new Employee() { ID = 01200, FirstName = "Andrew", LastName = "Fuller", BirthDate = new DateTime(1974, 02, 11), HireDate = new DateTime(2002, 06, 21), Email= "[e-mail]", Retired=true });
        employee.Add(new Employee() { ID = 00567, FirstName = "Janet", LastName = "Leverling", BirthDate = new DateTime(1985, 06, 30), HireDate = new DateTime(2010, 07, 17), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 00168, FirstName = "Margaret", LastName = "Peacock", BirthDate = new DateTime(1990, 12, 25), HireDate = new DateTime(2014, 11, 09), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 01290, FirstName = "Steven", LastName = "Buchanan", BirthDate = new DateTime(1995, 03, 05), HireDate = new DateTime(2020, 01, 13), Email = "[e-mail]" });
        employee.Add(new Employee() { ID = 00938, FirstName = "Michael", LastName = "Suyama", BirthDate = new DateTime(1987, 02, 28), HireDate = new DateTime(2018, 03, 22), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 01098, FirstName = "Robert", LastName = "King", BirthDate = new DateTime(1992, 11, 08), HireDate = new DateTime(2018, 12, 15), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 03027, FirstName = "Laura", LastName = "Callahan", BirthDate = new DateTime(1991, 10, 18), HireDate = new DateTime(2015, 11, 03), Email= "[e-mail]" });
        employee.Add(new Employee() { ID = 00633, FirstName = "Anne", LastName = "Dodsworth", BirthDate = new DateTime(1983, 01, 21), HireDate = new DateTime(2004, 08, 21), Email= "[e-mail]" });
        return Task.FromResult(employee.ToArray());
    }
}

Employee.cs

public class Employee {
    public int ID { get; set; }
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    public DateTime? BirthDate { get; set; }
    public DateTime? HireDate { get; set; }
    public string? Email { get; set; }
    public bool Retired { get; set; } = false;
}

Display Values of Two Fields in One Column

Implement an unbound column to merge data from two data fields.

In the following example, the Grid data source contains FirstName and LastName fields. To display full names in a column, create an unbound column and set its UnboundType property to String. You can calculate column values in two ways:

• Create FirstName and LastName hidden columns and concatenate their values in the UnboundExpression property:

  Razor

  <DxGrid Data="employees" >
      <Columns>
          <DxGridDataColumn FieldName="FirstName" Visible="false" />
          <DxGridDataColumn FieldName="LastName" Visible="false" />
          <DxGridDataColumn FieldName="FullName" UnboundType="GridUnboundColumnType.String" 
                            UnboundExpression="[FirstName]+ ' ' +[LastName]" />
          <DxGridDataColumn FieldName="HireDate" />
          <DxGridDataColumn FieldName="Email" />
      </Columns>
  </DxGrid>
  
  @code {
      Employee[]? employees;
      protected override async Task OnInitializedAsync() {
          employees = await EmployeeData.GetData();
      }
  }
  

  ProductService.cs

  public class EmployeeService {
      public Task<Employee[]> GetData() {
          List<Employee> employee = new List<Employee>();
          employee.Add(new Employee() { ID = 00156, FirstName = "Nancy", LastName = "Davolio", HireDate= new DateTime(2002, 10, 01), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 01200, FirstName = "Andrew", LastName = "Fuller", HireDate = new DateTime(2002, 06, 21), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 00567, FirstName = "Janet", LastName = "Leverling", HireDate = new DateTime(2010, 07, 17), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 00168, FirstName = "Margaret", LastName = "Peacock", HireDate = new DateTime(2014, 11, 09), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 01290, FirstName = "Steven", LastName = "Buchanan", HireDate = new DateTime(2020, 01, 13), Email = "[e-mail]" });
          employee.Add(new Employee() { ID = 00938, FirstName = "Michael", LastName = "Suyama", HireDate = new DateTime(2018, 03, 22), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 01098, FirstName = "Robert", LastName = "King", HireDate = new DateTime(2018, 12, 15), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 03027, FirstName = "Laura", LastName = "Callahan", HireDate = new DateTime(2015, 11, 03), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 00633, FirstName = "Anne", LastName = "Dodsworth", HireDate = new DateTime(2004, 08, 21), Email= "[e-mail]" });
          return Task.FromResult(employee.ToArray());
      }
  }
  

  Employee.cs

  public class Employee {
      public int ID { get; set; }
      public string? FirstName { get; set; }
      public string? LastName { get; set; }
      public DateTime? HireDate { get; set; }
      public string? Email { get; set; }
  }
  

• Handle the UnboundColumnData event and call the GetRowValue(String) method to access values of the FirstName and LastName data fields.

  Razor

  <DxGrid Data="employees" UnboundColumnData="Grid_UnboundColumnData">
      <Columns>
          <DxGridDataColumn FieldName="FullName" UnboundType="GridUnboundColumnType.String" />
          <DxGridDataColumn FieldName="HireDate" />
          <DxGridDataColumn FieldName="Email" />
      </Columns>
  </DxGrid>
  
  @code {
      Employee[]? employees;
      protected override async Task OnInitializedAsync() {
          employees = await EmployeeData.GetData();
      }
      void Grid_UnboundColumnData(GridUnboundColumnDataEventArgs e) {
          if(e.FieldName == "FullName") {
              e.Value = $"{e.GetRowValue("FirstName")} {e.GetRowValue("LastName")}";
          }
      }
  }
  

  ProductService.cs

  public class EmployeeService {
      public Task<Employee[]> GetData() {
          List<Employee> employee = new List<Employee>();
          employee.Add(new Employee() { ID = 00156, FirstName = "Nancy", LastName = "Davolio", HireDate= new DateTime(2002, 10, 01), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 01200, FirstName = "Andrew", LastName = "Fuller", HireDate = new DateTime(2002, 06, 21), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 00567, FirstName = "Janet", LastName = "Leverling", HireDate = new DateTime(2010, 07, 17), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 00168, FirstName = "Margaret", LastName = "Peacock", HireDate = new DateTime(2014, 11, 09), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 01290, FirstName = "Steven", LastName = "Buchanan", HireDate = new DateTime(2020, 01, 13), Email = "[e-mail]" });
          employee.Add(new Employee() { ID = 00938, FirstName = "Michael", LastName = "Suyama", HireDate = new DateTime(2018, 03, 22), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 01098, FirstName = "Robert", LastName = "King", HireDate = new DateTime(2018, 12, 15), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 03027, FirstName = "Laura", LastName = "Callahan", HireDate = new DateTime(2015, 11, 03), Email= "[e-mail]" });
          employee.Add(new Employee() { ID = 00633, FirstName = "Anne", LastName = "Dodsworth", HireDate = new DateTime(2004, 08, 21), Email= "[e-mail]" });
          return Task.FromResult(employee.ToArray());
      }
  }
  

  Employee.cs

  public class Employee {
      public int ID { get; set; }
      public string? FirstName { get; set; }
      public string? LastName { get; set; }
      public DateTime? HireDate { get; set; }
      public string? Email { get; set; }
  }