FlexGrid for WinForms | ComponentOne
Column / Editors / CheckBox
In This Topic
    CheckBox
    In This Topic

    Display Checkbox for Boolean Values

    FlexGrid, by default, uses the checkbox editor for representing the Boolean values. That is, when the DataType property of a Row or Column 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 Format property of Row or Column object to string values.

    Default Checkbox Checkbox with Text Checkbox with Non-Boolean Value Three-state Checkbox
    Default checkbox Checkbox with text Non-boolean checkbox Three state checkbox

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

    // 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;
    
    ' 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 SetCellCheck method to add checkbox to any kind of cells. Along with row and column index, this method takes value of CheckEnum 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.

     // Set a two state checkbox in cell (3,2) in checked state
     c1FlexGrid1.SetCellCheck(3, 2, CheckEnum.Checked);                                
    
    ' 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 ImageAlignEnum 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.

    // Align the checkbox in right-center of the cell
    c1FlexGrid1.Cols["Verified"].ImageAlign = ImageAlignEnum.RightCenter;                
    
    ' 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 GlyphEnum which can be accessed using the Glyphs property. For more information about changing glyphs, see Custom Glyphs.

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

        // 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;                      
    
        ' 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 CheckEnum. 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 event.

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

         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;
                 }
             }
          }            
    
    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