Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Walter Zielenski
335
Using a checkbox for String values "1" and "0" instead of true and false
posted

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

Parents
No Data
Reply
  • 140
    Verified Answer
    Offline posted

    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

Children