Skip to main content
March 27, 2023
Question

Radio button in Grid

  • March 27, 2023
  • 12 replies
  • 0 views

Hi Everyone,

Is there any way to include radio button instead of check box in read only grid for selection?

    12 replies

    harshitb6843
    March 27, 2023

    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. 

    harshitb6843
    March 27, 2023

    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. 

    harshitb6843
    March 27, 2023

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