# CheckBox

FlexGrid provides built-in checkbox editor to display Boolean values. Learn more about checkbox cells and how to implement other related operations in FlexGrid.

## Content

## Display Checkbox for Boolean Values

FlexGrid, by default, uses the checkbox editor for representing the Boolean values. That is, when the <span data-popup-content="This property is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET\u003c/a\u003e." data-popup-title="DataType" data-popup-theme="ui-tooltip-green qtip-green">DataType</span> property of a <span data-popup-content="This class is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET\u003c/a\u003e." data-popup-title="Row" data-popup-theme="ui-tooltip-green qtip-green">Row</span> or <span data-popup-content="This class is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET\u003c/a\u003e." data-popup-title="Column" data-popup-theme="ui-tooltip-green qtip-green">Column</span> object is set to **Bool** type, a checkbox appears in the cells and user can toggle the value of an editable cell simply by clicking it.

To disable this default behavior and display text value instead of a checkbox in a Bool type, you can set the <span data-popup-content="This property is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET\u003c/a\u003e." data-popup-title="Format" data-popup-theme="ui-tooltip-green qtip-green">Format</span> property of **Row** or **Column** object to string values.

| Default Checkbox | Checkbox with Text | Checkbox with Non-Boolean Value | Three-state Checkbox |
| ---------------- | ------------------ | ------------------------------- | -------------------- |
| ![Default checkbox](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/checkbox-default.png) | ![Checkbox with text](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/checbox-with-text.png) | ![Non-boolean checkbox](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/checbox-non-boolean.png) | ![Three state checkbox](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/checkbox-tristate.png) |

Use the code below to set checkbox type editor in a WinForms FlexGrid column and configure it further.

```csharp
// Set the data type to Boolean (displays the checkbox automatically)
c1FlexGrid1.Cols["Verified"].DataType = typeof(Boolean);    
// Display the string values instead of displaying checkbox
c1FlexGrid1.Cols["Verified"].Format = "Yes;No";
// Enables text alongside checkbox for the boolean column
c1FlexGrid1.Cols["Verified"].ImageAndText = true;
```

```vbnet
' Set the data type to Boolean (displays the checkbox automatically)
c1FlexGrid1.Cols("Verified").DataType = GetType(Boolean)
' Display the string values instead of displaying checkbox
c1FlexGrid1.Cols("Verified").Format = "Yes;No"
' Enables text alongside checkbox for the boolean column
c1FlexGrid1.Cols("Verified").ImageAndText = True     
```

## Display Checkbox for Non-Boolean Values

In unbound mode, you can display a checkbox along with any non-boolean text as well. You can use the <span data-popup-content="This method is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET\u003c/a\u003e." data-popup-title="SetCellCheck" data-popup-theme="ui-tooltip-green qtip-green">SetCellCheck</span> method to add checkbox to any kind of cells. Along with row and column index, this method takes value of <span data-popup-content="This enumeration is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022C1.Win.FlexGrid.5~C1.Win.FlexGrid.CheckEnum.html\u0022\u003e.NET\u003c/a\u003e." data-popup-title="CheckEnum" data-popup-theme="ui-tooltip-green qtip-green">CheckEnum</span> enumeration as one of its parameters to specify the state of checkbox at the time of rendering.

Following code demonstrates how you can display checkbox for non-boolean values.

```csharp
// Set a two state checkbox in cell (3,2) in checked state
 c1FlexGrid1.SetCellCheck(3, 2, CheckEnum.Checked);                                
```

```vbnet
' Set a two state checkbox in cell (3,2) in checked state
c1FlexGrid1.SetCellCheck(3, 2, CheckEnum.Checked)
```

## Set Checkbox Alignment

To set position of checkbox in the cell, you need to use **ImageAlign** property of the **Row** or **Column** object. This property accepts values from the <span data-popup-content="This enumeration is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022C1.Win.FlexGrid.5~C1.Win.FlexGrid.ImageAlignEnum.html\u0022\u003e.NET\u003c/a\u003e." data-popup-title="ImageAlignEnum" data-popup-theme="ui-tooltip-green qtip-green">ImageAlignEnum</span> enumeration which lets you hide, tile, stretch or position the image.

Align the checkbox to display in center of a WinForms FlexGrid column using the code below.

```csharp
// Align the checkbox in right-center of the cell
c1FlexGrid1.Cols["Verified"].ImageAlign = ImageAlignEnum.RightCenter;                
```

```vbnet
' Align the checkbox in right-center of the cell
c1FlexGrid1.Cols("Verified").ImageAlign = ImageAlignEnum.RightCenter      
```

## Change the Checkbox Image

To change icon image of different states of checkbox, you can use the <span data-popup-content="This enumeration is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022C1.Win.FlexGrid.5~C1.Win.FlexGrid.GlyphEnum.html\u0022\u003e.NET\u003c/a\u003e." data-popup-title="GlyphEnum" data-popup-theme="ui-tooltip-green qtip-green">GlyphEnum</span> which can be accessed using the <span data-popup-content="This property is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022C1.Win.FlexGrid.5~C1.Win.FlexGrid.C1FlexGridBase~Glyphs.html\u0022\u003e.NET\u003c/a\u003e." data-popup-title="Glyphs" data-popup-theme="ui-tooltip-green qtip-green">Glyphs</span> property. For more information about changing glyphs, see [Custom Glyphs](/componentone/docs/win/online-flexgrid/features/styling-and-appearance/custom-appearance/custom-glyph).

You can change the images to be used for various checkbox states in WinForms FlexGrid using the code below.

```csharp
// Sets custom images as checkbox icons
    Image imgChk = new Bitmap("../../Resources/Images/checked.png");
Image imgUnchk = new Bitmap("../../Resources/Images/unchecked.png");
Image imgGray = new Bitmap("../../Resources/Images/null.png");
c1FlexGrid1.Glyphs[GlyphEnum.Checked] = imgChk;
c1FlexGrid1.Glyphs[GlyphEnum.Unchecked] = imgUnchk;
c1FlexGrid1.Glyphs[GlyphEnum.Grayed] = imgGray;                      
```

```vbnet
' Sets custom images as checkbox icons
    Dim imgChk As Image = New Bitmap("../../Resources/Images/checked.png")
Dim imgUnchk As Image = New Bitmap("../../Resources/Images/unchecked.png")
Dim imgGray As Image = New Bitmap("../../Resources/Images/null.png")
c1FlexGrid1.Glyphs(GlyphEnum.Checked) = imgChk
c1FlexGrid1.Glyphs(GlyphEnum.Unchecked) = imgUnchk
c1FlexGrid1.Glyphs(GlyphEnum.Grayed) = imgGray        
```

## Use Three State Checkbox

In addition to usual two state checkbox, FlexGrid lets you create three state checkbox as well. The simplest way of enabling the third state is through the <span data-popup-content="This enumeration is available in both \u003ca href=\u0022/componentone/docs/win/online-flexgrid/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022C1.Win.FlexGrid.5~C1.Win.FlexGrid.CheckEnum.html\u0022\u003e.NET\u003c/a\u003e." data-popup-title="CheckEnum" data-popup-theme="ui-tooltip-green qtip-green">CheckEnum</span>. While a Boolean checkbox toggles between **CheckEnum.Checked** and **CheckEnum.Unchecked** states, the three states of a three state checkbox are represented by **CheckEnum.TSChecked**, **CheckEnum.TSUnchecked**, and **CheckEnum.TSGrayed**. However, in this case by default, user can not go back to null after switching to checked or unchecked state once. In order to cycle a checkbox between three states, you need to handle the [ValidateEdit](/componentone/api/win/online-flexgrid/dotnet-api/C1.Win.FlexGrid.10/C1.Win.FlexGrid.C1FlexGridBase.ValidateEdit.html) event.

Use the code below to create a three state checkbox in the WinForms FlexGrid.

```csharp
private void c1FlexGrid1_ValidateEdit(object sender, ValidateEditEventArgs e)
     {
   if (c1FlexGrid1.Cols[e.Col].Name == "Done")
    {
      e.Cancel = true;
      if (c1FlexGrid1[e.Row, e.Col].Equals(false))
        {
          c1FlexGrid1[e.Row, e.Col] = true;
        }
      else if (c1FlexGrid1[e.Row, e.Col].Equals(true))
        {
           c1FlexGrid1[e.Row, e.Col] = DBNull.Value;
        }
      else if (c1FlexGrid1[e.Row, e.Col].Equals(DBNull.Value))
        {
           c1FlexGrid1[e.Row, e.Col] = false;
        }
    }
 }            
```

```vbnet
Private Sub c1FlexGrid1_ValidateEdit(ByVal sender As Object, ByVal e As ValidateEditEventArgs)
    If c1FlexGrid1.Cols(e.Col).Name Is "Done" Then
        e.Cancel = True
        If c1FlexGrid1(e.Row, e.Col).Equals(False) Then
            c1FlexGrid1(e.Row, e.Col) = True
        ElseIf c1FlexGrid1(e.Row, e.Col).Equals(True) Then
            c1FlexGrid1(e.Row, e.Col) = DBNull.Value
        ElseIf c1FlexGrid1(e.Row, e.Col).Equals(DBNull.Value) Then
            c1FlexGrid1(e.Row, e.Col) = False
        End If
    End If
End Sub  
```

## See Also

**Blog**

[CheckedListBox Editor for FlexGrid](https://www.grapecity.com/blogs/checkedlistbox-editor-for-flexgrid)