Using a checkbox for String values "1" and "0" instead of true and false

in Winforms, I can use a CheckEditorDataFilter (see below) to transform the boolean values that a checkeditor usually works with to string values.

if the value in the field is “1”, the checkbox is checked, and if it is “0” (or String.Empty) the checkbox is not checked.

And when I check the checkbox, it will flip a “1” to a “0” and vice versa.

is this possible with the igx-grid?

Public Class CheckEditorDataFilter
    Implements Infragistics.Win.IEditorDataFilter
    Public Function Convert(ByVal args As Infragistics.Win.EditorDataFilterConvertArgs) As Object Implements Infragistics.Win.IEditorDataFilter.Convert

        If args.Value & "" = "Received" Then Return "0"

        Select Case args.Direction
            Case Infragistics.Win.ConversionDirection.EditorToOwner
                args.Handled = True
                Select Case CType(args.Value, CheckState)
                    Case CheckState.Checked
                        Return "1"
                    Case CheckState.Unchecked
                        Return "0"
                    Case CheckState.Indeterminate
                        Return "0"
                        'Return String.Empty
                    Case Else
                        Return "0"
                        'Return CheckState.Indeterminate
                End Select
            Case Infragistics.Win.ConversionDirection.OwnerToEditor
                args.Handled = True
                If args.Value & "" = "1" Then
                    'Return 1
                    Return CheckState.Checked
                ElseIf args.Value & "" = "0" Then
                    'Return 0
                    Return CheckState.Unchecked
                Else
                    Return CheckState.Unchecked
                    'Return CheckState.Indeterminate
                End If
            Case Else
                Return "0"
                'Return CheckState.Indeterminate
        End Select
    End Function

End Class

Hello,

After carefully reviewing your requirements, I have prepared a StackBlitz sample to demonstrate one way to achieve the desired functionality in IgniteUI for Angular. Below is a brief explanation of the solution implemented:

Solution Overview:

1. Grid Configuration:
   • The igx-grid is configured to handle a string field Status where the values '1' and '0' are used to represent checked and unchecked states respectively.
2. Cell Display Template:
   • A custom cell template displays a check icon when the value is '1' and a clear icon when the value is '0'. This is achieved using conditional rendering within the igxCell template.
3. Cell Editor Template:
   • A custom cell editor template includes an igx-checkbox. The checkbox's checked state is bound to the cell's edit value. When the checkbox state changes, an event handler updates the cell's edit value accordingly.
4. Styling:
   • Both the display and editor templates are styled using a CSS class checkbox-style to ensure the checkbox and icons are centered within the cell.
5. Handling Checkbox Changes:
   • A method onCheckboxChange updates the cell's edit value based on the checkbox state, converting the boolean state to '1' or '0'.

Here is a snippet of the code implemented:

 

You can view and interact with the full implementation on StackBlitz.

Please review the sample and let me know if you have any questions or need further adjustments. I'm looking forward to your feedback.

Best Regards,

Arkan Ahmedov

Infragistics

Arcan – I think I verified your answer too soon.  Running your StackBlitz, if you click on each checkbox in the grid (without changing it) you will notice that the value shown in the checkeditor (once you clicked in that cell) does not reflect the value in the checkbox before you clicked on it.  It always shows a cleared checkbox – until you change one of them to a checked checkbox, and then every time you click on the status cell in a different row, the value presented in the checkeditor is checked.

I made a screen2gif for you and I am going to try to insert it here.

scroll to the right to see the Status column action that I described.

Hello,

Thank you for your feedback and for providing the screen recording to illustrate the issue. I have carefully reviewed the behavior you described and have revised the implementation to ensure that the checkbox in the cell editor accurately reflects the underlying value.

To address the issue where the checkbox did not initially show the correct value when editing a cell, I have made the following updates:

Utilized the cellEditEnter Event: This allows us to correctly update the checkboxModel property when a cell enters edit mode.

Updated the checkboxModel: Ensures that the checkbox accurately reflects the cell's value before any changes are made.

This updated implementation should resolve the issue where the checkbox did not accurately reflect the cell's value upon entering edit mode. Please review the revised implementation on StackBlitz and let me know if it meets your requirements.

Thank you for your patience and cooperation. If you have any further questions or need additional adjustments, feel free to reach out.

Best Regards,

Arkan Ahmedov

Infragistics