Thursday, September 4, 2008

Using DataGridView CheckBox Column as RadioButton (OptionButton)

Level: Beginner Knowledge Required:
  • DataGridView Control
  • Data Binding
Description: In this post we shall see that how we can transform DataGridView control’s CheckBox column into Radio Button (option button). I have done 2 main things,
  1. Created a back-end logic when user clicks on CheckBox Column so only one CheckBox should be checked at a time
  2. Change the look of CheckBox column so it looks a Radio Button Column
So to understand the first one, consider a DataGridView control as shown in the above figure. This DataGridView control is actually bind with a DataSet for example, As you can see there are 2 columns. The IsSelected column is actually a Boolean column which is normally rendered as CheckBox in DataGridView control. What we will be doing is that we first set our DataGridView to Read Only i.e., AllowUserToAddRows = False AllowUserToDeleteRows = False ReadOnly = True We are making our DataGridView control Read Only because it is easier to set the CheckBox checked or unchecked programmatically otherwise DataGridView control itself will be interfering and will create problems and complexities for us. OK now whenever user clicks on CheckBox we will be performing our custom operation. To do this we will use the DataGridView’s CellContentClick event. Here is the code,
Private Sub ShutDownOptionsDataGridView_CellContentClick(ByVal sender As System.Object, ByVal e As System.Windows.Forms.DataGridViewCellEventArgs) Handles ShutDownOptionsDataGridView.CellContentClick
    If e.ColumnIndex = Me.columnIsSelected.Index Then
        Dim drv As DataRowView
        Dim rowShutDownOption As ShutdownOptionDataSet.ShutDownOptionsRow
        ' in this event handler we know that which DataGridView's row is clicked
        ' so we are going to extract out the actual DataTable's row which is
        ' bind with this DataGridView's Row
        drv = CType(Me.ShutDownOptionsDataGridView.Rows(e.RowIndex).DataBoundItem, DataRowView)
        ' get the DataTable's row
        rowShutDownOption = CType(drv.Row, ShutdownOptionDataSet.ShutDownOptionsRow)

        ' get the row which is currently selected
        Dim rowCurrentlySelected() As ShutdownOptionDataSet.ShutDownOptionsRow
        rowCurrentlySelected = Me.ShutdownOptionDataSet.ShutDownOptions.Select("IsSelected=True")
        ' if some row found then make it de-selected
        If rowCurrentlySelected.Length > 0 Then
            rowCurrentlySelected(0).IsSelected = False
        End If
            ' ok now select the row which is clicked
        rowShutDownOption.IsSelected = True
    End If
End Sub
What we do is first get the row in which IsSelected=True and we make that row IsSelected=False. Then we set the row which is clicked as IsSelected=True. Next thing is to change the look of CheckBox to OptionButton / RadioButton. For this purpose we will be using DataGridView’s CellPainting event. Here is the code,
Private Sub ShutDownOptionsDataGridView_CellPainting(ByVal sender As Object, ByVal e As System.Windows.Forms.DataGridViewCellPaintingEventArgs) Handles ShutDownOptionsDataGridView.CellPainting
    If e.ColumnIndex = Me.columnIsSelected.Index AndAlso _
        e.RowIndex >= 0 Then
        e.PaintBackground(e.ClipBounds, True)

        Dim rectRadioButton As Rectangle

        rectRadioButton.Width = 14
        rectRadioButton.Height = 14
        rectRadioButton.X = e.CellBounds.X + (e.CellBounds.Width - rectRadioButton.Width) / 2
        rectRadioButton.Y = e.CellBounds.Y + (e.CellBounds.Height - rectRadioButton.Height) / 2

        If IsDBNull(e.Value) OrElse e.Value = False Then
            ControlPaint.DrawRadioButton(e.Graphics, rectRadioButton, ButtonState.Normal)
        Else
            ControlPaint.DrawRadioButton(e.Graphics, rectRadioButton, ButtonState.Checked)
        End If

        e.Paint(e.ClipBounds, DataGridViewPaintParts.Focus)

        e.Handled = True
    End If
End Sub
As you can see we have used the ControlPaint class to draw the RadioButton / OptionButton. Download: DGVCheckBoxAsRadioButton.zip

19 comments:

  1. great post thanks, here is the C# translation of the Painting events. Note, the column I needed this for was titled "Primary":

    private void gvDocumentList_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
    {
    if (e.ColumnIndex == gvDocumentList.Columns["Primary"].Index && e.RowIndex >= 0)
    {
    e.PaintBackground(e.ClipBounds, true);

    Rectangle rectRadioButton = new Rectangle();

    rectRadioButton.Width = 14;
    rectRadioButton.Height = 14;
    rectRadioButton.X = e.CellBounds.X + (e.CellBounds.Width - rectRadioButton.Width) / 2;
    rectRadioButton.Y = e.CellBounds.Y + (e.CellBounds.Height - rectRadioButton.Height) / 2;

    if (e.Value == DBNull.Value || (bool)e.Value == false)
    {
    ControlPaint.DrawRadioButton(e.Graphics, rectRadioButton, ButtonState.Normal);
    }
    else
    {
    ControlPaint.DrawRadioButton(e.Graphics, rectRadioButton, ButtonState.Checked);
    }

    e.Paint(e.ClipBounds, DataGridViewPaintParts.Focus);

    e.Handled = true;
    }
    }

    ReplyDelete
  2. Hi,
    Thank you very much. This code has helped me a lot and Saved lot of time. Thank you very much.

    ReplyDelete
  3. Hi,
    Thanks for this code. It helped me a lot.

    Unfortunatly i am not good enough in VB, because i have some trouble with my project.
    I want to have a datagrid with three columns of RadioButtons an one Column with a List of filenames.. If i click on one RadioButton, i want the other RadioButtons in this particular row to be deselected...

    Can anybody provide some help???

    Thanks
    Ole

    ReplyDelete
  4. Hi Ole,

    The thing which you required is alot simpler. Do the followings

    1) Create a DataTable with 4 Fields. 3 Boolean and 1 for File Name
    2) Bind this DataTable with DataGridView
    3) Make the first 3 Columns Read-only
    4) In the CellContentClick Event Handler, use this logic:
    if Clicked Column = any of first 3 column Then
    Get the DataTable Row
    Make all the other boolean columns = False
    And then Set the clicked column = True
    End If

    ReplyDelete
  5. Thanks! This was exactly what I needed.

    ReplyDelete
  6. Arsalan, Thanks again for the post. This works pretty well, but I actually do need the user to have the ability to add and update rows. Can you elaborate on the additional problems and complexities that you mention? When the grid is not Read-Only the procedure’s behavior is really flaky.

    TD

    ReplyDelete
  7. @TD,

    Atleast "option button" column should be readonly.

    ReplyDelete
  8. Great post!!!

    Tip:

    If you want Windows XP styles in the radio buttons you can use this code in the cellpaint event:

    If e.ColumnIndex = 1 AndAlso e.RowIndex >= 0 Then
    e.PaintBackground(e.ClipBounds, True)

    Dim p As Point
    p.X = e.CellBounds.X + (e.CellBounds.Width - 14) / 2
    p.Y = e.CellBounds.Y + (e.CellBounds.Height - 14) / 2


    If IsDBNull(e.Value) OrElse e.Value = False Then
    RadioButtonRenderer.DrawRadioButton(e.Graphics, p, VisualStyles.RadioButtonState.UncheckedNormal)
    Else
    RadioButtonRenderer.DrawRadioButton(e.Graphics, p, VisualStyles.RadioButtonState.CheckedNormal)
    End If

    e.Paint(e.ClipBounds, DataGridViewPaintParts.Focus)

    e.Handled = True
    End If

    Greets

    ReplyDelete
  9. Thank you! I was looking for it quite long, but this looks so nice and easy!

    ReplyDelete
  10. Thx...

    Good article.
    How can we make a datagridview with checkbox type colum with simple coding.

    ReplyDelete
  11. @Seminyak Villas

    Sorry I didn't get you. We already have a check box column built-in for DataGridView control you just have to add it in Design Mode or through coding.

    ReplyDelete
  12. what is Dim rowShutDownOption As ShutdownOptionDataSet.ShutDownOptionsRow in this. it gives me error and i dont know wt to replace with this? can some1 help me in it plz?
    my data grid name is datagridview1 and chech box column is column1 . plz help

    ReplyDelete
  13. @Sahil:

    I've actually created a Typed DataSet here. You need to do use your own DataSet/DataTable or whatever datasource you have used with DataGridView control.

    Download the Source and check it, you may understand what is going on.

    ReplyDelete
  14. Very helpful. I struggled for a couple of hours to convert this into Powershell. If anyone is interested this is the PS translation.
    NB: In my project only the read only columns where radio boxes

    $datagridview1_CellContentClick=[System.Windows.Forms.DataGridViewCellEventHandler]{
    $column = $datagridview1.Columns[$_.ColumnIndex]
    if($column.ReadOnly -eq $true){
    $dataRowView = $datagridview1.Rows[$_.RowIndex].DataBoundItem
    if($dataRowView -ne $null){
    $table = $serverDS.Tables["Server"]
    foreach ($row in $table.Rows){
    $row.Item($column.Index) = $false
    }
    $dataRowView.Item($_.ColumnIndex) = $true
    }
    }
    }

    $datagridview1_CellPainting=[System.Windows.Forms.DataGridViewCellPaintingEventHandler]{
    $column = $datagridview1.Columns[$_.ColumnIndex]
    if($column.ReadOnly -eq $true -and $_.RowIndex -ge 0){
    $_.PaintBackground($_.ClipBounds, $true)
    [System.Drawing.Rectangle]$rectRadioButton = New-Object 'System.Drawing.Rectangle'
    $rectRadioButton.Width = 14
    $rectRadioButton.Height = 14
    $rectRadioButton.X = $_.CellBounds.X + ($_.CellBounds.Width - $rectRadioButton.Width) / 2;
    $rectRadioButton.Y = $_.CellBounds.Y + ($_.CellBounds.Height - $rectRadioButton.Height) / 2;
    if($_.Value -eq $false){
    [System.Windows.Forms.ControlPaint]::DrawRadioButton($_.Graphics,$rectRadioButton,[System.Windows.Forms.ButtonState]::Normal)
    }else{
    [System.Windows.Forms.ControlPaint]::DrawRadioButton($_.Graphics,$rectRadioButton,[System.Windows.Forms.ButtonState]::Checked)
    }
    $_.Paint($_.ClipBounds, [System.Windows.Forms.DataGridViewPaintParts]::Focus)
    $_.Handled = $true
    }
    }

    $datagridview1.add_CellContentClick($datagridview1_CellContentClick)
    $datagridview1.add_CellPainting($datagridview1_CellPainting)

    ReplyDelete
  15. Excellent post. This saved me a few hours.

    ReplyDelete
  16. If the user didn't care about the cosmetic visual of a Radio Button Column and having just the Button vs. the whole Row highlighted, how is the CellContentClick doing anything functionally different from just setting MultiSelect = False and SelectionMode = FullRowSelect?
    If not, have users had a significant problem with just clicking anywhere on a Row to select one and only one item (i.e. like they do in ComboBox'es and List's)?

    ReplyDelete
  17. @Tom Chien:

    100% agreed what you said.

    But look it like that, since the DataGridView control representing the Data in a Tabular Format, so user has a chance to scroll through columns and rows to check. And sometimes they also click on one or more cells and try to copy some value from there. This approach gives a relaxation that you have selected some particular line, now you can freely move here or there select and copy the values you want or explore the data.

    Otherwise MultiSelect=False and FullRowSelect should provide the same behaviour.

    ReplyDelete
  18. Good point about the ad-hoc Cell value viewing / copying (for *multi*-column grids). I actually don't use FullRowSelect (in my multi-column grids) for that reason. Having a RadioButton Column would allow the current selected *row* to be indicated while the user selects various cells on various rows for viewing / copying. Although, that brings up another point. For a *single* column grid that's just simulating a RadioButton group in grid format (by artificially adding a RadioButton column), I would think ease-of-selection far outweighs the unlikely viewing / copying needs so that you'd probably want to make clicking on *any* column (not just the RadioButton column) select the whole the row in which case you might as well just use MultiSelect = False and FullRowSelect. It seems your example would highlight the benefits / applicability more if it were of a *multi*-column grid that uses a RadioButton column that allows the the current / newly selected row to continue to be indicated while the user selects various cells for viewing / copying.

    ReplyDelete