Square Filled CheckBox in Datagridview

Question

I have a Database that looks like this

Table Name : ri_closure

as what you see on the image above all of the columns except Month are TinyInt(1) and Month is Varchar now I have a code here

 Dim con1 As MySqlConnection = New MySqlConnection("server=192.168.2.87;userid=root;password=admin1950;database=inventory")
        Dim sql1 As MySqlCommand = New MySqlCommand("Select * from ri_closure", con1)
        Dim ds1 As DataSet = New DataSet
        Dim adapter1 As MySqlDataAdapter = New MySqlDataAdapter
        con1.Open()
        adapter1.SelectCommand = sql1
        adapter1.Fill(ds1, "MyTable")
        DataGridView2.DataSource = ds1.Tables(0)
        con1.Close()
        ds1.Tables(0).Columns(2).DataType = GetType(Boolean)
        Me.DataGridView2.Columns(1).Frozen = True
        Dim i As Integer
        For i = 0 To DataGridView2.Columns.Count - 1
            DataGridView2.Columns.Item(i).SortMode = DataGridViewColumnSortMode.Programmatic
        Next
        DataGridView2.Columns(0).Visible = False
        DataGridView2.Columns(1).DefaultCellStyle.BackColor = Color.LightBlue

Now this is what it looks like

Now you see the output and I'm sure you dont that want that red ones. Irritating in the eyes and here is my code for that

  For Each rw As DataGridViewRow In DataGridView2.Rows
            For ii As Integer = 2 To rw.Cells.Count - 1
                If rw.Cells(ii).Value = False Then
                    rw.Cells(ii).Style.BackColor = Color.Red
                ElseIf rw.Cells(ii).Value = True Then
                    rw.Cells(ii).Style.BackColor = Color.White
                End If
            Next
        Next

Now here is my question and I hope it is possible. I want to do something like this instead uncked and turn the cell in to red How can I make the uncked cell like this.

instead of empty checkbox it will look the same as the image above.

and another one I hope the that will generate filled checkbox will replace the uncheked value because I have code in checking of that one.

I try some code and this is the output

TYSM for future help

Reza Aghaei · Accepted Answer · 2016-09-17T12:21:01.477

2

You can customize painting of DataGridViewCheckBox column by handling CellPainting event of DataGridView. Then you can use CheckBoxRenderer to draw the check box in desired state. The state which you want to show for unchecked state of check box is CheckBoxState.MixedNormal:

Private Sub CellPainting(ByVal sender As Object, _
    ByVal e As DataGridViewCellPaintingEventArgs) Handles DataGridView1.CellPainting
    If (e.ColumnIndex = 0 AndAlso e.RowIndex >= 0) Then
        Dim value = DirectCast(e.FormattedValue, Nullable(Of Boolean))
        e.Paint(e.CellBounds, DataGridViewPaintParts.All And _
                              Not (DataGridViewPaintParts.ContentForeground))
        Dim state = IIf((value.HasValue And value.Value), _
                        VisualStyles.CheckBoxState.CheckedNormal, _
                        VisualStyles.CheckBoxState.MixedNormal)
        Dim size = RadioButtonRenderer.GetGlyphSize(e.Graphics, state)
        Dim location = New Point((e.CellBounds.Width - size.Width) / 2, _
                                (e.CellBounds.Height - size.Height) / 2)
        location.Offset(e.CellBounds.Location)
        CheckBoxRenderer.DrawCheckBox(e.Graphics, location, state)
        e.Handled = True
    End If
End Sub

To test the solution you can add a column to grid this way:

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles MyBase.Load
    Dim C1 = New DataGridViewCheckBoxColumn()
    C1.DataPropertyName = "C1"
    C1.HeaderText = "C1"
    C1.TrueValue = 1
    C1.FalseValue = 0
    Me.DataGridView1.Columns.Add(C1)
    Me.DataGridView1.Rows.Add(DirectCast(1, Object))
    Me.DataGridView1.Rows.Add(DirectCast(0, Object))
    Me.DataGridView1.AllowUserToAddRows = False
End Sub

And this will be the result:

To draw the unchecked (in fact mixed state) in red color, after calling CheckBoxRenderer.DrawCheckBox use this code:

If (state = VisualStyles.CheckBoxState.MixedNormal) Then
    Dim rect = New Rectangle(location, size)
    rect.Inflate(-2, -2)
    e.Graphics.FillRectangle(Brushes.Red, rect)
End If

edited Sep 17 '16 at 12:21

answered Sep 17 '16 at 10:55

Reza Aghaei

120,393
18
203
398

Sir can you please encorporate your code on the form load on my code? please – Sep 17 '16 at 11:08
It doesn't have anything to do with Form Load. Handle `CellPainting` event of grid. `If (e.ColumnIndex = 0 ` means use custom paint logic for column at index 0. – Reza Aghaei Sep 17 '16 at 11:11
I tried your code sir and the first 2nd column is the only row that has the right out put i will update my post sir – Sep 17 '16 at 11:18
Don't update the question. If there is any problem ask here. – Reza Aghaei Sep 17 '16 at 11:18
I got your question, in such cases if you edit the question the answer seems useless and the question will be confusing. – Reza Aghaei Sep 17 '16 at 11:20
Sir only the f2nd column has the right output, I needed that all of the columns except `month` will have the same out put i put it in my post – Sep 17 '16 at 11:20
Noted on that sir, This is my last update and I will focus on your answer – Sep 17 '16 at 11:21
No problem, If you want to draw other columns this way, you need to change the criteria. For example: `If (e.ColumnIndex <> 0 AndAlso e.RowIndex >= 0)` This way, the logic will apply on all columns except the first one. – Reza Aghaei Sep 17 '16 at 11:22
Or as another example: `If (((e.ColumnIndex = 1) Or (e.ColumnIndex = 2)) AndAlso e.RowIndex >= 0) Then` means use thelogic for column at index 1 and 2. If you learn the meaning of code, you can use any logic which you want. – Reza Aghaei Sep 17 '16 at 11:24
`(e.RowIndex >= 0)` is because we want to render the column for rows of grid and not headers of columns. (e.ColumnIndex >= 1 And e.ColumnIndex<=12) means use the logic for 2nd to 13th columns. – Reza Aghaei Sep 17 '16 at 11:26
Approve and + 1 – Sep 17 '16 at 11:31
Sir last one, Is there a possibility that instead of blue the filled one is color red something like that – Sep 17 '16 at 11:35
Unfortunately not simply. `CheckBoxRenderer` doesn't support using different color than windows theme. – Reza Aghaei Sep 17 '16 at 11:37
Oh my God, My boss is very conservative about this ,I thought he will be happy when he see it but then he wants it to red. He said "Its okay but I want it red" – Sep 17 '16 at 11:38
You can fill the rectangle of checkbox by red color. – Reza Aghaei Sep 17 '16 at 11:48
you mean my example right? the one in my post? my boss wants to color the shaded checkbox, i hope theres a way for that, i said to my sir "Sir please dont make Impossible,Possible" but he reply the I want you to do it :() – Sep 17 '16 at 11:51
It can be done. Not in the way you made the whole cell red. Just make the checkbox Red. – Reza Aghaei Sep 17 '16 at 11:52
Sir please last one help me do that :( – Sep 17 '16 at 11:54
As I said before, you should not edit the post, it makes the answer useless and the question confusing. In the painting method after calling `CheckBoxRenderer.DrawCheckBox` use the code which I posted. – Reza Aghaei Sep 17 '16 at 12:21
Its okay now sir no more editing post. TYSSSSSM for help. :D – Sep 17 '16 at 12:23

score 0 · Answer 2 · answered Sep 17 '16 at 10:45

You can utilize the DataGridView's VirtualMode and then use CellValueNeeded event to display your own content.

Here is what I suggest you should do,

Decide an image to be displayed instead of checkbox (example a green tick)
Set the DataGridView's VirtualMode property to true
After binding the DataGridView with your DataTable iterate through all month columns set the DataProperptyName as empty string (this important in order to trigger the event)
Create an event handler for DataGridView's CellValueNeeded event, in this event you will be receiving the Column Index and Row Index in event parameters. Use that to find the actual value behind and then return the green tick image (using e.Value) or return a blank image depending on the value.

Square Filled CheckBox in Datagridview

2 Answers2

Linked