Expand/Collapse Rows in GridField

When you say "expand/collapse rows", what exactly do you mean?

My requirements is: I am having a column called symbol 
lets say for example we have abc value in symbol column for 5 rows this 5 rows should not display initially only 1 row should be displayed. when you click on abc value in symbol column then 5 rows should be displayed 

The documentation you linked above is for a pretty old version of Appian.  What Appian version are you actually working in, currently?  If you're at or above 19.2, then there is a pretty good current method to handle this using Rich Text controls directly in a grid.  If you're not in 19.2+ yet, it'll be a lot harder.

yes, but dose it work in a!gridField()

gridField (aka paging grid or read-only grid) is what i'm talking about.  You didn't answer my question, though?

reat only grid

My question was asking to confirm which Appian version you're using...

I am using 20.1

Ok good - in 20.1 you can use Rich Text to display items in individual cells of the read-only grid.  Using rich text, you can also make links that set a per-row local variable that will determine whether you show the initial (collapsed) data, or the expanded data.

Here's a sample based on what Mike is suggesting:

a!localVariables(
  local!prs: {
    {id: 1, customer: "John Smith"},
    {id: 2, customer: "Jane Doe"},
    {id: 3, customer: "Tony Stark"}
  },
  local!items: {
    {id: 1, pr_id: 1, product: "Donuts"},
    {id: 2, pr_id: 1, product: "Chocolate"},
    {id: 3, pr_id: 1, product: "Potato Chips"},
    {id: 4, pr_id: 2, product: "Cookies"},
    {id: 5, pr_id: 2, product: "Ice Cream"},
    {id: 6, pr_id: 3, product: "Jellybeans"},
    {id: 7, pr_id: 3, product: "Cake"}
  },
  a!gridField(
    label: "Expandable Grid",
    data: local!prs,
    columns: {
      a!gridColumn(
        label: "ID",
        value: fv!row.id
      ),
      a!gridColumn(
        label: "Customer",
        value: fv!row.customer
      ),
      a!gridColumn(
        label: "Items",
        value: a!richTextDisplayField(
          value: a!localVariables(
            local!showDetails: false,
            if(
              local!showDetails,
              {
                a!richTextBulletedList(
                  items:a!forEach(
                    items: index(
                      local!items,
                      wherecontains(
                        tointeger(fv!row.id),
                        tointeger(local!items.pr_id)
                      ),
                      {}
                    ),
                    expression: fv!item.product
                  )
                ),
                a!richTextItem(
                  text: "(Hide Details)",
                  link: a!dynamicLink(
                    value: false,
                    saveInto: local!showDetails
                  )
                )
              },
              a!richTextItem(
                text: "(Show Items)",
                link: a!dynamicLink(
                  value: true,
                  saveInto: local!showDetails
                )
              )
            )
          )
        )
      )
    }
  )
)

Here's a sample based on what Mike is suggesting:

a!localVariables(
  local!prs: {
    {id: 1, customer: "John Smith"},
    {id: 2, customer: "Jane Doe"},
    {id: 3, customer: "Tony Stark"}
  },
  local!items: {
    {id: 1, pr_id: 1, product: "Donuts"},
    {id: 2, pr_id: 1, product: "Chocolate"},
    {id: 3, pr_id: 1, product: "Potato Chips"},
    {id: 4, pr_id: 2, product: "Cookies"},
    {id: 5, pr_id: 2, product: "Ice Cream"},
    {id: 6, pr_id: 3, product: "Jellybeans"},
    {id: 7, pr_id: 3, product: "Cake"}
  },
  a!gridField(
    label: "Expandable Grid",
    data: local!prs,
    columns: {
      a!gridColumn(
        label: "ID",
        value: fv!row.id
      ),
      a!gridColumn(
        label: "Customer",
        value: fv!row.customer
      ),
      a!gridColumn(
        label: "Items",
        value: a!richTextDisplayField(
          value: a!localVariables(
            local!showDetails: false,
            if(
              local!showDetails,
              {
                a!richTextBulletedList(
                  items:a!forEach(
                    items: index(
                      local!items,
                      wherecontains(
                        tointeger(fv!row.id),
                        tointeger(local!items.pr_id)
                      ),
                      {}
                    ),
                    expression: fv!item.product
                  )
                ),
                a!richTextItem(
                  text: "(Hide Details)",
                  link: a!dynamicLink(
                    value: false,
                    saveInto: local!showDetails
                  )
                )
              },
              a!richTextItem(
                text: "(Show Items)",
                link: a!dynamicLink(
                  value: true,
                  saveInto: local!showDetails
                )
              )
            )
          )
        )
      )
    }
  )
)

Thanks you Peter Lewis

I have got the exact requirement i have posted the question

https://community.appian.com/discussions/f/user-interface/18909/collapse-expand-the-rows-inside-a-grid-based-on-column

Ok did the sample code work for you? If not, can you describe what you are looking for?

Hi Peter,

I have a requirement where I need to hide full row .

Do we need to apply showdetails condition to all the columns