Editable Grid - Dynamic columns

Hi, 

I have a requirement in which the user enters any numerical value, let's say 4, so a grid should be created with four columns.
Likewise, he can enter n values, so n columns should be created. 

please let me know the implementation.

  Discussion posts and replies are publicly visible

Parents
  • SAIL components can be dynamically generated within the scope of a loop - you can use a!forEach() here. So you can have one component that the User can use to choose how many columns a grid should have, and the gird can use that number entered/selected to dynamically generate the columns within the grid. But that's by far the easiest part of the implementation, what is going to be much more complex are how to ensure they don't select 1 million columns, or a negative number of columns; or how to 'type' the column (text, drop-down, integer, decimal); or (finally) how to map the content of the columns so that the data entered can be persisted to a database (assuming that's what you're intending).

    Anyway, enough of the doom and gloom. Here's a snippet to get you going:

    a!localVariables(
      local!numerOfColumns: null,
      {
        a!dropdownField(
          label: "Number of Columns",
          value: local!numerOfColumns,
          saveInto: local!numerOfColumns,
          choiceLabels: fn!enumerate(10)+1,
          choiceValues: fn!enumerate(10)+1,
          placeholderLabel: "--- Select the Number of Columns required ---"
        ),
        a!gridField(
          showWhen: fn!not(fn!isnull(local!numerOfColumns)),
          columns: a!forEach(
            items: fn!enumerate(local!numerOfColumns)+1,
            expression: a!gridColumn(
              label: concat("Column ", fv!item)
            )
          )
        )
      }
    )

  • hey, thanks, this is exactly what I needed. 

  •  Hi Stewart Burchell,

    Is there any snippet for a!gridLayout()

Reply Children