ComponentOne True DBGrid for .NET (2.0) Search HelpCentral 

Tutorial 22 – Borders, Scroll Tracking, and Scroll Tips

In this tutorial, you will learn how to use the grid’s Filter Bar functionality to allow the end user to sort column data dynamically at run time.

1.   Create a new project. Add a C1TrueDBGrid control to the form.

2.   Add the following items to the form and situate them like they appear in the following image.

·      Five ComboBoxes (ComboBox1 – 5).

·      Two frames 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”.

3.   Add a Color Dialog to the form (ColorDialog1).

4.   In the TrueDBGrid 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 TDBGDemo.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.

5.   Click on the grid to give it focus, then in the Properties window set the RowHeight property to 40.

6.   Visual Studio adds the following code to the Form_Load event:

·      Visual Basic

Me.CustomerTableAdapter.Fill(Me.DsCustomer.Customer)

·      C#

this.CustomerTableAdapter.Fill(this.DsCustomer.Customer);

·      Delphi

Self.CustomerTableAdapter.Fill(Self.DsCustomer.Customer);

7.   In the general section of Form1 add the following declarations:

·      Visual Basic

' 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

·      C#

// Copy the data.

DataTable dbTable;

 

Color borderColor;

int borderLeft, int borderTop, int borderRight, int borderBottom;

C1.Win.C1TrueDBGrid.BorderTypeEnum borderType;

·      Delphi

FBorderColor: System.Drawing.Color;

BorderLeft, BorderTop, BorderRight, BorderBottom: Integer;

FBorderType: C1.Win.C1TrueDBGrid.BorderTypeEnum;

8.   Into the Load event of Form1 add the following code:

·      Visual Basic

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

·      C#

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;

·      Delphi

begin

  FillComboBorderAppearance;

  FillComboBorderSize(Self.comboBox1);

  FillComboBorderSize(Self.comboBox2);

  FillComboBorderSize(Self.comboBox3);

  FillComboBorderSize(Self.comboBox4);

  CheckBox2.Checked := True;

  BorderBottom := 1;

  BorderLeft := 1;

  BorderRight := 1;

  BorderTop := 1;

end;

9.   Now add the functions that will fill the ComboBoxes:

·      Visual Basic

' 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

·      C#

// 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");

}

·      Delphi

procedure TWinForm.FillComboBorderAppearance;

begin

  Self.comboBox5.Items.Add('Fillet');

  Self.comboBox5.Items.Add('Flat');

  Self.comboBox5.Items.Add('Groove');

  Self.comboBox5.Items.Add('Inset');

  Self.comboBox5.Items.Add('InsetBevel');

  Self.comboBox5.Items.Add('None');

  Self.comboBox5.Items.Add('Raised');

  Self.comboBox5.Items.Add('RaisedBevel');

end;

 

procedure TWinForm.FillComboBorderSize(combo: ComboBox);

var

  i: Integer;

begin

  combo.Text := '1';

  i := 1;

  while (i <> 11) do

  begin

    combo.Items.Add(i.ToString);

    i := i + 1;

  end;

end;

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

·      Visual Basic

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

·      C#

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();

}

·      Delphi

procedure TWinForm.Button1_Click(sender: System.Object; e: System.EventArgs);

var

  result: System.Windows.Forms.DialogResult;

begin

  result := ColorDialog1.ShowDialog;

  if (result = System.Windows.Forms.DialogResult.OK) then

  begin

    FBorderColor := ColorDialog1.Color;

    Button1.BackColor := FBorderColor;

  end;

  UpdateBorder;

end;

11.  Now include the function that updates the borders:

·      Visual Basic

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

·      C#

private void UpdateBorder()

{

    C1.Win.C1TrueDBGrid.GridBorders b;

    b = his.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;

}

·      Delphi

procedure TWinForm.UpdateBorder;

var

  Column: C1.Win.C1TrueDBGrid.C1DisplayColumn;

begin

  Column := C1TrueDBGrid1.Splits[0].DisplayColumns[Self.c1TrueDBGrid1.Col];

  Column.Style.Borders.Color := ColorDialog1.Color;

  Column.Style.Borders.BorderType := FBorderType;

  Column.Style.Borders.Bottom := BorderBottom;

  Column.Style.Borders.Left := BorderLeft;

  Column.Style.Borders.Top := BorderTop;

  Column.Style.Borders.Right := BorderRight;

end;

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

·      Visual Basic

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

·      C#

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();

}

·      Delphi

procedure TWinForm.ComboBox5_SelectedIndexChanged(sender: System.Object; e: System.EventArgs);

begin

  case ComboBox5.SelectedIndex of

    0: FBorderType := C1.Win.C1TrueDBGrid.BorderTypeEnum.Fillet;

    1: FBorderType := C1.Win.C1TrueDBGrid.BorderTypeEnum.Flat;

    2: FBorderType := C1.Win.C1TrueDBGrid.BorderTypeEnum.Groove;

    3: FBorderType := C1.Win.C1TrueDBGrid.BorderTypeEnum.Inset;

    4: FBorderType := C1.Win.C1TrueDBGrid.BorderTypeEnum.InsetBevel;

    5: FBorderType := C1.Win.C1TrueDBGrid.BorderTypeEnum.None;

    6: FBorderType := C1.Win.C1TrueDBGrid.BorderTypeEnum.Raised;

    7: FBorderType := C1.Win.C1TrueDBGrid.BorderTypeEnum.RaisedBevel;

  end;

  UpdateBorder;

end;

 

procedure TWinForm.ComboBox4_SelectedIndexChanged(sender: System.Object; e: System.EventArgs);

begin

  BorderRight := System.Int32.Parse(ComboBox4.SelectedItem.ToString);

  UpdateBorder;

end;

 

procedure TWinForm.ComboBox3_SelectedIndexChanged(sender: System.Object; e: System.EventArgs);

begin

  BorderLeft := System.Int32.Parse(ComboBox3.SelectedItem.ToString);

  UpdateBorder;

end;

 

procedure TWinForm.ComboBox2_SelectedIndexChanged(sender: System.Object; e: System.EventArgs);

begin

  BorderBottom := System.Int32.Parse(ComboBox2.SelectedItem.ToString);

  UpdateBorder;

end;

 

procedure TWinForm.ComboBox1_SelectedIndexChanged(sender: System.Object; e: System.EventArgs);

begin

  BorderTop := System.Int32.Parse(ComboBox1.SelectedItem.ToString);

  UpdateBorder;

end;

13.  Finally include the code that handles the checkboxes and the FetchScrollTips event that sets the Tooltip box that displays when the user is scrolling:

·      Visual Basic

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

·      C#

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;

}

·      Delphi

procedure TWinForm.C1TrueDBGrid1_FetchScrollTips(sender: System.Object; e: C1.Win.C1TrueDBGrid.FetchScrollTipsEventArgs);

var Row: Integer;

begin

  case e.ScrollBar of

    C1.Win.C1TrueDBGrid.ScrollBarEnum.Horizontal: 

      e.ScrollTip := c1TrueDBGrid1.Columns[e.ColIndex].Caption;

    C1.Win.C1TrueDBGrid.ScrollBarEnum.Vertical:

      begin

        Row := e.Row + 1;

        e.ScrollTip := 'Record: ' + Row.ToString + ' of ' + dbTable.Rows.Count.ToString + #10#13 + 'Company: ' + dbTable.Rows[e.Row]['Company'].ToString + #10#13 + 'User code: ' + dbTable.Rows[e.Row]['UserCode'].ToString;

      end;

  end;

  e.TipStyle.ForeColor := Color.Blue;

end;

 

procedure TWinForm.CheckBox2_CheckedChanged(sender: System.Object; e: System.EventArgs);

begin

  C1TrueDBGrid1.ScrollTrack := CheckBox2.Checked;

end;

 

procedure TWinForm.CheckBox1_CheckedChanged(sender: System.Object; e: System.EventArgs);

begin

  C1TrueDBGrid1.ScrollTips := CheckBox1.Checked;

end;

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.

This concludes the tutorial.


Send comments about this topic to ComponentOne.
Copyright © ComponentOne LLC. All rights reserved.