Cells

  • 9 minutes to read

Content Alignment

Data Grid cells that display numeric values align their content to the right. Cells that display data of other types arrange their content to the left. To change cell content alignment, handle the ColumnView.RowCellDefaultAlignment event.

Data Grid - Cell content alignment

Demo: Cell content alignment

Selection Modes

End-users can select (focus) only an entire row at once by the default. Set the GridOptionsSelection.MultiSelectMode to the GridMultiSelectMode.CellSelect value to allow selecting individual cells. In this mode, end-users can utilize "Ctrl" and "Shift" keys to select multiple cells at once.

Data Grid - Cell Multiselect

Related API

Demo: Cell Selection

Display Text and Cell Value

A cell value is the value stored in a data source. A cell display text is a value shown to end-users. When the Data Grid sorts or filters data, it processes cell values by default. You can make the control sort and filter data by cell display values instead. To do so, utilize the GridColumn.SortMode and GridColumn.FilterMode properties.

Certain Grid features (e.g., formatting) alter the way actual cell values are shown to end-users. To manually modify a cell display text without changing an underlying value, handle the ColumnView.CustomColumnDisplayText event. In the following example, cells that belong to the "Length" column show nothing, if their actual values are greater than 20.


gridView.CustomColumnDisplayText += (sender, e) => {
        if(e.Column.FieldName == "Length") {
            double val = (double)e.Value;
            if (val > 20)
                e.DisplayText = string.Empty;
        }
    };

Cell Icons

There are multiple ways to supply Data Grid cells with icons.

Conditional formatting

This approach is recommended when you have a static icon set to visualize different values or value ranges. In this scenario, icons are displayed next to cell values.

Data Grid - Conditional Formatting Icons

Documentation: Appearance and Conditional Formatting

Demo: Excel Style Filtering

ImageComboBox in-place editor

This approach allows you to supply cell values with corresponding images or completely replace text entries with these images. The code below illustrates how to replace check boxes for a boolean "Read" column with letter icons.

Data Grid - Image Combo Box Cell Icons


//create a repository item
RepositoryItemImageComboBox riImages = new RepositoryItemImageComboBox();
gridControl1.RepositoryItems.Add(riImages);
    //set the column in-place editor
colRead.ColumnEdit = riImages;
    //remove the built-in editor drop-down button and disable editing
riImages.Buttons.Clear();
colRead.OptionsColumn.AllowEdit = false;
    //specify an image collection that will provide icons for editor items
riImages.SmallImages = imageCollection1;
    //set the GlyphAlignment to 'Center' to display icons only, with no text
riImages.GlyphAlignment = DevExpress.Utils.HorzAlignment.Center;
    //populate the repository with items
riImages.Items.AddRange(new ImageComboBoxItem[] {
    //first argument is the item description, visible to end-users
    //second argument is the item value that must match the data source value
    //third argument is the index of an image from an image collection, assigned to SmallImages
    new ImageComboBoxItem("Read", true, 0),
    new ImageComboBoxItem("Unread", false, 1)
});

Demo: Outlook Style Grouping

TextEdit context icons

The RepositoryItemTextEdit.ContextImageOptions group provides access to properties that allow you to assign a raster or vector icon to a RepositoryItemTextEdit object. By doing so, you can display the same icon for all cells that utilize this repository item. To display another icon for individual cells, create a separate RepositoryItemTextEdit and handle the GridView.CustomRowCellEdit event to assign this repository item. In the example below, the "Ship Country" column cells have no custom editor. A RepositoryItemTextEdit with an icon is assigned only for rows that display orders to Denmark.

Data Grid - Custom Cell Edit


private void GridView1_CustomRowCellEdit1(object sender, CustomRowCellEditEventArgs e) {
    if (e.RowHandle != GridControl.NewItemRowHandle && e.Column.FieldName == "ShipCountry" && e.CellValue.ToString() == "Denmark") {
        e.RepositoryItem = repositoryItemTextEdit2;
    }
}

HTML Formatting

Use the Image tag to embed images into cells. Note that this approach makes a cell non-editable.

gridView1.HtmlImages = imageCollection1;
gridView1.RowHeight = 60;
//create unbound column
GridColumn unbound = new GridColumn();
unbound.UnboundType = DevExpress.Data.UnboundColumnType.String;
unbound.FieldName = "unboundImageColumn";
unbound.Visible = true;
unbound.Caption = "Icon";
gridView1.Columns.Add(unbound);
//assign RepositoryItemHypertextLabel as unbound column editor
RepositoryItemHypertextLabel htLabel = new RepositoryItemHypertextLabel();
htLabel.HtmlImages = imageCollection1;
gridControl1.RepositoryItems.Add(htLabel);
unbound.ColumnEdit = htLabel;
//provide custom cell text
gridView1.CustomUnboundColumnData += GridView1_CustomUnboundColumnData;

private void GridView1_CustomUnboundColumnData(object sender, DevExpress.XtraGrid.Views.Base.CustomColumnDataEventArgs e)
{
    if (e.Column.Caption == "Icon")
    {
        //image from HtmlImages collection
        e.Value = "<image=add_32x32.png>";
        //image from resources
        //e.Value = "<image=#_589812_200>";
    }
}

Unbound columns

If you need a column with images, not associated with specific data source values, create an unbound column with a RepositoryItemPictureEdit object as an in-place editor. Handle the ColumnView.CustomUnboundColumnData event to supply this column with images.

Custom draw

Handling the GridView.CustomDrawCell event allows you to manually re-paint cells, and draw custom images and shapes. In this example, the "Ship Country" column cells have no custom editor. An editor icon is manually painted for rows that display orders to Denmark.

Data Grid - Custom Cell Edit


private void GridView1_CustomDrawCell(object sender, RowCellCustomDrawEventArgs e) {
    if (e.RowHandle != GridControl.NewItemRowHandle && e.Column.FieldName == "ShipCountry" && e.CellValue.ToString() == "Denmark") {
        e.DefaultDraw();
        //TODO: specify required offsets
        e.Cache.DrawImage(img, e.Bounds.X + offsetX, e.Bounds.Y + offsetY);
    }
}

Cell Merging

In GridView and BandedGridView Views, cells with the same values can automatically merge. Note that merging relies on cell values, not cell display text.

Data Grid - Cell Merging

Merged cells impose the following limitations:

Related API

Show example

In this example, the Data Grid contains the "Created By" column that displays e-mail addresses. The ColumnView.CustomColumnDisplayText event is handled to trim these addresses to domain names. Since this event changes only cell display text, cell values remain intact and no merging occurs. To fix that, the GridView.CellMerge event is handled.

Data Grid - Custom Merge


//trimming e-mail addresses
private void gridView1_CustomColumnDisplayText(object sender, DevExpress.XtraGrid.Views.Base.CustomColumnDisplayTextEventArgs e) {
    if (e.Column == colCreatorID) {
        string email = e.DisplayText;
        string domain = email.Substring(email.IndexOf('@') + 1);
        e.DisplayText = domain;
    }
}

//custom cell merging
private void gridView1_CellMerge(object sender, DevExpress.XtraGrid.Views.Grid.CellMergeEventArgs e) {
    GridView view = sender as GridView;
    if(view == null) return;
    if (e.Column == colCreatorID) {
        string text1 = view.GetRowCellDisplayText(e.RowHandle1, colCreatorID);
        string text2 = view.GetRowCellDisplayText(e.RowHandle2, colCreatorID);
        e.Merge = (text1 == text2);
        e.Handled = true;
    }
}

Demo: Cell Merging

Access Grid Cells in Code

See Also