How to format the GroupDropArea of a WinForms GridGroupingControl?

3 mins read

GroupDropArea

The Grouping Area of the GridGroupingControl is a panel capable of holding multiple Grid controls stacked vertically with a definite number of rows and columns in a manner of one Grid control row per table bound to the GridGroupingControl. Its visibility can be toggled. By default, only one Grid control row is visible in the group drop area for the parent table (main table) field’s accommodation. Each of its column can be formatted by using the PrepareViewStyleInfo event. There is also a Splitter beneath the Grouping Area separating it from the record view.

Formatting of the Splitter and GroupDropPanel

//Changes the Color of the Splitter and GroupDropPanel.
this.gridGroupingControl1.Splitter.BackColor = Color.Red;
this.gridGroupingControl1.GroupDropPanel.BackColor = Color.YellowGreen;
this.gridGroupingControl1.ShowGroupDropArea = true;

'Changes the Color of the Splitter and GroupDropPanel.
Me.gridGroupingControl1.Splitter.BackColor = Color.Red
Me.gridGroupingControl1.GroupDropPanel.BackColor = Color.YellowGreen
Me.gridGroupingControl1.ShowGroupDropArea = True

GroupDropArea for the ChildTable

The GroupDropArea for each of the Grids can be taken by looping through the controls in the panel, by this you can get the PrepareViewStyleInfo for all the child tables on the FormLoad().

foreach (Control ctl in this.gridGroupingControl1.GroupDropPanel.Controls)
{
   GridGroupDropArea groupDropArea = ctl as GridGroupDropArea;
   switch (groupDropArea.Model.Table.TableDescriptor.Name)
   {
       case "Table":
               groupDropArea.Model.ColCount = 80;
               groupDropArea.Model.Properties.BackgroundColor = Color.SkyBlue;
               groupDropArea.PrepareViewStyleInfo += new GridPrepareViewStyleInfoEventHandler(ParentTable_PrepareViewStyleInfo);
               break;
       case "ChildTable":
               groupDropArea.Model.ColCount = 80;
               groupDropArea.Model.Properties.BackgroundColor = Color.DeepSkyBlue;
               groupDropArea.PrepareViewStyleInfo += new GridPrepareViewStyleInfoEventHandler(ChildTable_PrepareViewStyleInfo);
               break;
       case "GrandChildTable":
               groupDropArea.Model.ColCount = 80;
               groupDropArea.Model.Properties.BackgroundColor = Color.DodgerBlue;
               groupDropArea.PrepareViewStyleInfo += new GridPrepareViewStyleInfoEventHandler(GrandChildTable_PrepareViewStyleInfo);
               break;
    }
}

For Each ctl As Control In Me.gridGroupingControl1.GroupDropPanel.Controls
   Dim groupDropArea As GridGroupDropArea = TryCast(ctl, GridGroupDropArea)
   Select Case groupDropArea.Model.Table.TableDescriptor.Name
       Case "Table"
     groupDropArea.Model.ColCount = 80
     groupDropArea.Model.Properties.BackgroundColor = Color.SkyBlue
     AddHandler groupDropArea.PrepareViewStyleInfo, AddressOf ParentTable_PrepareViewStyleInfo
       Case "ChildTable"
     groupDropArea.Model.ColCount = 80
     groupDropArea.Model.Properties.BackgroundColor = Color.DeepSkyBlue
     AddHandler groupDropArea.PrepareViewStyleInfo, AddressOf ChildTable_PrepareViewStyleInfo
       Case "GrandChildTable"
     groupDropArea.Model.ColCount = 80
     groupDropArea.Model.Properties.BackgroundColor = Color.DodgerBlue
     AddHandler groupDropArea.PrepareViewStyleInfo, AddressOf GrandChildTable_PrepareViewStyleInfo
   End Select
Next ctl

PrepareViewStyleInfo

The following code example is for styling the child table GroupDropArea on the PrepareViewStyleInfo event.

private void ParentTable_PrepareViewStyleInfo(object sender, GridPrepareViewStyleInfoEventArgs e)
{
   e.Style.BackColor = Color.SkyBlue;
   if(e.Style.Text.StartsWith("Par")) // Sets the color to the dropped columns
   {
      e.Style.BackColor = Color.Silver;
      e.Style.CellType = "Static";
      e.Style.Themed = false;
   }
}
private void ChildTable_PrepareViewStyleInfo(object sender, GridPrepareViewStyleInfoEventArgs e)
{
   e.Style.BackColor = Color.DeepSkyBlue;
   if(e.Style.Text.StartsWith("Nam")) // Sets the color to the dropped columns
   {
      e.Style.BackColor = Color.Silver;
      e.Style.CellType = "Static";
      e.Style.Themed = false;
   }
}
private void GrandChildTable_PrepareViewStyleInfo(object sender, GridPrepareViewStyleInfoEventArgs e)
{
   e.Style.BackColor = Color.DodgerBlue;
   if(e.Style.Text.StartsWith("Nam")) // Sets the color to the dropped columns
   {
      e.Style.BackColor = Color.Silver;
      e.Style.CellType = "Static";
      e.Style.Themed = false;
   }
}

Private Sub ParentTable_PrepareViewStyleInfo(ByVal sender As Object, ByVal e As GridPrepareViewStyleInfoEventArgs)
   e.Style.BackColor = Color.SkyBlue
   If e.Style.Text.StartsWith("Par") Then ' Sets the color to the dropped columns
      e.Style.BackColor = Color.Silver
      e.Style.CellType = "Static"
      e.Style.Themed = False
   End If
End Sub
Private Sub ChildTable_PrepareViewStyleInfo(ByVal sender As Object, ByVal e As GridPrepareViewStyleInfoEventArgs)
   e.Style.BackColor = Color.DeepSkyBlue
   If e.Style.Text.StartsWith("Nam") Then ' Sets the color to the dropped columns
      e.Style.BackColor = Color.Silver
      e.Style.CellType = "Static"
      e.Style.Themed = False
   End If
End Sub
Private Sub GrandChildTable_PrepareViewStyleInfo(ByVal sender As Object, ByVal e As GridPrepareViewStyleInfoEventArgs)
   e.Style.BackColor = Color.DodgerBlue
   If e.Style.Text.StartsWith("Nam") Then ' Sets the color to the dropped columns
      e.Style.BackColor = Color.Silver
      e.Style.CellType = "Static"
      e.Style.Themed = False
   End If
End Sub

The following code example is for the GridGroupingControl.GridGroupDropArea PrepareViewStyleInfoEvent.

//Event Triggering
this.gridGroupingControl1.GridGroupDropArea.PrepareViewStyleInfo += GridGroupDropArea_PrepareViewStyleInfo;
private void GridGroupDropArea_PrepareViewStyleInfo(object sender, Syncfusion.Windows.Forms.Grid.GridPrepareViewStyleInfoEventArgs e)
{
   if(e.ColIndex == 2 && e.RowIndex == 2) // Sets the font, color, alignment and text to the dropped column
   {
      e.Style.Text = "Table";
      e.Style.Font.Bold = true;
      e.Style.BackColor = Color.Cornsilk;
      e.Style.TextColor = Color.Blue;
      e.Style.HorizontalAlignment = GridHorizontalAlignment.Left;
      // e.Style.CellType = "Static";
      e.Style.Enabled = false;
   }
   else if (e.Style.Text.StartsWith("Drag a")) // Sets the color to the DropArea
   {
      e.Style.Text = "Drag and Drop Parent Table Column headers";
      e.Style.BackColor = Color.Transparent;
   }
   else if (e.Style.Text.StartsWith("Par")) // Sets the color to the dropped columns
   {
      e.Style.BackColor = Color.Tomato;
      e.Style.CellType = "Static";
      e.Style.Themed = false;
   }
   else
      e.Style.BackColor = Color.YellowGreen; // Sets the color to the remaining part.
}

'Event Triggering
Private Me.gridGroupingControl1.GridGroupDropArea.PrepareViewStyleInfo += AddressOf GridGroupDropArea_PrepareViewStyleInfo
Private Sub GridGroupDropArea_PrepareViewStyleInfo(ByVal sender As Object, ByVal e As Syncfusion.Windows.Forms.Grid.GridPrepareViewStyleInfoEventArgs)
   If e.ColIndex = 2 AndAlso e.RowIndex = 2 Then ' Sets the font, color, alignment and text to the dropped column
      e.Style.Text = "Table"
      e.Style.Font.Bold = True
      e.Style.BackColor = Color.Cornsilk
      e.Style.TextColor = Color.Blue
      e.Style.HorizontalAlignment = GridHorizontalAlignment.Left
      ' e.Style.CellType = "Static";
      e.Style.Enabled = False
   ElseIf e.Style.Text.StartsWith("Drag a") Then ' Sets the color to the DropArea
      e.Style.Text = "Drag and Drop Parent Table Column headers"
      e.Style.BackColor = Color.Transparent
   ElseIf e.Style.Text.StartsWith("Par") Then ' Sets the color to the dropped columns
      e.Style.BackColor = Color.Tomato
      e.Style.CellType = "Static"
      e.Style.Themed = False
   Else
      e.Style.BackColor = Color.YellowGreen ' Sets the color to the remaining part.
   End If
End Sub

Screenshot

Show format the GroupDropArea in GridGroupingControl