Radio button in Grid

You can add it in a dedicated column and build custom logic around it so that when you select the radio button, it actually selects the grid row. 

But this is only possible in an editable grid. Not read-only grid. 
You can use an editable one and make it look like read-only if required, but please remember that it will have slower performance than read-only. 

Somewhat like this. 

a!localVariables(
  local!data: {
    { id: 1, name: "HarshitBumb.com" },
    { id: 2, name: "AppianSpace.com" },
    { id: 3, name: "chat.openai.com" }
  },
  local!selectedRow,
  {
    a!gridLayout(
      label: "Editable Grid",
      labelPosition: "ABOVE",
      headerCells: {
        a!gridLayoutHeaderCell(label: ""),
        a!gridLayoutHeaderCell(label: "Resources")
      },
      columnConfigs: {},
      rows: a!forEach(
        items: local!data,
        expression: a!gridRowLayout(
          id: fv!item.id,
          contents: {
            a!radioButtonField(
              choiceLabels: "",
              choiceValues: fv!item.id,
              value: if(
                tointeger(local!selectedRow) <> tointeger(fv!item.id),
                null,
                tointeger(local!selectedRow)
              ),
              saveInto: local!selectedRow
            ),
            a!richTextDisplayField(value: fv!item.name)
          }
        )
      ),
      selectionValue: local!selectedRow,
      selectionStyle: "ROW_HIGHLIGHT",
      selectable: true,
      selectionSaveInto: {},
      validations: {},
      shadeAlternateRows: true
    )
  }
)

Somewhat like this. 

a!localVariables(
  local!data: {
    { id: 1, name: "HarshitBumb.com" },
    { id: 2, name: "AppianSpace.com" },
    { id: 3, name: "chat.openai.com" }
  },
  local!selectedRow,
  {
    a!gridLayout(
      label: "Editable Grid",
      labelPosition: "ABOVE",
      headerCells: {
        a!gridLayoutHeaderCell(label: ""),
        a!gridLayoutHeaderCell(label: "Resources")
      },
      columnConfigs: {},
      rows: a!forEach(
        items: local!data,
        expression: a!gridRowLayout(
          id: fv!item.id,
          contents: {
            a!radioButtonField(
              choiceLabels: "",
              choiceValues: fv!item.id,
              value: if(
                tointeger(local!selectedRow) <> tointeger(fv!item.id),
                null,
                tointeger(local!selectedRow)
              ),
              saveInto: local!selectedRow
            ),
            a!richTextDisplayField(value: fv!item.name)
          }
        )
      ),
      selectionValue: local!selectedRow,
      selectionStyle: "ROW_HIGHLIGHT",
      selectable: true,
      selectionSaveInto: {},
      validations: {},
      shadeAlternateRows: true
    )
  }
)

At this point honestly I'd just consider using a rich text icon in the relevant column, mimicing the appearance of a radio button (i guess "circle-o" and "dot-circle-o" would suffice) where you just control which one is shown by a local variable storing the selection.  One benefit here would be you could (optionally) allow for "de-selecting" the row in question without needing to force selection of a different row (depending on what you actually want it to do, of course).

That would look something like this:

a!localVariables(
  local!choices: {
    {label: "asdf"},
    {label: "qwer"},
    {label: "zxcv"}
  },
  
  local!selectedIndex: tointeger(null()),
  
  a!gridField(
    data: local!choices,
    
    columns: {
      a!gridColumn(
        label: "",
        align: "CENTER",
        width: "ICON",
        value: a!richTextDisplayField(
          value: a!richTextItem(
            size: "MEDIUM",
            text: {
              a!richTextIcon(
                showWhen: local!selectedIndex <> fv!identifier,
                icon: "circle-o",
                link: a!dynamicLink(
                  saveInto: a!save(local!selectedIndex, fv!identifier)
                ),
                caption: "Click to Select",
                linkStyle: "STANDALONE"
              ),
              a!richTextIcon(
                showWhen: local!selectedIndex = fv!identifier,
                icon: "dot-circle-o",
                link: a!dynamicLink(
                  saveInto: a!save(local!selectedIndex, tointeger(null()))
                ),
                caption: "Click to De-Select",
                linkStyle: "STANDALONE"
              )
            }
          )
        )
      ),
      a!gridColumn(
        label: "Value",
        value: fv!row.label
      )
    }
  )
)

Hi Harshit,

After adding above logic I am getting error as shown below when selecting the radio button.

Also here is the snippet of radio button code:

Your code seems to be a bit different than mine. Why are you not using the same variable to capture the selected row and radio button selection?

After using the same variables for selected row and radio button, it gives same error.

Hi guys , shubhamy0005

After debugging this for quite some time, I found a weird issue.

Shubham, you are trying to provide choiceValues which are higher than the upper limit of integer type (i.e. 2147483647), your data.ciskey is having list of very large values which are not supported for display value parameter of radioButtonField, documentation says that it can take Any type values but it seems like this is not the case.

Let me explain more clearly with an example (I removed the grid selection for debugging).

When I provide choiceValues which are in limit, it works just perfect

But when I change the value for any of the id above int limit, it just do not knows how to handle that and says, All selected values must be present in the choiceValues array, but value was current item value and choice values was next item value.

If any one of you knows someone this should be addressed to from Appian team, then please mention them.

Now, the alternative for this particular use case is either you change the items on which you are iterating, like below code or change the data index to provide choiceValues which are supported, usually for choiceValues identifiers like 1,2,3 should be used.

a!localVariables(
  local!data: {
    { id: "2147483648", name: "HarshitBumb.com" },
    { id: "2147483649", name: "AppianSpace.com" },
    { id: "2147483641", name: "chat.openai.com" }
  },
  local!selectedRow,
  {
    a!gridLayout(
      label: "Editable Grid",
      labelPosition: "ABOVE",
      headerCells: {
        a!gridLayoutHeaderCell(label: ""),
        a!gridLayoutHeaderCell(label: "Resources")
      },
      columnConfigs: {},
      rows: a!forEach(
        items: enumerate(length(local!data)) + 1,
        expression: a!gridRowLayout(
          id: fv!item,
          contents: {
            a!radioButtonField(
              choiceLabels: "",
              choiceValues: fv!item,
              value: if(
                tointeger(local!selectedRow) <> tointeger(fv!item),
                null,
                local!selectedRow
              ),
              saveInto: local!selectedRow
            ),
            a!richTextDisplayField(value: local!data.name[fv!index])
          }
        )
      ),
      selectionValue: local!selectedRow,
      selectionStyle: "ROW_HIGHLIGHT",
      selectable: true,
      validations: {},
      shadeAlternateRows: true
    )
  }
)

Good find, Sanchit!

i dunno, the implementation i suggested seems quite a bit simpler to pull off

Hi Mike Schmitt ,

How can we select multiple values in this grid through radio button and unselect them.

Thanks!

Rahul009 said:

How can we select multiple values in this grid through radio button and unselect them.

i'd just use the normal checkboxes the grid has built-in, to be quite honest.  It's a completely separate use case from what the thread was originally asking about.