Tutorial 22: Borders, Scroll Tracking, and Scroll Tips

In this tutorial, you will learn how to adjust borders, add scroll tracking, and add scroll tips to the grid. Complete the following steps:

Create a new project. Add a C1TrueDBGrid control to the form.
Add the following items to the form and situate them like they appear in the following image.
- Five ComboBoxes (ComboBox1 – 5).
- Two GroupBoxes (GroupBox1 – 2) and set their Text property to "Border Size" and "Scrolling" respectively.
- Four Labels (Label1 – 5) and set their Text properties to "Top Width", "Bottom Width", "Left Width", "Right Width", and "Border Appearance" respectively.
- Button (Button1) and set its Text property to "Border Color".
- Two Checkboxes and set their text properties to "ScrollTips" and "ScrollTracking".
Add a Color Dialog control to the form (ColorDialog1).
In the C1TrueDBGrid Tasks menu, locate the Choose Data Source drop-down and select Add Project Data Source. In the adapter's Data Source Configuration Wizard, either select a connection to C1NWind.mdb or create a new connection to this database. On the Choose your database objects page of the wizard, select all fields in the Customer table and type "DsCustomer" into the DataSet name box, and then finish out the wizard.
Click the grid to give it focus, then in the Properties window set the RowHeight property to 40.

Visual Studio adds the following code to the Form_Load event:

To write code in Visual Basic

Visual Basic	Copy Code
Me.CustomerTableAdapter.Fill(Me.DsCustomer.Customer)

To write code in C#

C#	Copy Code
this.CustomerTableAdapter.Fill(this.DsCustomer.Customer);

In the general section of Form1 add the following declarations:

To write code in Visual Basic

Visual Basic	Copy Code
' Copy the data. Dim dbTable As DataTable Dim borderColor As Color Dim borderLeft As Integer, borderTop As Integer, borderRight As Integer, borderBottom As Integer Dim borderType As C1.Win.C1TrueDBGrid.BorderTypeEnum

To write code in C#

C#	Copy Code
// Copy the data. DataTable dbTable; Color borderColor; int borderLeft, int borderTop, int borderRight, int borderBottom; C1.Win.C1TrueDBGrid.BorderTypeEnum borderType;

Into the Load event of Form1 add the following code:

To write code in Visual Basic

Visual Basic	Copy Code
dbTable = Me.DsCustomer.Tables(0).Copy() ' Fill each combobox. FillComboBox1() FillCombo(ComboBox2) FillCombo(ComboBox3) FillCombo(ComboBox4) FillCombo(ComboBox5) Me.CheckBox2.Checked = True ' Initalize border sizes. Me.borderBottom = 1 Me.borderLeft = 1 Me.borderRight = 1 Me.borderTop = 1

To write code in C#

C#	Copy Code
dbTable = this.DsCustomer.Tables[0].Copy(); // Fill each combobox. FillComboBox1(); FillCombo(comboBox2); FillCombo(comboBox3); FillCombo(comboBox4); FillCombo(comboBox5); this.checkBox2.Checked = true; // Initalize border sizes. this.borderBottom = 1; this.borderLeft = 1; this.borderRight = 1; this.borderTop = 1;

Now add the functions that will fill the ComboBoxes:

To write code in Visual Basic

Visual Basic	Copy Code
' Fill each combo with numbers from 1 to 10. Private Sub FillCombo(ByRef com As ComboBox) Dim i As Integer com.Text = 1 For i = 1 To 10 com.Items.Add(i) Next End Sub ' Fill the first combo with border types. Private Sub FillComboBox1() Me.ComboBox1.Text = "None" With Me.ComboBox1.Items .Add("Fillet") .Add("Flat") .Add("Groove") .Add("Inset") .Add("InsetBevel") .Add("None") .Add("Raised") .Add("RaisedBevel") End With End Sub

To write code in C#

C#	Copy Code
// Fill each combo with numbers from 1 to 10. private void FillCombo(ref ComboBox com) { int i; com.Text = 1; for (i = 1 ; i <= 10; i++) { com.Items.Add[I]; } } // Fill the first combo with border types. private void FillComboBox1() { this.comboBox1.Text = "None"; this.comboBox1.Items.Add("Fillet"); this.comboBox1.Items.Add("Flat"); this.comboBox1.Items.Add("Groove"); this.comboBox1.Items.Add("Inset"); this.comboBox1.Items.Add("InsetBevel"); this.comboBox1.Items.Add("None"); this.comboBox1.Items.Add("Raised"); this.comboBox1.Items.Add("RaisedBevel"); }

Now create a handler for the Click event of Button1 that will set the color of the border using the color dialog box:

To write code in Visual Basic

Visual Basic	Copy Code
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Dim result As DialogResult result = Me.ColorDialog1.ShowDialog() If result = DialogResult.OK Then borderColor = Me.ColorDialog1.Color Button1.BackColor = borderColor End If UpdateBorder() End Sub

To write code in C#

C#	Copy Code
private void button1_Click(System.object sender, System.EventArgs e) button1.Click { DialogResult result; result = this.colorDialog1.ShowDialog(); if (result == DialogResult.OK ) { borderColor = this.colorDialog1.Color; button1.BackColor = borderColor; } UpdateBorder(); }

Now include the function that updates the borders:

To write code in Visual Basic

Visual Basic	Copy Code
Private Sub UpdateBorder() With Me.C1TrueDBGrid1.Splits(0).DisplayColumns(Me.C1TrueDBGrid1.Col).Style.Borders .Color = ColorDialog1.Color .BorderType = borderType .Bottom = borderBottom .Left = borderLeft .Right = borderRight .Top = borderTop End With End Sub

To write code in C#

C#	Copy Code
private void UpdateBorder() { C1.Win.C1TrueDBGrid.GridBorders b; b = this.c1TrueDBGrid1.Splits[0].DisplayColumns(this.c1TrueDBGrid1.Col).Style.Borders; b.Color = colorDialog1.Color; b.BorderType = borderType; b.Bottom = borderBottom; b.Left = borderLeft; b.Right = borderRight; b.Top = borderTop; }

Now include the code that handles changes in the ComboBox values:

To write code in Visual Basic

Visual Basic	Copy Code
Private Sub ComboBox1_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox1.SelectionChangeCommitted Select Case Me.ComboBox1.SelectedItem Case "Fillet" Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Fillet Case "Flat" Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Flat Case "Groove" Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Groove Case "Inset" Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Inset Case "InsetBevel" Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.InsetBevel Case "None" Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.None Case "Raised" Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Raised Case "RaisedBevel" Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.RaisedBevel End Select Me.UpdateBorder() End Sub Private Sub ComboBox2_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox2.SelectionChangeCommitted Me.borderTop = Me.ComboBox2.SelectedItem Me.UpdateBorder() End Sub Private Sub ComboBox3_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox3.SelectionChangeCommitted Me.borderBottom = Me.ComboBox3.SelectedItem Me.UpdateBorder() End Sub Private Sub ComboBox4_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox4.SelectionChangeCommitted Me.borderLeft = Me.ComboBox4.SelectedItem Me.UpdateBorder() End Sub Private Sub ComboBox5_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox5.SelectionChangeCommitted Me.borderRight = Me.ComboBox5.SelectedItem Me.UpdateBorder() End Sub

Visual Basic

Copy Code

Private Sub ComboBox1_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox1.SelectionChangeCommitted
    Select Case Me.ComboBox1.SelectedItem
        Case "Fillet"
            Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Fillet
        Case "Flat"
            Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Flat
        Case "Groove"
            Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Groove
        Case "Inset"
            Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Inset
        Case "InsetBevel"
            Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.InsetBevel
        Case "None"
            Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.None
        Case "Raised"
            Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Raised
        Case "RaisedBevel"
            Me.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.RaisedBevel
    End Select
    Me.UpdateBorder()
End Sub
 
Private Sub ComboBox2_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox2.SelectionChangeCommitted
    Me.borderTop = Me.ComboBox2.SelectedItem
    Me.UpdateBorder()
End Sub
 
Private Sub ComboBox3_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox3.SelectionChangeCommitted
    Me.borderBottom = Me.ComboBox3.SelectedItem
    Me.UpdateBorder()
End Sub
 
Private Sub ComboBox4_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox4.SelectionChangeCommitted
    Me.borderLeft = Me.ComboBox4.SelectedItem
    Me.UpdateBorder()
End Sub
 
Private Sub ComboBox5_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs) Handles ComboBox5.SelectionChangeCommitted
    Me.borderRight = Me.ComboBox5.SelectedItem
    Me.UpdateBorder()
End Sub

To write code in C#

C#	Copy Code
private void ComboBox1_SelectionChangeCommitted(object sender, System.EventArgs e) { switch (this.comboBox1.SelectedItem) { case "Fillet"; this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Fillet; break; case "Flat"; this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Flat; break; case "Groove"; this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Groove; break; case "Inset"; this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Inset; break; case "InsetBevel"; this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.InsetBevel; break; case "None"; this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.None; break; case "Raised"; this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Raised; break; case "RaisedBevel"; this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.RaisedBevel; break; } this.UpdateBorder(); } private void comboBox2_SelectionChangeCommitted(object sender, System.EventArgs e) { this.borderTop = this.comboBox2.SelectedItem; this.UpdateBorder(); } private void comboBox3_SelectionChangeCommitted(object sender, System.EventArgs e) { this.borderBottom = this.comboBox3.SelectedItem; this.UpdateBorder(); } private void comboBox4_SelectionChangeCommitted(object sender, System.EventArgs e) { this.borderLeft = this.comboBox4.SelectedItem; this.UpdateBorder(); } private void comboBox5_SelectionChangeCommitted(object sender, System.EventArgs e) { this.borderRight = this.comboBox5.SelectedItem; this.UpdateBorder(); }

Copy Code

private void ComboBox1_SelectionChangeCommitted(object sender,  System.EventArgs e) {
    switch (this.comboBox1.SelectedItem) 
    { 
        case "Fillet";
            this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Fillet;
            break;
        case "Flat";
            this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Flat;
            break;
        case "Groove";
            this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Groove;
         break;
        case "Inset";
            this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Inset;
         break;
        case "InsetBevel";
            this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.InsetBevel;
            break;
        case "None";
            this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.None;
            break;
        case "Raised";
            this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.Raised;
            break;
         case "RaisedBevel";
             this.borderType = C1.Win.C1TrueDBGrid.BorderTypeEnum.RaisedBevel;
            break;
    }
    this.UpdateBorder();
}
 
private void comboBox2_SelectionChangeCommitted(object sender,  System.EventArgs e) {
    this.borderTop = this.comboBox2.SelectedItem;
   this.UpdateBorder();
}
 
private void comboBox3_SelectionChangeCommitted(object sender,  System.EventArgs e) {
    this.borderBottom = this.comboBox3.SelectedItem;
    this.UpdateBorder();
}
 
private void comboBox4_SelectionChangeCommitted(object sender,  System.EventArgs e) {
    this.borderLeft = this.comboBox4.SelectedItem;
    this.UpdateBorder();
}
 
private void comboBox5_SelectionChangeCommitted(object sender,  System.EventArgs e) {
    this.borderRight = this.comboBox5.SelectedItem;
    this.UpdateBorder();
}

Finally include the code that handles the check boxes and the FetchScrollTips event that sets the ToolTip box that displays when the user is scrolling:

To write code in Visual Basic

Visual Basic	Copy Code
Private Sub CheckBox1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBox1.Click Me.C1TrueDBGrid1.ScrollTips = Me.CheckBox1.Checked End Sub Private Sub CheckBox2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBox2.Click Me.C1TrueDBGrid1.ScrollTrack = Me.CheckBox2.Checked End Sub Private Sub C1TrueDBGrid1_FetchScrollTips(ByVal sender As System.Object, ByVal e As C1.Win.C1TrueDBGrid.FetchScrollTipsEventArgs) Handles C1TrueDBGrid1.FetchScrollTips ' Set the ScrollTip depending on which scroll bar was moved. Select Case e.ScrollBar Case C1.Win.C1TrueDBGrid.ScrollBarEnum.Horizontal e.ScrollTip = Me.C1TrueDBGrid1.Columns(e.ColIndex).Caption Case C1.Win.C1TrueDBGrid.ScrollBarEnum.Vertical e.ScrollTip = "Record: " & CStr(e.Row + 1) & " of " & CStr(Me.dbTable.Rows.Count) & vbCrLf & "Company: " & Me.dbTable.Rows(e.Row).Item("Company") & vbCrLf & "User code: " & Me.dbTable.Rows(e.Row).Item("UserCode") End Select e.TipStyle.ForeColor = Color.Blue End Sub

To write code in C#

C#	Copy Code
private void checkBox1_Click(object sender, System.EventArgs e) { this.c1TrueDBGrid1.ScrollTips = this.checkBox1.Checked; } private void checkBox2_Click(object sender, System.EventArgs e) { this.c1TrueDBGrid1.ScrollTrack = this.checkBox2.Checked; } private void c1TrueDBGrid1_FetchScrollTips(System.object sender, C1.Win.C1TrueDBGrid.FetchScrollTipsEventArgs e) { // Set the ScrollTip depending on which scroll bar was moved. switch (e.ScrollBar) { case C1.Win.C1TrueDBGrid.ScrollBarEnum.Horizontal: e.ScrollTip = this.c1TrueDBGrid1.Columns[e.ColIndex].Caption; break; case C1.Win.C1TrueDBGrid.ScrollBarEnum.Vertical: e.ScrollTip = "Record: " + (e.Row + 1).ToString() + " of " + this.dbTable.Rows.Count.ToString() + "\n" + "Company: " + this.dbTable.Rows[e.Row]["Company"].ToString() + "\n" + "User code: " + this.dbTable.Rows[e.Row]["UserCode"].ToString(); break; } e.TipStyle.ForeColor = Color.Blue; }

Run the program and observe the following:

C1TrueDBGrid1 displays the data specified.
Setting ScrollTrack to True lets you see the data as it is being scrolled.
Setting ScrollTips to True shows a ToolTip box with column information while the user is scrolling.
By manipulating the ComboBoxes and the Color Dialog, create a border around a column's cells and set them to a System color.

You've successfully adjusted borders, added scroll tracking, and added scroll tips to the grid; this concludes the tutorial.