In this tutorial, you will learn how to use styles to change grid's appearance.

1. Load Layout and Sample Data

• From the Visual Basic« File menu, choose New Project.
• Press Ctrl+T or select Components from Project menu. Check the Stinga BeeGrid Control 1.0 checkbox.
• Place a BeeGrid control on the form.
• Open Windows Notepad and paste grid's layout into it (Copy). Save file as "c:\SampleLayout.bgl".
• Open Windows Notepad and paste grid's data into it (Copy). Save file as "c:\SampleData.xml".
• Insert the following code into the Form_Load event:
  
   Copy Code

  
  Private Sub Form_Load()
     SGGrid1.LoadLayoutFromFile "c:\SampleLayout.xml", sgLayoutXML
     SGGrid1.ImportData "c:\SampleData.xml", sgFormatXML
     
     With SGGrid1.Groups(1)
        .FooterVisible = True
        .FooterFormula = "GroupingValue & ' has ' & ChildCount & ' players'"
        .FooterTextSource = sgGrpFooterFormula
     End With
     SGGrid1.RefreshGroups
  End Sub
  

2. Named Styles

• The following code changes the properties of a few named styles:
  
   Copy Code

  
     With SGGrid1
        .SpecialMode = sgModeListBox
        With .Styles("Caption")
           .Font.Size = 12
           .Font.Bold = True
           .TextAlignment = sgAlignLeftCenter
           .BorderColor = RGB(255, 207, 0)
           .Borders = sgCellBorderAll
           .BorderSize = 3
           .BackColor = vbWhite
           .ForeColor = RGB(0, 0, 128)
        End With
        
        .Caption = "Woman Tennis Rank List"
        
        With .Styles("Heading")
           .BackColor = RGB(206, 48, 0)
           .ForeColor = vbWhite
           .Font.Bold = True
        End With
        
        With .Styles("GroupHeader")
           .BackColor = RGB(255, 207, 0)
           .Font.Bold = True
           .TextAlignment = sgAlignCenterCenter
        End With
        
        With .Styles("GroupFooter")
           .BackColor = RGB(0, 0, 128)
           .Font.Bold = True
           .TextAlignment = sgAlignCenterCenter
           .ForeColor = vbWhite
        End With
        
        With .Styles("InactiveSelection")
           .BackColor = RGB(156, 154, 206)
           .ForeColor = vbBlack
        End With
        
        With .Styles("Selection")
           .BackColor = RGB(0, 128, 0)
           .ForeColor = vbWhite
           .Font.Bold = True
        End With
     End With
  	

3. Cell Tips and Scroll Tips

• Set the CellTips property to sgCellTipsFloat.
• Set the ScrollBarTips property to sgScrollTipsBoth.
• Use the CellTipsDelay property to define the amount of time before the cell tip is displayed. By default, this property is set to 1000 (milliseconds).
• Use the "Tip" style to change the default look of the tool tip window.

  The following code sets the cell and scroll tool tips:

  
   Copy Code

  
     With SGGrid1
        .CellTips = sgCellTipsFloat
        .CellTipsDelay = 500
        .ScrollBarTips = sgScrollTipsBoth
        
        With .Styles("Tip")
           .BackColor = RGB(206, 48, 0)
           .ForeColor = vbWhite
           .Font.Bold = True
           .Font.Size = 10
           .BorderSize = 2
           .BorderColor = RGB(255, 207, 0)
           .Borders = sgCellBorderAll
        End With
     End With
  	

4. Cell Editor Style

• Change the style for the "Trend" and "Country" column editors.

  Insert the following code into the Form_Load event:

  
   Copy Code

  
     With SGGrid1.Columns("Trend").Control
        .ShowButton = sgHideButton
        .PopUpStyle.Appearance = sg3DLight
        .PopUpStyle.TextAlignment = sgAlignLeftCenter
        .PopUpStyle.Font.Bold = True
     End With
     
     With SGGrid1.Columns("Country").Control.PopupStyle
        .BackColor = RGB(206, 48, 0)
        .ForeColor = vbWhite
        .Font.Bold = True
        .Borders = sgCellBorderBottom
        .BorderSize = 1
        .BorderStyle = sgCellBorderDotted
        .BorderColor = RGB(255, 207, 0)
     End With
  	

5. Cell Style Conditions

• Use the Add method of the SGStyle object to create a new style "NextOff".
• Use the Add method of the SGStyleConditions object to add the new style conditions to the collection.

  Insert the following code into the Form_Load event:

  
   Copy Code

  
     With SGGrid1
        With .Styles.Add("NextOff")
           .BaseStyle = "Normal"
           .BorderSize = 1
           .BorderColor = RGB(255, 207, 0)
           .Borders = sgCellBorderBottom
           .BackColor = RGB(255, 255, 240)
        End With
        .Columns("Next Off").StyleConditions.Add "NextOff", _ 
        	   sgConditionCellValue, sgOpGreaterThan, 5000
     End With
  	

6. Fetch Styles

• Set the FetchCellStyle property of the "Rank" column to True. Insert the code into the FetchCellStyle event (see listing).
• Set the FetchFooterStyle property of the SGGroup object to True. Insert the code into the FetchGroupFooterStyle event (see listing).
• Set the FetchHeaderStyle property of the SGGroup object to True. Insert the code into the FetchGroupHeaderStyle event (see listing).

  Insert the following code into the project:

  
   Copy Code

  
  'Form_Load
  With SGGrid1
     .Columns("Rank").FetchCellStyle = True
     .Groups(1).FetchFooterStyle = True
     .Groups(1).FetchHeaderStyle = True
  End With
  
  Private Sub SGGrid1_FetchCellStyle(ByVal RowKey As Long, _
     ByVal ColIndex As Long, ByVal CellValue As Variant, _
     ByVal CellStyle As IsgStyle)
     If CellValue < 31 Then
        CellStyle.ForeColor = vbRed
     End If
  End Sub
  
  Private Sub SGGrid1_FetchGroupFooterStyle( _
     ByVal GroupIndex As Integer, _
     ByVal RowKey As Long, _
     ByVal FooterStyle As IsgStyle)
     
     Select Case SGGrid1.Rows(RowKey).Parent.ChildRows.Count
        Case 1
           FooterStyle.BackColor = RGB(0, 0, 255)
        Case 2
           FooterStyle.BackColor = RGB(0, 0, 240)
        Case 3
           FooterStyle.BackColor = RGB(0, 0, 196)
        Case Else
           FooterStyle.BackColor = RGB(0, 0, 128)
     End Select
  End Sub
  
  Private Sub SGGrid1_FetchGroupHeaderStyle _
     (ByVal GroupIndex As Integer, _
     ByVal RowKey As Long, _
     ByVal HeaderStyle As IsgStyle)
     Dim row As SGRow
     
     For Each row In SGGrid1.Rows(RowKey).GroupHeading.ChildRows
        If row.Type = sgSimpleRow Then
           If row.Cells(1) < 31 Then
              HeaderStyle.ForeColor = RGB(206, 48, 0)
              HeaderStyle.Font.Bold = True
              Exit Sub
           End If
        End If
     Next
  End Sub