Skip to main content
V
vijayp6380
November 9, 2023
Question

add checkbox in a column of editable grid

  • November 9, 2023
  • 5 replies
  • 0 views

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
    sriramk5349
    November 9, 2023

    Hi [mention:995c759ada07435883c8572879d4840b:e9ed411860ed4f2ba0265705b8793d05] ,

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

    V
    vijayp6380Author
    November 9, 2023

    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.

    V
    vikashk7323
    November 9, 2023

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

    Terms & ConditionsAccessibility statement