Editable Grid Row Selection

Hello,
I’m using selectable Editable Grid (gridLayout) to display records & want to restrict the selection of rows based on the status field (for example, disable selection for completed records).

Appian 19.1 doesn’t provide granular control over selection out of the box. So, I’m using selectionSaveInto to get rid of unwanted rows from selectionValue. I’m able to see that selectionValue array gets populate with correct indexes, but the checkbox remains selected on UI for invalid rows as well.

But the expected behavior should be to let the user selects any row & system to unselect invalid rows automatically.
I also noticed that the same code works If the selection style is row highlight instead of checkbox.

=load(

  local!employees: {

    { id: 1, firstName: "John" , lastName: "Smith" , department: "Engineering" , status: "completed" },

    { id: 2, firstName: "Michael" , lastName: "Johnson" , department: "Finance" , status: "In-progress"},

    { id: 3, firstName: "Mary", lastName: "Reed" , department: "Engineering" , status: "In-progress"  },

  },

  local!selectedRow: tointeger(

    {}

 ),

  a!formLayout(

    label: "SelectedRow"&local!selectedRow,

    contents: {

      a!gridLayout(

        totalCount: count(local!employees),

        /*ROW_HIGHLIGHT works okay */

        /*selectionStyle:"ROW_HIGHLIGHT",*/  

        headerCells: {

          a!gridLayoutHeaderCell(label: "First Name" ),

          a!gridLayoutHeaderCell(label: "Last Name" ),

          a!gridLayoutHeaderCell(label: "Department" ),

          a!gridLayoutHeaderCell(label: "status" )

        },

      

        columnConfigs: {

          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),

          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),

          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 ),

          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight:3 )

        },

       

        rows: a!forEach(

          items: local!employees,

          expression: a!gridRowLayout(

            contents: {

              a!textField(label: "first name " & fv!index,

                value: fv!item.firstName,

                saveInto: fv!item.firstName,

                readOnly:  true

              ),

              a!textField(

                label: "last name " & fv!index,

                value: fv!item.lastName,

                saveInto: fv!item.lastName,

                readOnly: true

              ),

              a!dropdownField(

                label: "department " & fv!index,

                placeholderLabel: "-- Select -- ",

                choiceLabels: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },

                choiceValues: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },

                value: fv!item.department,

                saveInto: fv!item.department,

                disabled: true

              ),

              a!textField(

                label: "Status " & fv!index,

                value: fv!item.status,

                saveInto: fv!item.status,

                readOnly:true

              )

            },

            id: fv!index

         

        )

      

        ),

        selectable: true,

        selectionValue: local!selectedRow,

        selectionSaveInto: {

          a!save(

            local!selectedRow,

            a!forEach(

              items: a!flatten(

                save!value

              ),

              expression: if(

                local!employees[fv!item].status = "completed",

                {},

                fv!item

              )

            )

          )},

        rowHeader: 1

      )

    }

  )

)