In editable grid columnConfiguration alllowed till 15 columns?

Certified Senior Developer

I have 25 columns in editable grid i need to set weight of each column using columnConfiguration  it's not happening for more than 15 columns..

Any specific reason or appian limitation?

or any alternative solution?

  Discussion posts and replies are publicly visible

Parents Reply Children
  • Hi Shubham,

    One thing that I notice when I was trying to reproduce your scenario is that the size of the screen where the grid is displayed can affect the columns weight definition. It is possible to see this behaviour using the different displays mode in the preview of the interface. Check the screenshots below:

    • Using Wide Desktop option

     

     

    • Using Desktop or Narrow Desktop

     

    Perhaps Mike or Peter can confirm if this is Appian’s default behavior.

    Regards,

    Acacio B.

  • Can you post an example expression that consistently reproduces on your site? I'm not seeing the same behavior on my own site, so I'd like to see if you're doing anything in particular. Also AFAIK there is no limitation on the number of column configs - although I still am pretty skeptical in general of many valid use cases with 25 columns in an edible grid.

  • Hi Peter,

    Please find the code below, it is basically and enhanced version of the sample code for Editable Grid, that can be found in Appian's Documentation.

    Please try it out in your system and let us know the result.

    Cheers

    Acacio B

    =a!localVariables(
      local!items: {
        {item: "Item 1",desc1:"Description 1",desc2:"Description 2",desc3:"Description 3",desc4:"Description 4",desc5:"Description 5",desc6:"Description 6",desc7:"Description 7",desc8:"Description 8",desc9:"Description 9",desc10:"Description 10",desc11:"Description 11",desc12:"Description 12",desc13:"Description 13",desc14:"Description 14",desc15:"Description 15", qty: 1, unitPrice: 10},
        {item: "Item 2", desc1:"Description 1",desc2:"Description 2",desc3:"Description 3",desc4:"Description 4",desc5:"Description 5",desc6:"Description 6",desc7:"Description 7",desc8:"Description 8",desc9:"Description 9",desc10:"Description 10",desc11:"Description 11",desc12:"Description 12",desc13:"Description 13",desc14:"Description 14",desc15:"Description 15",qty: 2, unitPrice: 20},
        {item: "Item 3", desc1:"Description 1",desc2:"Description 2",desc3:"Description 3",desc4:"Description 4",desc5:"Description 5",desc6:"Description 6",desc7:"Description 7",desc8:"Description 8",desc9:"Description 9",desc10:"Description 10",desc11:"Description 11",desc12:"Description 12",desc13:"Description 13",desc14:"Description 14",desc15:"Description 15",qty: 3, unitPrice: 30},
        {item: "Item 4",desc1:"Description 1",desc2:"Description 2",desc3:"Description 3",desc4:"Description 4",desc5:"Description 5",desc6:"Description 6",desc7:"Description 7",desc8:"Description 8",desc9:"Description 9",desc10:"Description 10",desc11:"Description 11",desc12:"Description 12",desc13:"Description 13",desc14:"Description 14",desc15:"Description 15", qty: 4, unitPrice: 40},
        {item: "Item 5", desc1:"Description 1",desc2:"Description 2",desc3:"Description 3",desc4:"Description 4",desc5:"Description 5",desc6:"Description 6",desc7:"Description 7",desc8:"Description 8",desc9:"Description 9",desc10:"Description 10",desc11:"Description 11",desc12:"Description 12",desc13:"Description 13",desc14:"Description 14",desc15:"Description 15",qty: 5, unitPrice: 50},
        {item: "Item 6",desc1:"Description 1",desc2:"Description 2",desc3:"Description 3",desc4:"Description 4",desc5:"Description 5",desc6:"Description 6",desc7:"Description 7",desc8:"Description 8",desc9:"Description 9",desc10:"Description 10",desc11:"Description 11",desc12:"Description 12",desc13:"Description 13",desc14:"Description 14",desc15:"Description 15", qty: 6, unitPrice: 60},
        {item: "Item 7", desc1:"Description 1",desc2:"Description 2",desc3:"Description 3",desc4:"Description 4",desc5:"Description 5",desc6:"Description 6",desc7:"Description 7",desc8:"Description 8",desc9:"Description 9",desc10:"Description 10",desc11:"Description 11",desc12:"Description 12",desc13:"Description 13",desc14:"Description 14",desc15:"Description 15",qty: 7, unitPrice: 70},
        {item: "Item 8", desc1:"Description 1",desc2:"Description 2",desc3:"Description 3",desc4:"Description 4",desc5:"Description 5",desc6:"Description 6",desc7:"Description 7",desc8:"Description 8",desc9:"Description 9",desc10:"Description 10",desc11:"Description 11",desc12:"Description 12",desc13:"Description 13",desc14:"Description 14",desc15:"Description 15",qty: 8, unitPrice: 80},
        {item: "Item 9", desc1:"Description 1",desc2:"Description 2",desc3:"Description 3",desc4:"Description 4",desc5:"Description 5",desc6:"Description 6",desc7:"Description 7",desc8:"Description 8",desc9:"Description 9",desc10:"Description 10",desc11:"Description 11",desc12:"Description 12",desc13:"Description 13",desc14:"Description 14",desc15:"Description 15",qty: 9, unitPrice: 90},
        {item: "Item 10", desc1:"Description 1",desc2:"Description 2",desc3:"Description 3",desc4:"Description 4",desc5:"Description 5",desc6:"Description 6",desc7:"Description 7",desc8:"Description 8",desc9:"Description 9",desc10:"Description 10",desc11:"Description 11",desc12:"Description 12",desc13:"Description 13",desc14:"Description 14",desc15:"Description 15",qty: 10, unitPrice: 100}
      },
      a!gridLayout(
        label: "Products",
        instructions: "Update the item name, quantity, or unit price.",
        headerCells: {
          a!gridLayoutHeaderCell(label: "Item"),
          a!gridLayoutHeaderCell(label: "Qty"),
          a!gridLayoutHeaderCell(label: "Description 1"),
          a!gridLayoutHeaderCell(label: "Description 2"),
          a!gridLayoutHeaderCell(label: "Description 3"),
          a!gridLayoutHeaderCell(label: "Description 4"),
          a!gridLayoutHeaderCell(label: "Description 5"),
          a!gridLayoutHeaderCell(label: "Description 6"),
          a!gridLayoutHeaderCell(label: "Description 7"),
          a!gridLayoutHeaderCell(label: "Description 8"),
          a!gridLayoutHeaderCell(label: "Description 9"),
          a!gridLayoutHeaderCell(label: "Description 10"),
          a!gridLayoutHeaderCell(label: "Description 11"),
          a!gridLayoutHeaderCell(label: "Description 12"),
          a!gridLayoutHeaderCell(label: "Description 13"),
          a!gridLayoutHeaderCell(label: "Description 14"),
          a!gridLayoutHeaderCell(label: "Description 15"),
          /*a!gridLayoutHeaderCell(label: "Unit Price"),*/
          /*a!gridLayoutHeaderCell(label: "Total", align: "RIGHT")*/
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 5),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE",weight: 5),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE",weight: 7),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
          /*a!gridLayoutColumnConfig(width: "DISTRIBUTE"),*/
          /*a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: 2)*/
        },
        rows: a!forEach(
          items: local!items,
          expression: a!gridRowLayout(
            contents: {
              a!textField(
                value: fv!item.item,
                saveInto: fv!item.item
              ),
              a!integerField(
                value: fv!item.qty,
                saveInto: fv!item.qty
              ),
              a!textField(
                value: fv!item.desc1,
                saveInto: fv!item.desc1
              ),
              a!textField(
                value: fv!item.desc2,
                saveInto: fv!item.desc2
              ),
              a!textField(
                value: fv!item.desc3,
                saveInto: fv!item.desc3
              ),
              a!textField(
                value: fv!item.desc4,
                saveInto: fv!item.desc4
              ),
              a!textField(
                value: fv!item.desc5,
                saveInto: fv!item.desc5
              ),
              a!textField(
                value: fv!item.desc6,
                saveInto: fv!item.desc6
              ),
              a!textField(
                value: fv!item.desc7,
                saveInto: fv!item.desc7
              ),
              a!textField(
                value: fv!item.desc8,
                saveInto: fv!item.desc8
              ),
              a!textField(
                value: fv!item.desc9,
                saveInto: fv!item.desc9
              ),
              a!textField(
                value: fv!item.desc10,
                saveInto: fv!item.desc10
              ),
              a!textField(
                value: fv!item.desc11,
                saveInto: fv!item.desc11
              ),
              a!textField(
                value: fv!item.desc12,
                saveInto: fv!item.desc12          ),
              a!textField(
                value: fv!item.desc13,
                saveInto: fv!item.desc13
              ),
              a!textField(
                value: fv!item.desc14,
                saveInto: fv!item.desc14
              ),
              a!textField(
                value: fv!item.desc15,
                saveInto: fv!item.desc15
              ),
              /*a!floatingPointField(*/
                /*value: fv!item.unitPrice,*/
                /*saveInto: fv!item.unitPrice*/
              /*),*/
              /*a!textField(*/
                /*value: dollar(tointeger(fv!item.qty) * todecimal(fv!item.unitPrice)),*/
                /*readOnly: true,*/
                /*align: "RIGHT"*/
              /*)*/
            }
          )  
        ),
        height: "SHORT",
        rowHeader: 1
      )
    )

  • 0
    Certified Lead Developer
    in reply to Acacio Barrado

    I can confirm this seems to work basically as expected.

    The one thing to note, which I assume might be the source of the original poster's confusion, is that when there are this many columns, the "distribute" columns with larger weighting are width-compressed down to the same width as the other "distribute" columns when the window is shrunk down to a size where horizontal scrolling is shown.

    I believe this is expected behavior.  But nothing is being ignored due to there being more than 15 columns, as far as I can tell.  If I widen the window a bit (taking up 1 1/2 monitors for example, or zooming out a few steps), they show up fine.

  • 0
    Certified Lead Developer
    in reply to Mike Schmitt

    I think you're right.  I would have assumed that it's not the number, but the relation to the screen width.  DISTRIBUTE is about dividing their share of the screen's width evenly among all the components.  Well, how do you share more than 100% of anything?

    When the screen width is no longer a factor, they're going to take up the least space they can.  How else are they going to share the right amount of a stretchy container?  Should they expect a user to want to scroll more so the columns can be wider?

  • Interesting - in a few quick tests I didn't see this behavior yesterday, but I do see it now with this SAIL code. I think you're right that it's due to the width of the screen, and this is likely expected behavior.