Comment on page
Bunifu Datagrid View
Optimized theme design for high-performance; Flexible data editing, multiple data binding methods, and data export.
Bunifu Datagrid View is a feature-rich .NET valuable control for displaying data in a tabular format. It comes with beautiful in-built themes and a vast range of functions: data binding, editing, adding, custom sorting, selecting, and support for PDF formats.
This section provides a quick overview of working with the tabular data for WinForms. We shall walk through the entire process of creating a real-world data grid.
It's easy to add
BunifuDatagridView control at design time. Start by locating BunifuDatagridView from your toolbox and drag it to your form as shown below. Then customize it to your desired look and feel using properties elaborated on later in this documentation.
BunifuDataGridView works for both C# and VB.NET. We will use the Form’s Load event to write our sample code to create a BunifuDatagridView and populate the table with built-in sample data.C#
VB.NET
using System;
using Bunifu.UI.WinForms;
using System.Drawing;
using System.Windows.Forms;
namespace BunifuGrid
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
BunifuDataGridView bunifuDataGridView = new BunifuDataGridView();
bunifuDataGridView.Size = new Size(600, 250);
bunifuDataGridView.Location = new Point(12, 28);
this.Controls.Add(bunifuDataGridView);
bunifuDataGridView.PopulateWithSampleData();
}
}
}
Imports System
Imports Bunifu.UI.WinForms
Imports System.Drawing
Imports System.Windows.Forms
Namespace BunifuGrid
Partial Public Class Form1
Inherits Form
Public Sub New()
InitializeComponent()
End Sub
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim bunifuDataGridView As New BunifuDataGridView()
bunifuDataGridView.Size = New Size(600, 250)
bunifuDataGridView.Location = New Point(12, 28)
Me.Controls.Add(bunifuDataGridView)
bunifuDataGridView.PopulateWithSampleData()
End Sub
End Class
End Namespace
Here's the output for the above code:
Step 1: Create the following form below with the following controls as shown on the labels.
For the DataGridView set the
backgroundColor property to a color value of white.
Step two: Create columns on the Datagrid. Here's how to do it in the design view:
| |
a) Select the Datagrid and click on the glyph play icon ( ▶ | |
b) Click on the Add Column link which opens a dialog that displays Column Collection Editor | |
c) Add the following columns as shown below | |
d) Now, run the application, the below output will occur
Let's take a deep dive and get insights into the properties that are available on Bunifu DataGrid View.
Bunifu DataGrid View allows you to customize the appearance of your tabular data with ease. Here are the features that you can customize:
BunifuDataGridView offers 16+ different types of themes that you may utilize in your application. The Theme property allows you to get the property's value or set an enumerated theme value for your tabular data.
BunifuDataGridView exposes an array of properties that can be used to customize the theme. The following is a sampling of the properties related to our chosen theme:
In some cases, you may need to change some of the property values in your current theme. The
AllowCustomTheming property allows you to get the property's boolean value or set a boolean value that, when set to true, will enable you to edit the property values that were used to design the theme you selected.Property | Description |
CurrentTheme | This property contains an array of properties that allows you to get or set the design attributes of the theme chosen with ease. |
Let's take a deep dive to the
CurrentTheme properties This property allows you to get or set a color value that will be applied on the grid lines separating the cells. It supports the use of RGB and HEX color values.
This property contains an array of properties that allow you to get or set the design attributes and styles associated with the odd rows.
Property | Description |
BackColor | This property allows you to get or set the background color for each cell associated with odd rows. It supports the use of both RGB and HEX color values. |
Font | This property allows you to get or set the font style for each cell's text in odd rows. |
ForeColor | This property allows you to get or set the text color for each cell in an odd row. |
SelectionBackColor | This property allows you to get or set the background color for each odd row cell, which gets applied when the row is selected. It supports the use of both RGB and HEX color values. |
SelectionForeColor | This property allows you to get or set the text color for each odd row cell, which gets applied when the row is selected. It supports the use of both RGB and HEX color values. |
C#
VB.NET
//set back color to the alternate row
bunifuDataGridView1.CurrentTheme.AlternatingRowsStyle.BackColor = Color.FromArgb(199, 226, 199);
//set text color to cells in the alternate row
bunifuDataGridView1.CurrentTheme.AlternatingRowsStyle.ForeColor = Color.Black;
//apply selection text color to cells im the alternate row
bunifuDataGridView1.CurrentTheme.AlternatingRowsStyle.SelectionForeColor = Color.White;
//set selection background color to the cells in the alternate row
bunifuDataGridView1.CurrentTheme.AlternatingRowsStyle.SelectionBackColor = Color.FromArgb(122, 185, 122);
//apply a font style to the cell's text in the alternate rows
bunifuDataGridView1.CurrentTheme.AlternatingRowsStyle.Font = new Font("Segoe UI", 10,FontStyle.Regular);
'Apply back color to the alternate row
bunifuDataGridView1.CurrentTheme.AlternatingRowsStyle.BackColor = Color.FromArgb(199, 226, 199)
'Apply text color to cells in the alternate row
bunifuDataGridView1.CurrentTheme.AlternatingRowsStyle.ForeColor = Color.Black
'Apply selection text color to cells im the alternate row
bunifuDataGridView1.CurrentTheme.AlternatingRowsStyle.SelectionForeColor = Color.White
'Apply selection background color to the cells in the alternate row
bunifuDataGridView1.CurrentTheme.AlternatingRowsStyle.SelectionBackColor = Color.FromArgb(122, 185, 122)
'Apply a font style to the cell's text in the alternate rows
bunifuDataGridView1.CurrentTheme.AlternatingRowsStyle.Font = New Font("Segoe UI", 10,FontStyle.Regular)
This property contains an array of properties that allow you to get or set the design attributes and cell styles associated with a non-odd row in the data grid.
Below is a description of the properties that you can modify in the
RowsStyle prop:
Property | Description |
BackColor | This property allows you to get or set the background color for each cell of non-odd rows. It supports the use of both RGB and HEX color values. |
Font | This property allows you to get or set the font style for each cell's text in non-odd rows. |
ForeColor | This property allows you to get or set the text color for each cell's text in non-odd rows. |
SelectionBackColor | This property allows you to get or set the background color for each non-odd row cell, which gets applied when the row is selected. It supports the use of both RGB and HEX color values. |
SelectionForeColor | This property allows you to get or set the text color for each non-odd row cell, which gets applied when the row is selected. It supports the use of both RGB and HEX color values. |
C#
VB.NET
//apply back color to the row
bunifuDataGridView1.CurrentTheme.RowsStyle.BackColor = Color.FromArgb(210, 231, 210);
//apply text color to cells in the row
bunifuDataGridView1.CurrentTheme.RowsStyle.ForeColor = Color.Black;
//set selection text color to cells in the row
bunifuDataGridView1.CurrentTheme.RowsStyle.SelectionForeColor = Color.White;
//set selection background color to the cells in the row
bunifuDataGridView1.CurrentTheme.RowsStyle.SelectionBackColor = Color.FromArgb(122, 185, 122);
//apply a font style to the cell's text in the row
bunifuDataGridView1.CurrentTheme.RowsStyle.Font = new Font("Segoe UI", 10, FontStyle.Regular);
'Apply back color to the row
bunifuDataGridView1.CurrentTheme.RowsStyle.BackColor = Color.FromArgb(210, 231, 210)
'Apply text color to cells in the row
bunifuDataGridView1.CurrentTheme.RowsStyle.ForeColor = Color.Black
'Apply selection text color to cells in the row
bunifuDataGridView1.CurrentTheme.RowsStyle.SelectionForeColor = Color.White
'Apply selection background color to the cells in the row
bunifuDataGridView1.CurrentTheme.RowsStyle.SelectionBackColor = Color.FromArgb(122, 185, 122)
'Apply a font style to the cell's text in the row
bunifuDataGridView1.CurrentTheme.RowsStyle.Font = New Font("Segoe UI", 10, FontStyle.Regular)
This property contains an array of properties that allow you to get or set the design attributes and styles associated with the column headers.
Below is a description of the properties that you can modify in the
HeaderStyle prop:Property | Description |
BackColor | This property allows you to get or set the background color of each column header cell. It supports the use of both RGB and HEX color values. |
Font | This property allows you to get or set the font style of the text in the column header cells. |
ForeColor | This property allows you to get or set the color for the text in each column header cells. |
SelectionBackColor | This property allows you to get or set the background color of the column's header cell, which will be applied when the column is selected. It supports the use of both RGB and HEX color values. |
SelectionForeColor | This property allows you to get or set the color of text content in a column header cell, which will be applied when the column is selected. It supports the use of both RGB and HEX color values. |
C#
VB.NET
//apply back color to the column header
bunifuDataGridView1.CurrentTheme.HeaderStyle.BackColor = Color.ForestGreen;
//set text color to cells in the column header
bunifuDataGridView1.CurrentTheme.HeaderStyle.ForeColor = Color.White;
//set selection text color to cells in the column header
bunifuDataGridView1.CurrentTheme.HeaderStyle.SelectionForeColor = Color.White;
//apply selection background color to the cells in the column
bunifuDataGridView1.CurrentTheme.HeaderStyle.SelectionBackColor = Color.FromArgb(27, 111, 27);
//set a font style to the cell's text in the column header
bunifuDataGridView1.CurrentTheme.HeaderStyle.Font = new Font("Segoe UI", 10, FontStyle.Regular);
//set the column header height
bunifuDataGridView1.ColumnHeadersHeight = 36;
'apply back color to the column header
bunifuDataGridView1.CurrentTheme.HeaderStyle.BackColor = Color.ForestGreen
'set text color to cells in the column header
bunifuDataGridView1.CurrentTheme.HeaderStyle.ForeColor = Color.White
'set selection text color to cells in the column header
bunifuDataGridView1.CurrentTheme.HeaderStyle.SelectionForeColor = Color.White
'apply selection background color to the cells in the column
bunifuDataGridView1.CurrentTheme.HeaderStyle.SelectionBackColor = Color.FromArgb(27, 111, 27)
'set a font style to the cell's text in the column header
bunifuDataGridView1.CurrentTheme.HeaderStyle.Font = New Font("Segoe UI", 10, FontStyle.Regular)
'set the column header height
bunifuDataGridView1.ColumnHeadersHeight = 36
BunifuDataGridView provides you support for creating and editing both bound and unbound columns with ease. The Below section shows the various properties you can work with to design your column appearance and behavior.Property name | Description |
Columns | This property allows you to get the current collection of columns or set a column collection object containing an array of unbound columns for your tabular data. |
The column collection editor is provided in the design view, and it allows you to view, add, update, and delete the existing columns. The columns to be added can be chosen from built-in column types or your own column.
Like the standard DataGridView, the created the unbound column gives you further ability to edit its properties. See how to get more insights on editing the properties provided in the column.
You also can add or edit different types of columns(e.g., Textbox columns, image view columns, e.t.c) using any language you prefer to code with( i.e., the C# and VB.NET languages).
Here's how you can add textbox columns through code:
C#
VB.NET
private void Form1_Load(object sender, EventArgs e)
{
bunifuDataGridView1.Columns.AddRange(
new DataGridViewTextBoxColumn()
{
HeaderText = "Product ID",
Name = "productIDColumn"
},
new DataGridViewTextBoxColumn()
{
HeaderText = "Product Name",
Name = "productNameColumn"
},
new DataGridViewTextBoxColumn()
{
HeaderText = "Customer Name",
Name = "customerNameColumn"
},
new DataGridViewTextBoxColumn()
{
HeaderText = "Country",
Name = "countryColumn"
},
new DataGridViewTextBoxColumn()
{
HeaderText = "Shipping City",
Name = "shippingCityColumn"
}
);
}
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
bunifuDataGridView1.Columns.AddRange(New DataGridViewTextBoxColumn() With {
.HeaderText = "Product ID",
.Name = "productIDColumn"
}, New DataGridViewTextBoxColumn() With {
.HeaderText = "Product Name",
.Name = "productNameColumn"
}, New DataGridViewTextBoxColumn() With {
.HeaderText = "Customer Name",
.Name = "customerNameColumn"
}, New DataGridViewTextBoxColumn() With {
.HeaderText = "Country",
.Name = "countryColumn"
}, New DataGridViewTextBoxColumn() With {
.HeaderText = "Shipping City",
.Name = "shippingCityColumn"
})
End Sub
On running the code above, the below output will occur:
Alternatively,
BunifuDataGridView can be bound to a data source, where the columns will be generated automatically. This will be discussed in further detail, later in this documentation.The columns can be accessed through its column index or using its
Name property from the bunifuDataGrid.Columns collection.C#
VB.NET
DataGridViewColumn dataGridViewColumn = bunifuDataGridView1.Columns[0];
//or
DataGridViewColumn gridViewColumn = bunifuDataGridView1.Columns["productIDColumn"];
Dim dataGridViewColumn As DataGridViewColumn = bunifuDataGridView1.Columns(0)
'or
Dim gridViewColumn As DataGridViewColumn = bunifuDataGridView1.Columns("productIDColumn")
A column can be removed using the Remove and RemoveAt methods. The Clear method removes all columns from bunifuDataGrid.Columns collection.
C#
VB.NET
//remove the second column
bunifuDataGridView1.Columns.RemoveAt(1);
//or
bunifuDataGridView1.Columns.Remove(gridViewColumn);
//clear all columns
bunifuDataGridView1.Columns.Clear();
'remove the second column
bunifuDataGridView1.Columns.RemoveAt(1)
'or
bunifuDataGridView1.Columns.Remove(gridViewColumn)
'clear all columns
bunifuDataGridView1.Columns.Clear()
Property name | Description |
ColumnHeadersDefaultCellStyle | This property allows you to get the style object applied in the columns or set a cell style object that contains an array of cell style properties that can change the appearance of the column header row. |
Here are the properties that you can edit to the preferred style of your column header row.:
To ensure that the properties are working at runtime, ensure the
AllowCustomTheming prop is set to true.Property | Description |
ColumnHeadersHeightSizeMode | This property allows you to get or set the behavior of adjusting the column headers' height during runtime. You can specify the following values: EnableResizing, DisableResizing, and AutoSize. |
ColumnHeadersHeight | This property allows you to get or set an integer value that will resize the column header. |
ColumnHeadersBorderStyle | This property allows you to get or set the border style applied to the column header. |
ColumnHeadersVisible | This property allows you to get or set a boolean value that will hide the column header row when set to false. The default value is true. |
BunifuDataGridView enables you to add, populate, edit or remove rows for both bound and unbound data. Here are the properties you can use to design your rows, populate and edit your rows with ease:
It is very easy to populate rows with an unbound data with bunifuDataGridView.Rows collection property.
Rows are only populated at runtime. Also, note that to add the rows, you must have the columns in the first place.
Here's how you can add and populate a row in
BunifuDataGridView using C# or VB.NET language. This example assumes that you have added 5 DataGridViewTextBoxColumn instances to BunifuDataGridView control's column collection.Step one: Create the following class with the get and set properties:
C#
VB.NET
class Order
{
public string ProductId { get; set; }
public string ProductName { get; set; }
public string CustomerName { get; set; }
public string Country { get; set; }
public string ShippingCity{ get; set; }
}
Friend Class Order
Public Property ProductId() As String
Public Property ProductName() As String
Public Property CustomerName() As String
Public Property Country() As String
Public Property ShippingCity() As String
End Class
Step two: In your Form's
Load event write the following code:C#
VB.NET
using System;
using System.Collections.Generic;
using System.Windows.Forms;
namespace Example2
{
private void Form1_Load(object sender, EventArgs e)
{
List<Order> orderList = new List<Order>()
{
new Order()
{
ProductId = "#01293",
ProductName = "HP Envy x360",
CustomerName = "Dylan Gray",
Country = "Portugal",
ShippingCity = "Spain"
},
new Order()
{
ProductId = "#01294",
ProductName = "Seagate SSDs",
CustomerName = "Sarah Banks",
Country = "United States",
ShippingCity = "New York"
},
new Order()
{
ProductId = "#01295",
ProductName = "HP Envy x360",
CustomerName = "Tracy Rivera",
Country = "Kenya",
ShippingCity = "Nairobi"
}
};
foreach (var order in orderList)
{
bunifuDataGridView1.Rows.Add(order.ProductId,order.ProductName,order.CustomerName,order.Country,order.ShippingCity);
}
}
}
Option Infer On
Imports System
Imports System.Collections.Generic
Imports System.Windows.Forms
Namespace Example2
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim orderList As New List(Of Order)() From {
New Order() With {
.ProductId="#01293",
.ProductName="HP Envy x360",
.CustomerName="Dylan Gray",
.Country="Portugal",
.ShippingCity="Spain"
},
New Order() With {
.ProductId="#01294",
.ProductName="Seagate SSDs",
.CustomerName="Sarah Banks",
.Country="United States",
.ShippingCity="New York"
},
New Order() With {
.ProductId="#01295",
.ProductName="HP Envy x360",
.CustomerName="Tracy Rivera",
.Country="Kenya",
.ShippingCity="Nairobi"
}
}
For Each order In orderList
bunifuDataGridView1.Rows.Add(order.ProductId,order.ProductName,order.CustomerName,order.Country,order.ShippingCity)
Next order
End Sub
End Namespace
Now, after running your application with the codes above, the following output will occur:
You can also use the Rows collection to modify the values in the control or to remove rows. The following example shows you how to modify cell values programmatically.
C#
VB.NET
//Modify the value in the second cell of the third row.
bunifuDataGridView1.Rows[2].Cells[1].Value = "Dell AlienWare M17 R4";
// The previous line is equivalent to the following line.
bunifuDataGridView1[1,2].Value= "Dell AlienWare M17 R4";
'Modify the value in the second cell of the third row.
bunifuDataGridView1.Rows(2).Cells(1).Value = "Dell AlienWare M17 R4"
' The previous line is equivalent to the following line.
bunifuDataGridView1(1,2).Value= "Dell AlienWare M17 R4"
The appearance of a
BunifuDataGrid cell can be customized using the bunifuDataGridView.Rows collection Style property. We have the option to style the back color, its selection color, the font, its forecolor, and the alignment of text in a particular cell.The following example shows you how to style the appearance of a cell back color programmatically. The assumption is that you already have some data in your table.
C#
VB.NET
for(int i = 0; i < bunifuDataGridView1.Rows.Count; i++)
{
//Modify the backcolor, the fore color and selection color in every cell of the FIRST column
bunifuDataGridView1[1, i].Style.BackColor = Color.FromArgb(152, 175, 92);
bunifuDataGridView1[1, i].Style.ForeColor = Color.White;
bunifuDataGridView1[1, i].Style.SelectionBackColor = Color.FromArgb(63, 137, 90);
//Modify the backcolor, the fore color and selection color every cell of the THIRD column
bunifuDataGridView1[4, i].Style.BackColor = Color.FromArgb(152, 175, 92);
bunifuDataGridView1[4, i].Style.ForeColor = Color.White;
bunifuDataGridView1[4, i].Style.SelectionBackColor = Color.FromArgb(63, 137, 90);
}
For i As Integer = 0 To bunifuDataGridView1.Rows.Count - 1
'Modify the backcolor, the fore color and selection color in every cell of the FIRST column
bunifuDataGridView1(1, i).Style.BackColor = Color.FromArgb(152, 175, 92)
bunifuDataGridView1(1, i).Style.ForeColor = Color.White
bunifuDataGridView1(1, i).Style.SelectionBackColor = Color.FromArgb(63, 137, 90)
'Modify the backcolor, the fore color and selection color every cell of the THIRD column
bunifuDataGridView1(4, i).Style.BackColor = Color.FromArgb(152, 175, 92)
bunifuDataGridView1(4, i).Style.ForeColor = Color.White
bunifuDataGridView1(4, i).Style.SelectionBackColor = Color.FromArgb(63, 137, 90)
Next i
The above code will output the occurrence below:
BunifuDataGrid enables you to select a single row or cell or multiple rows or cells. Sometimes you want your application to perform actions such as printing out the selected rows or columns based on user selections within the tabular control. Depending on the actions, you may want to restrict the kinds of selection that are possible. This section will explain the types of selection available for GridControl and its usability.
You can specify a full row type of selection by setting the
BunifuDataGridView.SelectionMode property to FullRowSelect.When a cell or row header is clicked in the DataGrid, an entire row selection is created.
By default, users can select multiple rows, columns, or cells by dragging with the mouse, pressing
CTRL or SHIFT keys while selecting to extend or modify a selection. To prevent this behavior set the MultiSelect property to false.To retrieve the selected values in a row, refer to the following code:
C#
VB.NET
private void bunifuButton1_Click(object sender, EventArgs e)
{
//get the number of the selected rows
int selectedRows = bunifuDataGridView1.Rows.GetRowCount(DataGridViewElementStates.Selected);
if (selectedRows > 0)
{
StringBuilder cellValuesStringBuilder = new StringBuilder();
//loop through each of the selected row
for(int i = 0; i < selectedRows; i++)
{
//loop the cells of a row, get their values and append them in a string builder
for (int j = 0; j < bunifuDataGridView1.ColumnCount; j++)
{
cellValuesStringBuilder.Append(bunifuDataGridView1.SelectedRows[i].Cells[j].Value+"\t");
}
//create a new line for the next row loop
cellValuesStringBuilder.Append("\n");
}
//print the output on a console
Console.WriteLine(cellValuesStringBuilder);
}
}
Private Sub bunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
'get the number of the selected rows
Dim selectedRows As Integer = bunifuDataGridView1.Rows.GetRowCount(DataGridViewElementStates.Selected)
If selectedRows > 0 Then
Dim cellValuesStringBuilder As New StringBuilder()
'loop through each of the selected row
For i As Integer = 0 To selectedRows - 1
'loop the cells of a row, get their values and append them in a string builder
For j As Integer = 0 To bunifuDataGridView1.ColumnCount - 1
cellValuesStringBuilder.Append(bunifuDataGridView1.SelectedRows(i).Cells(j).Value & vbTab)
Next j
'create a new line for the next row loop
cellValuesStringBuilder.Append(vbLf)
Next i
'print the output on a console
Console.WriteLine(cellValuesStringBuilder)
End If
End Sub
The selected values are printed in the output screen as follows:
A cell selection is specified by setting
BunifuDataGridView.Selection property to CellSelect. When a user clicks on a cell, a selection is created on that cell.The following image shows for multiple mode cell selection:
Here's a code that retrieves the selected cell values:
C#
private void bunifuButton1_Click(object sender, EventArgs e){
//get the number of selected cells
int selectedCells = bunifuDataGridView1.GetCellCount(DataGridViewElementStates.Selected);
if (selectedCells > 0)
{
StringBuilder cellStrBuilder = new StringBuilder();
//loop through the selected cells, get their values and append to the string builder variable
for(int i = 0; i < selectedCells; i++)
{
cellStrBuilder.Append(bunifuDataGridView1.SelectedCells[i].Value + "\t");
}
//output the seleccted cell values
Console.WriteLine(cellStrBuilder);
}
The selected values are printed in the output screen as follows:
BunifuDataGridView allows you to select or deselect rows within a specific column by interacting with the column's header cell. To set this type of selection set the SelectionMode prop to ColumnHeaderSelect.To make this type of selection work, ensure that the
SortMode property for the textbox columns is set to programmatic. The sorting techniques will be discussed in greater detail later in this documentation.To retrieve the selected values in a row, refer to the following code:
C#
VB.NET