Radio button in Grid

RE: Radio button in Grid

Mike Schmitt — Tue, 05 Dec 2023 20:24:15 GMT

[quote userid="201015" url="~/discussions/f/user-interface/28193/radio-button-in-grid/122794"]How can we select multiple values in this grid through radio button and unselect them.[/quote]

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.

RE: Radio button in Grid

Rahul009 — Tue, 05 Dec 2023 19:18:37 GMT

Hi Mike Schmitt ,

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

Thanks!

RE: Radio button in Grid

Mike Schmitt — Fri, 31 Mar 2023 13:57:08 GMT

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

RE: Radio button in Grid

Harshit Bumb (Appyzie) — Fri, 31 Mar 2023 12:56:43 GMT

Good find, Sanchit!

RE: Radio button in Grid

sanchitg0002 — Fri, 31 Mar 2023 12:52:32 GMT

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

RE: Radio button in Grid

shubhamy0005 — Fri, 31 Mar 2023 11:02:34 GMT

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

RE: Radio button in Grid

Harshit Bumb (Appyzie) — Fri, 31 Mar 2023 10:15:43 GMT

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?

RE: Radio button in Grid

shubhamy0005 — Fri, 31 Mar 2023 10:02:43 GMT

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:

RE: Radio button in Grid

Mike Schmitt — Mon, 27 Mar 2023 13:57:52 GMT

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

RE: Radio button in Grid

Harshit Bumb (Appyzie) — Mon, 27 Mar 2023 10:27:25 GMT

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

RE: Radio button in Grid

Harshit Bumb (Appyzie) — Mon, 27 Mar 2023 10:19:20 GMT

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.

RE: Radio button in Grid

Harshit Bumb (Appyzie) — Mon, 27 Mar 2023 10:10:49 GMT

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.