Selection in a grid using select all and deselect All functionality

Certified Associate Developer

HI All , 

I am trying to select the value in a readonly grid by select all and deselect all functionality in a grid . I am not able to achieve this . below is the snippet of my code . please help me  out . 

a!localVariables(
  local!data1: { { name: "Java" }, { name: "Python" } },
  local!selectedRowData,
  local!pageSize: 25,
  local!defaultActivityPaging: a!pagingInfo(
    1,
    local!pageSize,
    a!sortInfo("name", true)
  ),
  local!activityPaging: local!defaultActivityPaging,
  local!gridselectedsNumber,
  local!selection,
  local!isDeselectAllDisabled: or(
    length(local!data1) > 100,
    a!isNullOrEmpty(local!selection)
  ),
  local!isSelectAllDisabled: or(
    length(local!data1) > 100,
    length(local!data1) = 0
  ),
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!richTextDisplayField(
              value: {
                a!richTextIcon(
                  icon: "question-circle",
                  caption: "Selection will only apply to filtered records",
                  color: "#1D659C"
                ),
                " ",
                a!richTextIcon(
                  icon: "square-o",
                  caption: if(
                    local!isDeselectAllDisabled,
                    "No Records selected",
                    {}
                  ),
                  color: if(
                    local!isDeselectAllDisabled,
                    {},
                    "ACCENT"
                  )
                ),
                a!richTextItem(
                  text: " Deselect All",
                  link: if(
                    local!isDeselectAllDisabled,
                    {},
                    a!dynamicLink(
                      label: "Deselect All",
                      saveInto: {
                        a!save(
                          local!selection,
                          difference(
                            touniformstring(local!selection),
                            touniformstring(local!data1)
                          )
                        ),
                        
                      }
                    )
                  ),
                  linkStyle: "STANDALONE"
                ),
                " | ",
                a!richTextIcon(
                  icon: "check-square-o",
                  caption: if(
                    local!isSelectAllDisabled,
                    "Limit filtered list below " & 100 & " records",
                    {}
                  ),
                  linkStyle: "STANDALONE",
                  color: if(local!isSelectAllDisabled, {}, "ACCENT")
                ),
                a!richTextItem(
                  text: " Select All",
                  link: if(
                    local!isSelectAllDisabled,
                    {},
                    a!dynamicLink(
                      label: "Select All",
                      value: {},
                      saveInto: {
                        a!save(
                          local!selection,
                          reject(
                            a!isNullOrEmpty(),
                            union(
                              touniformstring(local!selection),
                              touniformstring(local!data1)
                            )
                          )
                        ),
                        a!save(
                          local!gridselectedsNumber,
                          local!selection
                        )
                      }
                    )
                  ),
                  linkStyle: "STANDALONE"
                )
              },
              align: "RIGHT"
            )
          }
        )
      },
      alignVertical: "BOTTOM"
    ),
    a!gridField(
      labelPosition: "ABOVE",
      data: local!data1,
      columns: {
        a!gridColumn(
          label: "name",
          sortField: "name",
          value: fv!row.name,
          align: "START"
        ),
        
      },
      pagingSaveInto: local!activityPaging,
      selectable: true,
      selectionValue: local!selection,
      selectionSaveInto: {
        local!selection,
        a!save(
          local!selectedRowData,
          append(local!selectedRowData, fv!selectedRows)
        ),
        a!save(
          local!selectedRowData,
          difference(
            local!selectedRowData,
            fv!deselectedRows
          )
        ),
        
      },
    )
  }
)

Thanks in advance

  Discussion posts and replies are publicly visible

  • Your code works for me for selecting/deselecting when I directly paste it into my environment.  What behavior are you seeing?

  • 0
    Certified Associate Developer
    in reply to Chris

    Hi Chris, when I am selecting a single value from grid , the selected row data variable works as expected . but when using select All link for selecting all data , I am not able see the selected value in grid and also the selected row data variable did not behave as expected 

  • Gotcha, sorry I missed the selection links on the top right!

    So the key is that the local!selection value holds the unique key of your selection, in the link you are saving the entire row to the selection.  You can see by using the select link with the issue (creates the top values in local!selection), then selecting with the checkbox in the grid (creates the bottom 2 selections):

    Instead, you would save the row IDs into the selection.  As a quick example, test after changing your local!selection save on line 88 to:

    a!save(local!selection,1+enumerate(2))

  • 0
    Certified Senior Developer

    a!localVariables(
      local!data1: { { name: "Java" }, { name: "Python" } },
      local!selectedRowData,
      local!pageSize: 25,
      local!defaultActivityPaging: a!pagingInfo(
        1,
        local!pageSize,
        a!sortInfo("name", true)
      ),
      local!activityPaging: local!defaultActivityPaging,
      local!selection,
      local!isDeselectAllDisabled: or(
        length(local!data1) > 100,
        a!isNullOrEmpty(local!selection)
      ),
      local!isSelectAllDisabled: or(
        length(local!data1) > 100,
        length(local!data1) = 0
      ),
      {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  value: {
                    a!richTextIcon(
                      icon: "question-circle",
                      caption: "Selection will only apply to filtered records",
                      color: "#1D659C"
                    ),
                    " ",
                    a!richTextIcon(
                      icon: "square-o",
                      caption: if(
                        local!isDeselectAllDisabled,
                        "No Records selected",
                        {}
                      ),
                      color: if(
                        local!isDeselectAllDisabled,
                        {},
                        "ACCENT"
                      )
                    ),
                    a!richTextItem(
                      text: " Deselect All",
                      link: if(
                        local!isDeselectAllDisabled,
                        {},
                        a!dynamicLink(
                          label: "Deselect All",
                          saveInto: {
                            a!save(local!selection, null),
                            a!save(local!selectedRowData, null)
                          }
                        )
                      ),
                      linkStyle: "STANDALONE"
                    ),
                    " | ",
                    a!richTextIcon(
                      icon: "check-square-o",
                      caption: if(
                        local!isSelectAllDisabled,
                        "Limit filtered list below " & 100 & " records",
                        {}
                      ),
                      linkStyle: "STANDALONE",
                      color: if(local!isSelectAllDisabled, {}, "ACCENT")
                    ),
                    a!richTextItem(
                      text: " Select All",
                      link: if(
                        local!isSelectAllDisabled,
                        {},
                        a!dynamicLink(
                          label: "Select All",
                          value: {},
                          saveInto: {
                            a!save(
                              local!selection,
                              enumerate(count(local!data1)) + 1
                            ),
                            a!save(local!selectedRowData, local!data1)
                          }
                        )
                      ),
                      linkStyle: "STANDALONE"
                    )
                  },
                  align: "RIGHT"
                )
              }
            )
          },
          alignVertical: "BOTTOM"
        ),
        a!gridField(
          labelPosition: "ABOVE",
          data: local!data1,
          columns: {
            a!gridColumn(
              label: "name",
              sortField: "name",
              value: fv!row.name,
              align: "START"
            ),
            
          },
          pagingSaveInto: local!activityPaging,
          selectable: true,
          selectionValue: local!selection,
          selectionSaveInto: {
            local!selection,
            a!save(
              local!selectedRowData,
              append(local!selectedRowData, fv!selectedRows)
            ),
            a!save(
              local!selectedRowData,
              difference(
                local!selectedRowData,
                fv!deselectedRows
              )
            ),
            
          },
          
        )
      }
    )

    Please try this code. I made some changes in select all and deselect all functionality.