Click here to Skip to main content
Click here to Skip to main content
Search within:



 
Comments & Discussions (2)

WinForms Grid with Merged Cells

By , 15 Jan 2012
 

In this post, we will show you how to use the cells merge functionality of VIBlend DataGridView for WinForms.

The first step is to add the DataGridView to your Form. You can do this by drag and drop from the Visual Studio toolbox or you can create it in the code behind.

C#

private vDataGridView grid = new vDataGridView();

public Form1()
{
    InitializeComponent();

    grid.Dock = DockStyle.Fill;
    grid.VIBlendTheme = VIBLEND_THEME.NERO;
    this.Controls.Add(grid);
    this.LoadData();
    this.MergeCells();
    this.SetCellsValues();
}

VB .NET

Private grid As New vDataGridView()

Public Sub New()
    InitializeComponent()
    grid.Dock = DockStyle.Fill
    grid.VIBlendTheme = VIBLEND_THEME.NERO
    Me.Controls.Add(grid)
    Me.LoadData()
    Me.MergeCells()
    Me.SetCellsValues()
End Sub

Now, we need to implement the LoadData, MergeCells and SetCellValues methods. The LoadData method will add rows and columns to the DataGridView.

C#

private void LoadData()
{
    // add columns.
    for (int i = 1; i <= 8; i++)
    {
        grid.ColumnsHierarchy.Items.Add("Column " + i);
    }

    // add rows.

    for (int i = 1; i <= 25; i++)
    {
        grid.RowsHierarchy.Items.Add("Row " + i);
    }

    grid.RowsHierarchy.AutoResize();
    grid.ColumnsHierarchy.AutoResize();
    grid.Refresh();
}

VB .NET

Private Sub LoadData()
    ' add columns.

    For i As Integer = 1 To 8
        grid.ColumnsHierarchy.Items.Add("Column " & i)
    Next i

    ' add rows.
    For i As Integer = 1 To 25
        grid.RowsHierarchy.Items.Add("Row " & i)
    Next i

    grid.RowsHierarchy.AutoResize()
    grid.ColumnsHierarchy.AutoResize()
    grid.Refresh()
End Sub

To add rows and columns, we use the Add method of the DataGridView's Rows and Columns hierarchies.

The SetCellValues method will simply insert values in the Grid cells. This will be achieved by using the SetCellValue method which accepts three parameters - row, column and cell value.

C#

private void SetCellsValues()
{
    HierarchyItem rowItem1 = grid.RowsHierarchy.Items[0];
    HierarchyItem columnItem1 = grid.ColumnsHierarchy.Items[0]
    grid.CellsArea.SetCellValue(rowItem1, columnItem1, _
        "Monthly Housing and Transportation Expenses");
    grid.CellsArea.SetCellValue(grid.RowsHierarchy.Items[1], _
        columnItem1, "Primary residence");
    grid.CellsArea.SetCellValue(grid.RowsHierarchy.Items[1], _
        this.grid.ColumnsHierarchy.Items[3], "Transportation Expenses");

    // fill data
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[2], _
                columnItem1, "Mortgage Payment");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[3], _
                columnItem1, "Property Tax");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[4], _
                columnItem1, "Insurance");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[5], _
                columnItem1, "Electricity");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[6], _
                columnItem1, "Water");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[7], _
                columnItem1, "Cabel TV Service");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[8], _
                columnItem1, "High Speed Internet");

    // fill second column data.
    HierarchyItem columnItem2 = this.grid.ColumnsHierarchy.Items[1];
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[2], _
                columnItem2, "$1,459,76");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[3], _
                columnItem2, "$212.54");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[4], _
                columnItem2, "$49.21");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[5], _
                columnItem2, "$73.44");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[6], _
                columnItem2, "$41.48");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[7], _
                columnItem2, "$22.14");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[8], _
                columnItem2, "$24.99");

    // fill third column data.
    HierarchyItem columnItem3 = this.grid.ColumnsHierarchy.Items[3];
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[2], 
                columnItem3, "Vehicle 1 Payment");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[3], 
                columnItem3, "Vehicle 1 Insurance");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[4], 
                columnItem3, "Vehicle 1 Gas");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[5], 
                columnItem3, "Vehicle 1 Maintenance");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[6], 
                columnItem3, "Vehicle 2 Lease");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[7], 
                columnItem3, "Vehicle 2 Insurance");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[8], 
                columnItem3, "Vehicle 2 Gas");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[9], 
                columnItem3, "Vehicle 2 Maintenance");

    // fill fourth column data.

    HierarchyItem columnItem4 = this.grid.ColumnsHierarchy.Items[4];
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[2], columnItem4, "$351,34");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[3], columnItem4, "$55.12");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[4], columnItem4, "$129.21");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[5], columnItem4, "$55.17");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[6], columnItem4, "$311.12");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[7], columnItem4, "$109.35");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[8], columnItem4, "$114.99");
    grid.CellsArea.SetCellValue(this.grid.RowsHierarchy.Items[9], columnItem4, "$35.19");
}

VB .NET

Private Sub SetCellsValues()
    Dim rowItem1 As HierarchyItem = grid.RowsHierarchy.Items(0)
    Dim columnItem1 As HierarchyItem = grid.ColumnsHierarchy.Items(0)
    grid.CellsArea.SetCellValue(rowItem1, columnItem1, 
        "Monthly Housing and Transportation Expenses")

    grid.CellsArea.SetCellValue(grid.RowsHierarchy.Items(1), _
            columnItem1, "Primary residence")

    grid.CellsArea.SetCellValue(grid.RowsHierarchy.Items(1), _
        Me.grid.ColumnsHierarchy.Items(3), "Transportation Expenses")

    ' fill data
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(2), _ 
                columnItem1, "Mortgage Payment")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(3), _
                columnItem1, "Property Tax")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(4), columnItem1, "Insurance")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(5), _
                columnItem1, "Electricity")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(6), columnItem1, "Water")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(7), columnItem1, 
                "Cabel TV Service")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(8), _
                columnItem1, "High Speed Internet")

    ' fill second column data.

    Dim columnItem2 As HierarchyItem = Me.grid.ColumnsHierarchy.Items(1)

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(2), _
                    columnItem2, "$1,459,76")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(3), _
                    columnItem2, "$212.54")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(4), columnItem2, "$49.21")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(5), columnItem2, "$73.44")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(6), columnItem2, "$41.48")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(7), columnItem2, "$22.14")

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(8), columnItem2, "$24.99")

    ' fill third column data.
    Dim columnItem3 As HierarchyItem = Me.grid.ColumnsHierarchy.Items(3)
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(2), _
                columnItem3, "Vehicle 1 Payment")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(3), _
                columnItem3, "Vehicle 1 Insurance")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(4), _
                columnItem3, "Vehicle 1 Gas")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(5), _
                columnItem3, "Vehicle 1 Maintenance")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(6), _
                columnItem3, "Vehicle 2 Lease")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(7), _
                columnItem3, "Vehicle 2 Insurance")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(8), _
                columnItem3, "Vehicle 2 Gas")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(9), _
                columnItem3, "Vehicle 2 Maintenance")

    ' fill fourth column data.

    Dim columnItem4 As HierarchyItem = Me.grid.ColumnsHierarchy.Items(4)

    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(2), columnItem4, "$351,34")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(3), columnItem4, "$55.12")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(4), columnItem4, "$129.21")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(5), columnItem4, "$55.17")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(6), columnItem4, "$311.12")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(7), columnItem4, "$109.35")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(8), columnItem4, "$114.99")
    grid.CellsArea.SetCellValue(Me.grid.RowsHierarchy.Items(9), columnItem4, "$35.19")

    columnItem3.Width = 150
    columnItem1.Width = 150
    grid.Refresh()

End Sub

The MergeCells method will illustrate how to merge grid cells by using the SetCellSpan method. When you use the SetCellSpan method, you need to pass four parameters to it - row, column, rows span and columns span. In the method, we will merge cells in the first and second rows and we will also set custom visual style to the merged cells.

C#

private void MergeCells()
{ 
    HierarchyItem rowItem1 = grid.RowsHierarchy.Items[0];
    HierarchyItem columnItem1 = grid.ColumnsHierarchy.Items[0];

    // create a custom cell style.
    GridCellStyle style = new GridCellStyle();
    style.FillStyle = new FillStyleSolid(Color.FromArgb(255, 0, 175, 240));
    style.Font = new Font(this.Font.FontFamily, 11.0f, FontStyle.Bold);
    style.TextColor = Color.White;
    GridCellStyle orangestyle = new GridCellStyle();
    orangestyle.FillStyle = new FillStyleSolid(Color.FromArgb(255, 254, 122, 1));
    orangestyle.Font = new Font(this.Font.FontFamily, 10.0f, FontStyle.Bold);
    orangestyle.TextColor = Color.White;
    grid.CellsArea.SetCellTextAlignment
    (rowItem1, columnItem1, ContentAlignment.MiddleCenter);
    // set the cell span to 1 row and 5 columns.
    grid.CellsArea.SetCellSpan(rowItem1, columnItem1, 1, 5);
    // set the merged cell value and style.
    grid.CellsArea.SetCellDrawStyle(rowItem1, columnItem1, style);
    // set the cell span to 1 row and 2 columns.
    grid.CellsArea.SetCellSpan(grid.RowsHierarchy.Items[1], columnItem1, 1, 3);
    grid.CellsArea.SetCellDrawStyle
    (grid.RowsHierarchy.Items[1], columnItem1, orangestyle);

    // set the merged cell value.

    // set the cell span to 1 row and 2 columns.
    grid.CellsArea.SetCellSpan
    (grid.RowsHierarchy.Items[1], this.grid.ColumnsHierarchy.Items[3], 1, 2);

    // set the merged cell value.
    grid.CellsArea.SetCellDrawStyle
    (grid.RowsHierarchy.Items[1], this.grid.ColumnsHierarchy.Items[3], orangestyle);
}

VB.NET

Private Sub MergeCells()
    Dim rowItem1 As HierarchyItem = grid.RowsHierarchy.Items(0)
    Dim columnItem1 As HierarchyItem = grid.ColumnsHierarchy.Items(0)

    ' create a custom cell style.

    Dim style As New GridCellStyle()
    style.FillStyle = New FillStyleSolid(Color.FromArgb(255, 0, 175, 240))
    style.Font = New Font(Me.Font.FontFamily, 11.0f, FontStyle.Bold)
    style.TextColor = Color.White

    Dim orangestyle As New GridCellStyle()

    orangestyle.FillStyle = New FillStyleSolid(Color.FromArgb(255, 254, 122, 1))
    orangestyle.Font = New Font(Me.Font.FontFamily, 10.0f, FontStyle.Bold)
    orangestyle.TextColor = Color.White

    grid.CellsArea.SetCellTextAlignment_
    (rowItem1, columnItem1, ContentAlignment.MiddleCenter)

    ' set the cell span to 1 row and 5 columns.
    grid.CellsArea.SetCellSpan(rowItem1, columnItem1, 1, 5)

    ' set the merged cell value and style.
    grid.CellsArea.SetCellDrawStyle(rowItem1, columnItem1, style)

    ' set the cell span to 1 row and 2 columns.
    grid.CellsArea.SetCellSpan(grid.RowsHierarchy.Items(1), columnItem1, 1, 3)

    grid.CellsArea.SetCellDrawStyle(grid.RowsHierarchy.Items(1), columnItem1, orangestyle)

    ' set the cell span to 1 row and 2 columns.
    grid.CellsArea.SetCellSpan(grid.RowsHierarchy.Items(1), _
            Me.grid.ColumnsHierarchy.Items(3), 1, 2)

    ' set the merged cell value.
    grid.CellsArea.SetCellDrawStyle(grid.RowsHierarchy.Items(1), _
            Me.grid.ColumnsHierarchy.Items(3), orangestyle)

End Sub

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

 VIBlend
VIBlend
United States United States
Member
Organisation
7 members

VIBlend designs and develops advanced components and controls for Windows platform

Article Top
 
Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
Hint: For improved responsiveness ensure Javascript is enabled and choose 'Normal' from the Layout dropdown and hit 'Update'.
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
First Prev Next
QuestionNull reference on clicking a merged cellmembermoem1155 May '12 - 6:14 
GeneralMy vote of 5memberPolinia27 Jan '12 - 2:12 
Last Visit: 31 Dec '99 - 18:00     Last Update: 17 May '13 - 22:01Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

About Article
In this post, we will show you how to use the cells merge functionality of VIBlend DataGridView for WinForms.
Type Technical Blog
Licence CPOL
First Posted 15 Jan 2012
Views 19,589
Bookmarked 15 times
Top News

Math Primers for Programmers

Get the Insider News free each morning.
Related Videos
DevExpress: Windows Inspired Applications
DevExpress Reporting for WinForms
DataGridVewTextBoxCell with Span Behaviour
Adding "Merge cells" support to the MFC GridControl
DataGridVewTextBoxCell with Span Behaviour
Cell Merging of DataGrid in ASP.NET
A fast and lightweight cell control
Grid Control Re-dux with Smooth Scroll and Composite Cell
How to merge cells with equal values in a GridView
Simple LINQ Sudoku Solver
Merge DataGrid Header
MergedDataGridView Control
CGrid Control
Owner drawn text table control
CGridCtrl with Merge Cell and Freeze Row/Col Capability
RichText Builder (StringBuilder for RTF)
Cell Merging In GridView
Data Binding with Windows Forms 2.0: Programming Smart Client Data Applications with .NET
Real-Time Data Grid
SourceGrid - Open Source C# Grid Control
Cell Blink for DataGridView
A Practical Guide to .NET DataTables, DataSets and DataGrids - Part 4
Permalink | Advertise | Privacy | Mobile
Web03 | 2.6.130516.1 | Last Updated 15 Jan 2012
Article Copyright 2012 by VIBlend
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid