For each loop to display the items side by side

Certified Senior Developer

Hi,

I have a gridfield inside a foreach loop. I need to display the items side by side. Currently it is displayed one below the other. I need to display 2 grids in each row. 

How to achieve this.

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer

    Hi  ,

    See the below code and check if thats what you are looking for. Odd elements will be displayed in 1st column and even elements in 2nd column

    {
      a!localVariables(
        local!num: { "a", "b", "c", "d", "e", "f", "g", "h" },
        a!sectionLayout(
          label: "",
          contents: {
            a!localVariables(
              local!even: reject(
                fn!isnull,
                a!forEach(
                  local!num,
                  if(mod(fv!index, 2) = 0, fv!item, "")
                )
              ),
              local!odd: reject(
                fn!isnull,
                a!forEach(
                  local!num,
                  if(mod(fv!index, 2) <> 0, fv!item, "")
                )
              ),
              a!forEach(
                items: enumerate(length(local!num) / 2),
                expression: a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Text",
                          labelPosition: "ADJACENT",
                          value: index(local!odd, fv!index, ""),
                          refreshAfter: "UNFOCUS",
                          validations: {},
                          readOnly: true
                        )
                      }
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Text",
                          labelPosition: "ADJACENT",
                          value: index(local!even, fv!index, ""),
                          refreshAfter: "UNFOCUS",
                          validations: {},
                          readOnly: true
                        )
                      }
                    )
                  }
                )
              )
            )
          }
        )
      )
    }

    This is how the output looks

Reply
  • 0
    Certified Senior Developer

    Hi  ,

    See the below code and check if thats what you are looking for. Odd elements will be displayed in 1st column and even elements in 2nd column

    {
      a!localVariables(
        local!num: { "a", "b", "c", "d", "e", "f", "g", "h" },
        a!sectionLayout(
          label: "",
          contents: {
            a!localVariables(
              local!even: reject(
                fn!isnull,
                a!forEach(
                  local!num,
                  if(mod(fv!index, 2) = 0, fv!item, "")
                )
              ),
              local!odd: reject(
                fn!isnull,
                a!forEach(
                  local!num,
                  if(mod(fv!index, 2) <> 0, fv!item, "")
                )
              ),
              a!forEach(
                items: enumerate(length(local!num) / 2),
                expression: a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Text",
                          labelPosition: "ADJACENT",
                          value: index(local!odd, fv!index, ""),
                          refreshAfter: "UNFOCUS",
                          validations: {},
                          readOnly: true
                        )
                      }
                    ),
                    a!columnLayout(
                      contents: {
                        a!textField(
                          label: "Text",
                          labelPosition: "ADJACENT",
                          value: index(local!even, fv!index, ""),
                          refreshAfter: "UNFOCUS",
                          validations: {},
                          readOnly: true
                        )
                      }
                    )
                  }
                )
              )
            )
          }
        )
      )
    }

    This is how the output looks

Children
No Data