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
  • Also it's not necessarily causing the issue, but just seeing this statement makes me think there's a better design paradigm:

    more than 15 columns

    I try to avoid horizontal scrolling at all costs on an editable grid, so I'd suggest looking at some kind grid with detail pattern where you can select a row and edit its values.

  • 0
    Certified Senior Developer
    in reply to Mike Schmitt

    When i apply column config to editable grid having more than 15 columns it's ignoring the column config for all columns.

  • 0
    Certified Senior Developer
    in reply to Peter Lewis

    Scrolling with more than 15 editable columns is client requirement.

    ANy suggestion why columnConfig is not applied for more than 15 columns?

  • 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.