Back to Devexpress

Row Preview Sections

windowsforms-3503-controls-and-libraries-data-grid-row-preview-sections.md

latest7.7 KB
Original Source

Row Preview Sections

  • Nov 17, 2021
  • 4 minutes to read

Preview sections are additional non-editable rows, displayed for every Data Grid’s regular data row. These sections allow you to display large content that does not fit in columns.

Watch Video

Enable Preview Sections

To enable preview sections, set the GridOptionsView.ShowPreview property to true and assign a data field to the GridView.PreviewFieldName property.

Demo: Auto Preview

Text Offset

Utilize the GridView.PreviewIndent property to set the left offset for text in preview sections.

Fixed Preview Height Versus Auto Height

To limit preview sections’ height or allow these sections to dynamically adjust themselves according to content, utilize the GridView.PreviewLineCount and GridOptionsView.AutoCalcPreviewLineCount properties.

Custom Height

Handle the GridView.MeasurePreviewHeight event to set individual heights for specific preview sections. Event arguments provide two properties:

Custom Preview Content

To display custom text content or values from multiple data fields at once, handle the GridView.CalcPreviewText event and set the CalcPreviewTextEventArgs.PreviewText property in the event arguments. You can also handle the GridView.CustomDrawRowPreview event to paint images in preview sections.

Show example

The code below makes preview sections display strings combined from values of three data source fields: “MPG City”, “MPG Highway” and “Description”. The GridView.CustomDrawRowPreview event is handled to draw images from the “Image” data source field.

csharp
//custom preview section text
private void gridView1_CalcPreviewText(object sender, DevExpress.XtraGrid.Views.Grid.CalcPreviewTextEventArgs e) {
    e.PreviewText = CalculateMyPreviewText(e.RowHandle);
}

private string CalculateMyPreviewText(int rowHandle) {
    DataRow row = gridView1.GetDataRow(rowHandle);
    string mpgcity = row["MPG City"].ToString();
    string mpghwy = row["MPG Highway"].ToString();
    string description = row["Description"].ToString();
    if (string.IsNullOrEmpty(description))
        return string.Empty;
    return string.Format("MPG City: {0}, MPG Highway: {1}\n{2}", mpgcity, mpghwy, description);
}

//preview section image
private void gridView1_CustomDrawRowPreview(object sender, DevExpress.XtraGrid.Views.Base.RowObjectCustomDrawEventArgs e) {
    Bitmap image = GetRowImage(e.RowHandle);
    e.Cache.DrawImage(image, e.Bounds.X, e.Bounds.Y, image.Width, image.Height);
    Point textOrigin = new Point(e.Bounds.X + image.Width + 20, e.Bounds.Y + 4);
    Rectangle textRect = new Rectangle(textOrigin.X, textOrigin.Y, e.Bounds.Width - textOrigin.X, e.Bounds.Height - 8);
    string text = CalculateMyPreviewText(e.RowHandle);
    StringFormat format = e.Appearance.GetStringFormat();
    format.Trimming = StringTrimming.EllipsisWord;
    e.Cache.DrawString(text, e.Appearance.Font, e.Appearance.GetForeBrush(e.Cache), textRect, format);
    e.Handled = true;
}

private Bitmap GetRowImage(int rowHandle) {
    DataRow row = gridView1.GetDataRow(rowHandle);
    if (row["Image"] == System.DBNull.Value)
        return null;
    byte[] imageData = (byte[])row["Image"];
    return new Bitmap(new System.IO.MemoryStream(imageData));
}
vb
'custom preview section text
Private Sub gridView1_CalcPreviewText(sender As Object, e As DevExpress.XtraGrid.Views.Grid.CalcPreviewTextEventArgs)
  e.PreviewText = CalculateMyPreviewText(e.RowHandle)
End Sub

Private Function CalculateMyPreviewText(rowHandle As Integer) As String
  Dim row As DataRow = gridView1.GetDataRow(rowHandle)
  Dim mpgcity As String = row("MPG City").ToString()
  Dim mpghwy As String = row("MPG Highway").ToString()
  Dim description As String = row("Description").ToString()
  If String.IsNullOrEmpty(description) Then
      Return String.Empty
  End If
  Return String.Format("MPG City: {0}, MPG Highway: {1}" & vbLf & "{2}", mpgcity, mpghwy, description)
End Function

'preview section image
Private Sub gridView1_CustomDrawRowPreview(sender As Object, e As DevExpress.XtraGrid.Views.Base.RowObjectCustomDrawEventArgs)
  Dim image As Bitmap = GetRowImage(e.RowHandle)
  e.Cache.DrawImage(image, e.Bounds.X, e.Bounds.Y, image.Width, image.Height)
  Dim textOrigin As New Point(e.Bounds.X + image.Width + 20, e.Bounds.Y + 4)
  Dim textRect As New Rectangle(textOrigin.X, textOrigin.Y, e.Bounds.Width - textOrigin.X, e.Bounds.Height - 8)
  Dim text As String = CalculateMyPreviewText(e.RowHandle)
  Dim format As StringFormat = e.Appearance.GetStringFormat()
  format.Trimming = StringTrimming.EllipsisWord
  e.Cache.DrawString(text, e.Appearance.Font, e.Appearance.GetForeBrush(e.Cache), textRect, format)
  e.Handled = True
End Sub

Private Function GetRowImage(rowHandle As Integer) As Bitmap
  Dim row As DataRow = gridView1.GetDataRow(rowHandle)
  If row("Image") = System.DBNull.Value Then
      Return Nothing
  End If
  Dim imageData As Byte() = DirectCast(row("Image"), Byte())
  Return New Bitmap(New System.IO.MemoryStream(imageData))
End Function