Restricting duplicate drop-down rows in editable grid

Question

I have this requirement. 
 We have two columns in editable grid which are of drop-down fields.and we select one value in each column of first row and we add second row now and in this row we select same value that was given in the first row first column ,the second row second column should not display the value of first row second column value in the drop-down . A proper validation would be very helpful 
 Regards, 
 Satya

Dave Lewis · Answer

The way I'm thinking I would solve this problem is to have 2 copies of the same array of choice Labels and choice Values, then remove() from both lists for the second set at the index of the one chosen from the first set. 
 {1, 2, 3} {Choice 1, Choice 2, Choice 3} User selects choice 2, 
 remove(local!choiceValues2, whereContains(local!choiceLabels1, "choice 2")) 
 remove(local!choiceLabels2, whereContains(local!choice Labels 1, "choice 2")) 
 It would probably be best to leave the second one disabled until you've made a selection from the first one, and disable the first one after you've made a selection in the second one, or reset the second dropdown choice to null every time you change the first, otherwise you'll find yourself making a pink box every time you remove the one you have currently selected from the list.

Mike Schmitt · Answer

Here's the example solution I've prepared for you - it uses a slightly simplified version of your Categories/Segments grid (for example purposes) and assumes that Segments are children of Categories but have unique Segment IDs. I use a!forEach over the array of possible Segment choices, in the context of a single grid row, to check whether that Segment has already been selected in another row, in which case it's excluded from the dropdown list.

BTW, this code uses the 19.2 variable definitions, if you're still pre-19.2 then you will need to adjust it to remove a!localVariables() and add load() and with() statements.

a!localVariables(
  local!enableDebug: a!refreshVariable(
    value: false(),
    refreshAlways: true()
  ),
  local!categories: {
    {
      categoryId: 1,
      categoryName: "Firm",
      segments: {
        {
          segmentId: 1,
          segmentName: "Global Credit"
        },
        {
          segmentId: 2,
          segmentName: "Local Credit"
        }
      }
    },
    {
      categoryId: 2,
      categoryName: "Practice",
      segments: {
        {
          segmentId: 3,
          segmentName: "Practice 1"
        },
        {
          segmentId: 4,
          segmentName: "Practice 2"
        }
      }
    }
  },
  
  
  local!rowData: {
    {
      selectedCategory: null(),
      selectedSegment: null()
    }
  },
  
  
  a!sectionLayout(
    label: "Let's try this",
    contents: {
      a!gridLayout(
        headerCells: {
          a!gridLayoutHeaderCell(label: "Category"),
          a!gridLayoutHeaderCell(label: "Segment"),
          a!gridLayoutHeaderCell(label: "DEBUG", showWhen: local!enableDebug)
        },
        rows: a!forEach(
          local!rowData,

          a!localVariables(
            local!currentRowData: fv!item,
            local!currentSegments: if(
              isnull(local!currentRowData.selectedCategory),
              {},
              index(
                local!categories.segments,
                where( local!categories.categoryId = local!currentRowData.selectedCategory ),
                {}
              )[1]
            ),
            local!availableSegments: a!forEach(
              local!currentSegments,
              if(
                and(
                  tointeger(local!currentRowData.selectedSegment) <> tointeger(fv!item.segmentId),
                  contains(
                    local!rowData.selectedSegment, /* assumes all Segment IDs are unique across Categories */
                    fv!item.segmentId
                  )
                ),
                {},
                fv!item
              )
            ),
            a!gridRowLayout(
              id: fv!index,
              contents: {
                a!dropdownField(
                  label: "Category Dropdown",
                  choiceLabels: local!categories.categoryName,
                  choiceValues: local!categories.categoryId,
                  placeholderLabel: "Choose Category",
                  value: fv!item.selectedCategory,
                  saveInto: {
                    a!save(
                      fv!item.selectedSegment,
                      if(
                        save!value <> fv!item.selectedSegment,
                        null(),
                        fv!item.selectedSegment
                      )
                    ),
                    fv!item.selectedCategory
                  }
                ),
                if(
                  isnull(fv!item.selectedCategory),
                  a!textField(
                    disabled: true(),
                    value: "(select a category first)"
                  ),
                  a!dropdownField(
                    label: "Segment Dropdown",
                    choiceLabels: property(local!availableSegments, "segmentName", {}),
                    choiceValues: property(local!availableSegments, "segmentId", {}),
                    placeholderLabel: "Choose Segment",
                    value: fv!item.selectedSegment,
                    saveInto: {
                      fv!item.selectedSegment
                    }
                  )
                ),

                a!paragraphField(
                  label: "DEBUG",
                  showWhen: local!enableDebug,
                  height: "TALL",
                  
                  value: a!forEach(
                    local!currentSegments,
                    fv!item.segmentId
                  ),
                  readOnly: true()
                )
              }
            )
          )
        ),
        
        addRowLink: a!dynamicLink(
          label: "Add Row",
          saveInto: {
            a!save(
              local!rowData,
              append(
                local!rowData,
                {
                  selectedCategory: null(),
                  selectedSegment: null()
                }
              )
            )
          }
        )
      )
    }
  )
)

Restricting duplicate drop-down rows in editable grid

Top Replies