Display Members of Selected Groups in Grid Columns

Do you have a specific question?

I am stuck at displaying the group of members in grid. How should I do that?

I think your approach is wrong. Grids are used to show set of data in tabular form. Where as your data (in your code) it's more like a tree or hierarchy  . 

So can you suggest me correct approach, where display the members of those selected groups? 

So can you suggest me correct approach, where display the members of those selected groups? 

a!localVariables(
  local!selectedGroup: ri!initialGroup,
  local!distinctUsers: if(
    a!isNullOrEmpty(local!selectedGroup),
    "Please select a group",
    a!flatten(
      a!forEach(
        items: local!selectedGroup,
        expression:a!localVariables(
          local!group:fv!item,
          a!forEach(
          items: getdistinctusers({fv!item}),
          expression: a!map(id: fv!index, Group:local!group,Members: fv!item )
        ))
      )
    )
  ),
  local!groupName: a!forEach(
    items: local!selectedGroup,
    expression: getgroupnames(fv!item)
  ),
  local!pagingInfo: a!pagingInfo(startIndex: 1, batchSize: 10),
  {
    a!sectionLayout(
      label: "User & Group Management",
      contents: {
        a!pickerFieldGroups(
          label: "Pick Groups",
          labelPosition: "ABOVE",
          maxSelections: 5,
          value: ri!initialGroup,
          saveInto: ri!initialGroup,
          
        )
      }
    ),
    a!sectionLayout(
      label: "Group members",
      contents: {
        a!columnsLayout(
          columns: a!forEach(
            items: local!selectedGroup,
            expression: a!columnLayout(
              a!gridField(
                label: "",
                labelPosition: "ABOVE",
                data: index(
                  local!distinctUsers,
                  wherecontains(
                    touniformstring(fv!item),
                    touniformstring(local!distinctUsers.Group)
                  )
                ),
                columns: a!gridColumn(
                  label: group(
                    groupId: togroup(fv!item),
                    property: "groupName"
                  ),
                  value: fv!row.Members
                ),
                pagingSaveInto: local!pagingInfo
              )
            )
          )
        )
      }
    )
  }
)

It's not exactly what you looking for but i did few changes to your code (It can be modified to fit for better practices). I used Columns layout have a look into it. FYI: It's not the better approach

Thanks that' what I was trying but with grid eventually it also helps me understand. I understood it's not a better approach. Is it possible for us to add or remove members from the group in columns layout?

Yes , you can do that. Grid is there Inside columnslayout ,you can write selection for grid and trigger a process to remove members or you can use a!removeGroupMembers()

Thank you very much for clarifying the doubt.