Preview Rows in Windows Forms GridGrouping control

21 Jan 20257 minutes to read

Preview rows are the one which are used to show the additional description for the groups or records. GridGroupingControl provides following types of preview rows,

Record preview row

The record preview row is used to display additional information about the particular record.

Adding record preview row

The record preview row can be enabled in the GridGroupingControl by setting the ShowRecordPreviewRow property to true.

//Enable record preview row 
this.gridGroupingControl1.TableOptions.ShowRecordPreviewRow = true;

//Changing the appearance of the record preview cells
this.gridGroupingControl1.Appearance.RecordPreviewCell.BackColor = Color.Orange;
this.gridGroupingControl1.Appearance.RecordPreviewCell.TextColor = Color.White;
'Enable record preview row 
Me.gridGroupingControl1.TableOptions.ShowRecordPreviewRow = True

'Changing the appearance of the record preview cells
Me.gridGroupingControl1.Appearance.RecordPreviewCell.BackColor = Color.Orange
Me.gridGroupingControl1.Appearance.RecordPreviewCell.TextColor = Color.White

PreviewRows_img1

Customizing the text for record preview row

The record preview row text can be customized by using the QueryCellStyleInfo event. In this event, set the cell value of the RecordPreviewCell that need to be displayed in the record preview section.

this.gridGroupingControl1.QueryCellStyleInfo += new GridTableCellStyleInfoEventHandler(gridGroupingControl1_QueryCellStyleInfo);

void gridGroupingControl1_QueryCellStyleInfo(object sender, GridTableCellStyleInfoEventArgs e)
{

   if(e.TableCellIdentity.TableCellType == GridTableCellType.RecordPreviewCell)
   {
       Element el = e.TableCellIdentity.DisplayElement;
       e.Style.CellValue = "Preview notes for Record (" 
           + el.ParentTableDescriptor.Fields[0].Name + ": " 
           + el.ParentRecord.GetValue(el.ParentTableDescriptor.Fields[0].Name) + ")";
   }
}
AddHandler gridGroupingControl1.QueryCellStyleInfo, AddressOf gridGroupingControl1_QueryCellStyleInfo

Private Sub gridGroupingControl1_QueryCellStyleInfo(ByVal sender As Object, ByVal e As GridTableCellStyleInfoEventArgs)

   If e.TableCellIdentity.TableCellType = GridTableCellType.RecordPreviewCell Then
	   Dim el As Element = e.TableCellIdentity.DisplayElement
	   e.Style.CellValue = "Preview notes for Record (" & el.ParentTableDescriptor.Fields(0).Name & ": " & el.ParentRecord.GetValue(el.ParentTableDescriptor.Fields(0).Name) & ")"
   End If
End Sub

PreviewRows_img2

Changing the height of the record preview row

The height of the record preview row can be changed by using the RecordPreviewRowHeight property.

//Set the height for record preview section
this.gridGroupingControl1.TableOptions.RecordPreviewRowHeight = 20;

//Changing the appearance of the record preview cells
this.gridGroupingControl1.Appearance.RecordPreviewCell.BackColor = Color.Orange;
this.gridGroupingControl1.Appearance.RecordPreviewCell.TextColor = Color.White;
'Set the height for record preview section
Me.gridGroupingControl1.TableOptions.RecordPreviewRowHeight = 20

'Changing the appearance of the record preview cells
Me.gridGroupingControl1.Appearance.RecordPreviewCell.BackColor = Color.Orange
Me.gridGroupingControl1.Appearance.RecordPreviewCell.TextColor = Color.White

PreviewRows_img3

The following sample shows the customization of the record preview row appearance,
<InstalledLocation>\Windows\Grid.Grouping.Windows\Samples\Layout Customization\Record Customization Demo

Group preview row

The groups can show the additional information in the group preview section.

Adding group preview rows

Group preview section is the suitable place to display memo fields or add custom notes for a given group. It can be enabled by setting GroupOptions.ShowGroupPreview property to true.

//Enable preview row for Groups
this.gridGroupingControl1.ChildGroupOptions.ShowGroupPreview = true;

//Changing the appearance of the group preview cells
this.gridGroupingControl1.Appearance.GroupPreviewCell.BackColor = Color.Orange;
this.gridGroupingControl1.Appearance.GroupPreviewCell.TextColor = Color.White;
'Enable preview row for Groups
Me.gridGroupingControl1.ChildGroupOptions.ShowGroupPreview = True

'Changing the appearance of the group preview cells
Me.gridGroupingControl1.Appearance.GroupPreviewCell.BackColor = Color.Orange
Me.gridGroupingControl1.Appearance.GroupPreviewCell.TextColor = Color.White

PreviewRows_img4

Customizing the text for group preview row

The default text displayed in the group preview row can be customized by using the QueryCellStyleInfo event.

this.gridGroupingControl1.QueryCellStyleInfo += new GridTableCellStyleInfoEventHandler(gridGroupingControl1_QueryCellStyleInfo);

void gridGroupingControl1_QueryCellStyleInfo(object sender, GridTableCellStyleInfoEventArgs e)
{

    if (e.TableCellIdentity.TableCellType == GridTableCellType.GroupPreviewCell)
    {
        Element el = e.TableCellIdentity.DisplayElement;
        e.Style.CellValue = "Preview notes for Group (" + el.ParentGroup.Name + ": " + el.ParentGroup.Category.ToString() + ")";
    }
}
AddHandler gridGroupingControl1.QueryCellStyleInfo, AddressOf gridGroupingControl1_QueryCellStyleInfo

Private Sub gridGroupingControl1_QueryCellStyleInfo(ByVal sender As Object, ByVal e As GridTableCellStyleInfoEventArgs)

	If e.TableCellIdentity.TableCellType = GridTableCellType.GroupPreviewCell Then
		Dim el As Element = e.TableCellIdentity.DisplayElement
		e.Style.CellValue = "Preview notes for Group (" & el.ParentGroup.Name & ": " & el.ParentGroup.Category.ToString() & ")"
	End If
End Sub

PreviewRows_img5

Changing the height of the group preview

The size of the preview rows can be changed by using the TableOptions.GroupPreviewSectionHeight property.

//Set the height for Group preview section
this.gridGroupingControl1.TableOptions.GroupPreviewSectionHeight = 25;

//Changing the appearance of the group preview cells
this.gridGroupingControl1.Appearance.GroupPreviewCell.BackColor = Color.Orange;
this.gridGroupingControl1.Appearance.GroupPreviewCell.TextColor = Color.White;
'Set the height for Group preview section
Me.gridGroupingControl1.TableOptions.GroupPreviewSectionHeight = 25

'Changing the appearance of the group preview cells
Me.gridGroupingControl1.Appearance.GroupPreviewCell.BackColor = Color.Orange
Me.gridGroupingControl1.Appearance.GroupPreviewCell.TextColor = Color.White

PreviewRows_img6

Group header/footer

The group header/group footer sections can be added to the top and bottom of the groups. This can be used to show the additional information about the groups like the group preview rows.
PreviewRows_img7

To know more about group header/footer section, refer the following link,
https://help.syncfusion.com/windowsforms/gridgrouping/grouping#group-headersfooters