read only grid

Read only grids in Appian do not support cell merging.

Depending on your use case, an option could be to re-create a grid using columns layouts and card layouts.

Hi,KM  As Stefan Helzle  mentioned, the grid would not support cell merging, if you try to do it with some richtextfileds in the grid it would be very complex. It would be easier if you would change your approach to cards/column layouts

Just to add on what others have mentioned, you would need to reconstruct your data into a map to differentiate your data and then use the cards and columns within the data, you can run this in a foreach and minimize your code.

i have tried with card layout and grid, but am getting scroll bar which will not know for which header which data is. given width as well but no use.

i have to display 12 columns 

Please share the complete code and also your data sample

this is the requirement and data will be all integer value except first column 

for the first header i have used like

card layout

  side by side layout

      side by side item

  read only grid

I would prefer what Mike has mentioned below. But If this works for you, you can use the below code

a!localVariables(
  local!data: rule!KS_getRecordToDetlete(),
  {
    a!forEach(
      items: local!data,
      expression: {
        a!columnsLayout(
          spacing: "NONE",
          marginBelow: "NONE",
          marginAbove: "NONE",
          columns: {
            a!columnLayout(
              width: "NARROW_PLUS",
              contents: a!cardLayout(
                marginAbove: "NONE",
                marginBelow: "NONE",
                padding: "NONE",
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "",
                      style: "STRONG",
                      showWhen: fv!isFirst
                    ),
                    align: "CENTER"
                  ),
                  a!gridField(
                    data: fv!item,
                    columns: a!gridColumn(
                      label: if(fv!isFirst, "Name of Borrower", ""),
                      value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{6436f9d3-5bce-4f75-b74a-ffa968c3ce41}name'],
                      align: "CENTER",
                      width: "NARROW"
                    )
                  )
                }
              )
            ),
            a!columnLayout(
              width: "NARROW_PLUS",
              contents: a!cardLayout(
                marginAbove: "NONE",
                marginBelow: "NONE",
                padding: "NONE",
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "",
                      style: "STRONG",
                      showWhen: fv!isFirst
                    ),
                    align: "CENTER"
                  ),
                  a!gridField(
                    data: fv!item,
                    columns: a!gridColumn(
                      label: if(fv!isFirst, "CIF", ""),
                      value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{2c5fe606-38cb-47bf-8e46-a8df08483640}CIF'],
                      align: "CENTER",
                      width: "NARROW"
                    )
                  )
                }
              )
            ),
            a!columnLayout(
              contents: a!cardLayout(
                padding: "NONE",
                marginAbove: "NONE",
                marginBelow: "NONE",
                contents: {
                  a!richTextDisplayField(
                    marginAbove: "NONE",
                    value: a!richTextItem(
                      text: "Trade Paper Limit",
                      style: "STRONG",
                      showWhen: fv!isFirst
                    ),
                    align: "CENTER"
                  ),
                  a!gridField(
                    data: fv!item,
                    columns: {
                      a!gridColumn(
                        label: if(fv!isFirst, "Max", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{e9cfe8d7-31c2-49a6-8daa-6b82905d4b67}tplMax'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "Avg", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{d6f465f9-6a96-493f-b254-f63c3529fce3}tplAvg'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "As Of Date", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{392f0d4c-1dbe-4ea0-b538-954940158be2}tplAsOfDate'],
                        align: "CENTER",
                        width: "NARROW"
                      )
                    }
                  )
                }
              )
            ),
            a!columnLayout(
              contents: a!cardLayout(
                padding: "NONE",
                marginAbove: "NONE",
                marginBelow: "NONE",
                contents: {
                  a!richTextDisplayField(
                    marginAbove: "NONE",
                    value: a!richTextItem(
                      text: "Money Market",
                      style: "STRONG",
                      showWhen: fv!isFirst
                    ),
                    align: "CENTER"
                  ),
                  a!gridField(
                    data: fv!item,
                    columns: {
                      a!gridColumn(
                        label: if(fv!isFirst, "Max", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{2b4a6db7-9591-42bf-bc5b-9f5075d49060}MMMax'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "Avg", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{d98039c2-6865-4298-b23b-1aa4e5fd53fd}MMAvg'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "As Of Date", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{9ff4d628-7700-4dd0-96a9-08153cb1f0af}MMAsOfDate'],
                        align: "CENTER",
                        width: "NARROW"
                      )
                    }
                  )
                }
              )
            ),
            a!columnLayout(
              contents: a!cardLayout(
                padding: "NONE",
                marginAbove: "NONE",
                marginBelow: "NONE",
                contents: {
                  a!richTextDisplayField(
                    marginAbove: "NONE",
                    value: a!richTextItem(
                      text: "Investment(Bonds)",
                      style: "STRONG",
                      showWhen: fv!isFirst
                    ),
                    align: "CENTER"
                  ),
                  a!gridField(
                    data: fv!item,
                    columns: {
                      a!gridColumn(
                        label: if(fv!isFirst, "Max", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{00c5c4d7-939c-4b65-92cb-1b28e05e56d3}IBMax'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "Avg", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{0de1c7be-2690-412e-a7f8-160f8150e509}IbAvg'],
                        align: "CENTER",
                        width: "NARROW"
                      ),
                      a!gridColumn(
                        label: if(fv!isFirst, "As Of Date", ""),
                        value: fv!item['recordType!{fb324deb-007c-495f-98dd-65e2ea1e6cdd}KS Record to Delete.fields.{b7d943b2-3c9d-4586-8468-c671b0afd2c2}IBAsOfDate'],
                        align: "CENTER",
                        width: "NARROW"
                      )
                    }
                  )
                }
              )
            )
          }
        )
      }
    )
  }
)

Replace the local!data with your data and the fields with your respective fields.

This will not work as it works like two independent components. You need to replace the whole read only grid with a nested columns/card construct, including your two header rows.

But, this looks like business forces you to rebuilt Excel. In my world, I try hard to push back such requirements, and try to deliver a more compelling and modern UI.

Generally instead of trying to re-invent the wheel, I'd suggest one of 2 potential approaches here (both being a compromise from your original design but accomplishing *most* of it)

1. just add the discrete columns, and make the names slightly more "wordy".  Instead of "Avg" and "Max" under the combined column "amount", just have "avg amount" / "max amount", and so-on for the other "combined" columns
2. alternatively, add only the "combined" column headers, and put both values for that row in the same cell, utilizing Rich Text and some formatting, it can look really nice - so for the "Amount" column, the row-cell will have 2 lines, saying i.e. "Avg: 63546", then "Max: 7465".  This version works and looks great (from having done similar myself in the past), with the caveat that it isn't really sortable.

Here's a self-contained proof of concept that reproduces your original data set pretty much 1:1 --

a!localVariables(
  local!myData: {
    {
      name: "abc",
      customer: "parle",
      avgAmount: 63546,
      maxAmount: 2465,
      avgMM: 363,
      maxMM: 6575,
      avgBond: 6,
      maxBond: 9,
      avgInvest: 24723,
      maxInvest: 76435
    },
    {
      name: "xyz",
      customer: "samsung",
      avgAmount: 438534,
      maxAmount: 7345,
      avgMM: 57683,
      maxMM: 7534,
      avgBond: 4,
      maxBond: 5,
      avgInvest: 7384,
      maxInvest: 45554
    },
  },
  
  a!sectionLayout(
    contents: {
      a!gridField(
        data: local!myData,
        spacing: "DENSE",
        columns: {
          a!gridColumn(
            label: "Name",
            value: fv!row.name
          ),
          a!gridColumn(
            label: "Customer",
            value: fv!row.customer
          ),
          a!gridColumn(
            label: "Amount",
            value: a!richTextDisplayField(
              value: {
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Avg: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.avgAmount
                  }
                ),
                char(10),
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Max: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.maxAmount
                  }
                )
              }
            )
          ),
          a!gridColumn(
            label: "Money Market",
            value: a!richTextDisplayField(
              value: {
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Avg: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.avgMM
                  }
                ),
                char(10),
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Max: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.maxMM
                  }
                )
              }
            )
          ),
          a!gridColumn(
            label: "Bond",
            value: a!richTextDisplayField(
              value: {
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Avg: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.avgBond
                  }
                ),
                char(10),
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Max: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.maxBond
                  }
                )
              }
            )
          ),
          a!gridColumn(
            label: "Investment",
            value: a!richTextDisplayField(
              value: {
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Avg: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.avgInvest
                  }
                ),
                char(10),
                a!richTextItem(
                  text: {
                    a!richTextItem(
                      text: "Max: ",
                      size: "SMALL",
                      style: "STRONG"
                    ),
                    fv!row.maxInvest
                  }
                )
              }
            )
          ),

        }
      )
    }
  )
)