Editable and Multi-Functional Datagridview

• Download source - 29.26 KB

Introduction

The article or rather a code snippet demonstrates a simple application of insert, update, delete using datagridview. Here, sample data is used and one can customize this gridview according to her or his need. There are some unique features in this datagridview like:

• Adding columns at runtime
• Changing the values of a combobox on any event like selecting the specified values from another combobox
• Forcing the user to type only the numeric values in the datagridview textbox, if Integer is selected in corresponding combobox
• DateTime picker control in the datagridview
• Enabling-Disabling the cells on a particular event
• Setting the tooltip on the cells
• Changing the cell style at runtime

Background

When I was working on the datagridview while developing a Windows application, I came across the problems about the Datagridview that it doesn't support many functionalities directly, rather one has to play with its events. Like catching the keypress event of a combobox column in gridview is not so simple, but with using the right event, one can do that. So I am presenting this editable and multi-functional grid which can be customized according to one's need.

Using the Multi-Functional Gridview

Note: This gridview is developed and tested in Visual Studio 2005. It may not work with older versions or any non-Microsoft browser.

This sample code can help those who wish to use the unbound gridview in their Windows application. In this code, all the tricky events are handled with the demo data. The user has to just change the demo data with her or his original data. In this code, the user will find all the basic features which one should require in a gridview like:

• Adding columns at runtime
• Changing the values of a combobox on any event like selecting the specified values from another combobox
• Forcing the user to type only the numeric values in the datagridview textbox, if Integer is selected in corresponding combobox
• DateTime picker control in the datagridview
• Enabling-Disabling the cells on a particular event
• Setting the tooltip on the cells
• Changing the cell style at runtime

Using this code is simple. Open the solution file 'Editable Grid' and just copy-paste the code blocks of functions or events renaming the control names for your own, and it will work for you. You must have the Project Folder 'Editable Grid' for opening the solution file.

Here are some code blocks I'll explain.

This code in a function adds columns at runtime:

colBtnDelete.Text = "Delete"
colBtnDelete.HeaderText = "Delete"
colBtnDelete.Name = "Delete"
colBtnDelete.Width = 100
colBtnDelete.UseColumnTextForButtonValue = True
EditableGrid.Columns.Add(colBtnDelete)

This function adds the value into the gridview combobox through the list:

Private arrOptionColumn1 As New List(Of String)
Dim cmbOpt1 As DataGridViewComboBoxColumn = CType(EditableGrid.Columns"Opt1"), _
    DataGridViewComboBoxColumn)
With arrOptionColumn1
.Add("Opt1")
.Add("Opt2")
.Add("Opt3")
.Add("Opt4")
End With
cmbOpt1.DataSource = arrOptionColumn1

This function changes the values in the cells when any particular event is fired:

Private Sub OptionsChanged(ByVal lngRowIndex As Integer)

Dim cellOptColumn2 As DataGridViewComboBoxCell =
CType(EditableGrid.Rows(lngRowIndex).Cells("Opt2"), DataGridViewComboBoxCell)
    
Try
With EditableGrid
If (.Rows.Count > 1) Then
If (.Item("Opt1", lngRowIndex).Value.ToString = "Opt1") Then
cellOptColumn2.Dispose()
cellOptColumn2.DataSource = arrOptionColumn2
ElseIf (.Item("Opt1", lngRowIndex).Value.ToString = "Opt2") Then
cellOptColumn2.Dispose()
cellOptColumn2.DataSource = arrOptionColumn3
End If
End If
End With
Catch ex As Exception
End Try

End Sub

Through this event of datagridview, we can enable-disable cells on any action performed on the datagridview:

Private Sub EditableGrid_CellValueChanged(ByVal sender As Object, ByVal e As
System.Windows.Forms.DataGridViewCellEventArgs) Handles
EditableGrid.CellValueChanged

Try
With EditableGrid
If (.Rows.Count > 1) Then
If (e.ColumnIndex = 2) Then
If (.Rows(e.RowIndex).Cells("CheckBox1").Value.ToString() = "True") Then
.Rows(e.RowIndex).Cells(4).ReadOnly = True
.Rows(e.RowIndex).Cells(4).Style.BackColor = Color.FromName("Control")
Else
.Rows(e.RowIndex).Cells(4).ReadOnly = False
.Rows(e.RowIndex).Cells(4).Style.BackColor = Color.White
End If
End If
End If
End With
Catch ex As Exception
End Try
End Sub

This function is very important, as it casts the DatagridviewTextBox into a normal textbox to catch its key press and key down events:

Private Sub EditableGrid_EditingControlShowing(ByVal sender As Object, ByVal e
    As System.Windows.Forms.DataGridViewEditingControlShowingEventArgs) Handles
    EditableGrid.EditingControlShowing

Try If (e.Control.GetType().BaseType().Name = "TextBox") Then
mobjInnerTextBox = CType(e.Control, TextBox)
End If
Catch ex As Exception

End Try

End Sub

This function sets the tooltip for each cell of the datagridview:

Private Sub SetToolTip(ByVal lngRowindex As Integer, _
    ByVal lngColumnIndex As Integer)
Try With EditableGrid
Select Case lngColumnIndex

Case 0
.Rows(lngRowindex).Cells(0).ToolTipText = "Please Select a value, Combo2 values
will be changed accordingly"

Case 1
.Rows(lngRowindex).Cells(1).ToolTipText = "Values change according to first
combo"

Case 2
.Rows(lngRowindex).Cells(2).ToolTipText = "Text Box 2 will get disable on
checking this CheckBox"

Case 3
.Rows(lngRowindex).Cells(3).ToolTipText = "Only Integers can be entered if
Combo2 has Integer type selected"

Case 4
.Rows(lngRowindex).Cells(4).ToolTipText = "This will be disabled if CheckBox is
checked"

Case 5
.Rows(lngRowindex).Cells(5).ToolTipText = "Select a Date, default will be the
current date"

Case 6
.Rows(lngRowindex).Cells(6).ToolTipText = "This will delete the whole Row"

End Select
End With
Catch ex As Exception
End Try
End Sub

History

• 23^rd May, 2008: Initial post