Skip to main content
Known Participant
Nov 9, 2023 6:07 AM UTC
Question

add checkbox in a column of editable grid

I want a column in an editable grid where I have checkboxes for every cell in that column. User can select yes or no option

    5 replies

    sriramk5349
    Inspiring
    Nov 9, 2023 6:29 AM UTC

    Hi [mention:995c759ada07435883c8572879d4840b:e9ed411860ed4f2ba0265705b8793d05] ,

    Please go through this interface recipie here. You can do the changes necessary for your requirement

    Known Participant
    Nov 9, 2023 6:36 AM UTC

    Thank yo for the reference.

    But, let's say I have a column called "IsActive" in the editable grid. I have to provide 2 options : true and false to the end user so that they can select whether each user in the grid is active or not.

    Known Participant
    Nov 9, 2023 9:45 AM UTC

    Hi, you can configure the grid like below

    a!localVariables(
      local!data:{
        a!map(
          name: null, tier: null
        )
      },
      {
      a!gridLayout(
        label: "Editable Grid",
        labelPosition: "ABOVE",
        headerCells: {
          a!gridLayoutHeaderCell(label: "Name"),
          a!gridLayoutHeaderCell(label: "Choice")
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(
            width: "NARROW"
          )
        },
        rows: {
          a!forEach(
            items: local!data,
            expression: a!gridRowLayout(
              contents: {
                a!textField(
                  label: "Name",
                  value: fv!item.name,
                  saveInto: fv!item.name
                ),
                a!checkboxField(
                  label: "Check box",
                  value: fv!item.tier,
                  saveInto: fv!item.tier,
                  choiceLabels: {1,2,3},
                  choiceValues: {1,2,3}
                )
              }
              
            )
          )
        },
        addRowLink: a!dynamicLink(
          label: "Add New Customer",
          saveInto: {
            a!save(local!data,
            append(local!data, local!data))
          }
        ),
        selectionSaveInto: {},
        validations: {},
        shadeAlternateRows: true
      )
    }
    )