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
    )
  }
)

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
      )
    }
  )
)

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 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.