Can we freeze the data columns when the user scrolls in data grid

RE: Can we freeze the data columns when the user scrolls in data grid

Mike Schmitt — Thu, 05 Mar 2020 20:49:58 GMT

Updated version that uses your total columns, and i've also fixed some of my pointer math to make it more intuitive to deal with on the form:

a!localVariables(
  
  local!data: {
    {id: 1, name: "one", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9",data10: "data10", data11: "data11", data12: "data12", data13: "data13", data14: "data14", data15: "data15", data16: "data16", data17: "data17", data18: "data18", data19: "data19",data20: "data20", data21: "data21", data22: "data22", data23: "data23", data24: "data24", data25: "data25", data26: "data26", data27: "data27", data28: "data28", data29: "data29",data30: "data30"},
    {id: 2, name: "two", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9",data10: "data10", data11: "data11", data12: "data12", data13: "data13", data14: "data14", data15: "data15", data16: "data16", data17: "data17", data18: "data18", data19: "data19",data20: "data20", data21: "data21", data22: "data22", data23: "data23", data24: "data24", data25: "data25", data26: "data26", data27: "data27", data28: "data28", data29: "data29",data30: "data30"},
    {id: 3, name: "three", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9",data10: "data10", data11: "data11", data12: "data12", data13: "data13", data14: "data14", data15: "data15", data16: "data16", data17: "data17", data18: "data18", data19: "data19",data20: "data20", data21: "data21", data22: "data22", data23: "data23", data24: "data24", data25: "data25", data26: "data26", data27: "data27", data28: "data28", data29: "data29",data30: "data30"}
  },
  
  local!defaultColumnPointerValue: 1,
  local!optionalColumnPointer: local!defaultColumnPointerValue,
  local!optionalColumnsLength: 6,
  local!allOptionalColumns: {"data3", "data4", "data5", "data6", "data7", "data8", "data9","data10","data11","data12","data13","data14","data15","data16","data17","data18","data19","data20", "data21","data22","data23","data24","data25","data26","data27","data28","data29","data30"},
  local!maxOptionalColumnPointerValue: (length(local!allOptionalColumns)+1) - local!optionalColumnsLength,
  local!selectedOptionalColumns: index(
    local!allOptionalColumns,
    enumerate(local!optionalColumnsLength) + local!optionalColumnPointer,
    null()
  ),
  
  a!sectionLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!gridField(
                data: local!data,
                columns: {
                  a!gridColumn(
                    label: "Id",
                    value: fv!row.id,
                    width: "ICON"
                  ),
                  a!gridColumn(
                    label: "data1",
                    value: fv!row.data1
                  ),
                  a!gridColumn(
                    label: "data2",
                    value: fv!row.data2
                  ),
                  a!gridColumn(
                    helpTooltip: "More columns to the left",
                    value: a!richTextDisplayField(
                      value: a!richTextIcon(icon: "caret-left", caption: "Scroll Left to see more columns")
                    ),
                    showWhen: local!optionalColumnPointer > 1,
                    align: "CENTER",
                    width: "ICON"
                  ),
                  
                  a!forEach(
                    local!selectedOptionalColumns,
                    a!gridColumn(
                      label: fv!item,
                      value: property(fv!row, fv!item, "--")
                    )
                  ),
                  

                  a!gridColumn(
                    helpTooltip: "More columns to the right",
                    value: a!richTextDisplayField(
                      value: a!richTextIcon(icon: "caret-right", caption: "Scroll Right to see more columns")
                    ),
                    showWhen: local!optionalColumnPointer < local!maxOptionalColumnPointerValue,
                    align: "CENTER",
                    width: "ICON"
                  )
                }
              ),
              a!richTextDisplayField(
                value: {
                  a!richTextItem(
                    text: {
                      a!richTextIcon(
                        icon: "long-arrow-left",
                        caption: "Scroll Left" & if(local!optionalColumnPointer <= local!defaultColumnPointerValue, " (disabled)", ""),
                        color: if(
                          local!optionalColumnPointer <= local!defaultColumnPointerValue,
                          "#D3D3D3",
                          ""
                        )
                      )
                    },
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!optionalColumnPointer,
                          local!optionalColumnPointer - 1
                        )
                      },
                      showWhen: local!optionalColumnPointer > local!defaultColumnPointerValue
                    ),
                    linkStyle: "STANDALONE",
                    size: "LARGE"
                  ),
                  "   ",
                  a!richTextIcon(
                    icon: "map-o",
                    caption: "Reset",
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!optionalColumnPointer,
                          local!defaultColumnPointerValue
                        )
                      },
                      showWhen: local!optionalColumnPointer <> local!defaultColumnPointerValue
                    ),
                    linkStyle: "STANDALONE",
                    color: if(
                      local!optionalColumnPointer = local!defaultColumnPointerValue,
                      "#D3D3D3",
                      null()
                    ),
                    size: "MEDIUM_PLUS"
                  ),
                  "   ",
                  a!richTextItem(
                    text: {
                      a!richTextIcon(
                        icon: "long-arrow-right",
                        caption: "Scroll Right" & if(local!optionalColumnPointer >= local!maxOptionalColumnPointerValue, " (disabled)", ""),
                        color: if(
                          local!optionalColumnPointer >= local!maxOptionalColumnPointerValue,
                          "#D3D3D3",
                          ""
                        )
                      )
                    },
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!optionalColumnPointer,
                          local!optionalColumnPointer + 1
                          
                          /* you can use this value here (or in a separate control) to jump to the end */
                          /*local!maxOptionalColumnPointerValue*/
                        )
                      },
                      showWhen: local!optionalColumnPointer < local!maxOptionalColumnPointerValue
                    ),
                    linkStyle: "STANDALONE",
                    size: "LARGE"
                  )
                },
                align: "RIGHT"
              )
            }
          )
        }
      )
    }
  )
)

RE: Can we freeze the data columns when the user scrolls in data grid

Rama — Thu, 05 Mar 2020 19:38:20 GMT

Thank you its working now.I appreciate your help.

RE: Can we freeze the data columns when the user scrolls in data grid

Mike Schmitt — Thu, 05 Mar 2020 19:30:33 GMT

Your revision works for me... if you're doing this in Interface Editor, and you change the local values (without making them into a!refreshVariable variables with "refreshAlways" set to true), you will need to manually refresh the values by clicking "test" at the top of the page.

RE: Can we freeze the data columns when the user scrolls in data grid

Rama — Thu, 05 Mar 2020 19:24:27 GMT

If i am trying to add more columns the data is displaying upto 9 only.

Modified above code like local!data: {
{id: 1, name: "one", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9",data10: "data10",
data11: "data11", data12: "data12", data13: "data13", data14: "data14", data15: "data15", data16: "data16", data17: "data17", data18: "data18", data19: "data19",data20: "data20",
data21: "data21", data22: "data22", data23: "data23", data24: "data24", data25: "data25", data26: "data26", data27: "data27", data28: "data28", data29: "data29",data30: "data30"},

{id: 2, name: "two", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9",data10: "data10",
data11: "data11", data12: "data12", data13: "data13", data14: "data14", data15: "data15", data16: "data16", data17: "data17", data18: "data18", data19: "data19",data20: "data20",
data21: "data21", data22: "data22", data23: "data23", data24: "data24", data25: "data25", data26: "data26", data27: "data27", data28: "data28", data29: "data29",data30: "data30"},

{id: 3, name: "three", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9",data10: "data10",
data11: "data11", data12: "data12", data13: "data13", data14: "data14", data15: "data15", data16: "data16", data17: "data17", data18: "data18", data19: "data19",data20: "data20",
data21: "data21", data22: "data22", data23: "data23", data24: "data24", data25: "data25", data26: "data26", data27: "data27", data28: "data28", data29: "data29",data30: "data30"}
},

local!allOptionalColumns: {"data3", "data4", "data5", "data6", "data7", "data8", "data9","data10","data11","data12","data13","data14","data15","data16","data17","data18","data19","data20",
"data21","data22","data23","data24","data25","data26","data27","data28","data29","data30"},

RE: Can we freeze the data columns when the user scrolls in data grid

Rama — Thu, 05 Mar 2020 18:29:01 GMT

very nice .Thank you for your efforts

RE: Can we freeze the data columns when the user scrolls in data grid

Stewart Burchell — Thu, 05 Mar 2020 17:35:02 GMT

Nice! 😀

RE: Can we freeze the data columns when the user scrolls in data grid

Mike Schmitt — Thu, 05 Mar 2020 15:04:45 GMT

I've gone ahead and built an example...

a!localVariables(
  
  local!data: {
    {id: 1, name: "one", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9"},
    {id: 2, name: "two", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9"},
    {id: 3, name: "three", data1: "data1", data2: "data2", data3: "data3", data4: "data4", data5: "data5", data6: "data6", data7: "data7", data8: "data8", data9: "data9"}
  },
  
  local!defaultColumnPointerValue: 1,
  local!optionalColumnPointer: local!defaultColumnPointerValue,
  local!optionalColumnsLength: 3,
  local!allOptionalColumns: {"data3", "data4", "data5", "data6", "data7", "data8", "data9"},
  local!maxOptionalColumnPointerValue: length(local!allOptionalColumns) - local!optionalColumnsLength,
  local!selectedOptionalColumns: index(
    local!allOptionalColumns,
    enumerate(local!optionalColumnsLength) + local!optionalColumnPointer,
    null()
  ),
  
  a!sectionLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!gridField(
                data: local!data,
                columns: {
                  a!gridColumn(
                    label: "Id",
                    width: "ICON",
                    value: fv!row.id
                  ),
                  a!gridColumn(
                    label: "data1",
                    value: fv!row.data1
                  ),
                  a!gridColumn(
                    label: "data2",
                    value: fv!row.data2
                  ),
                  a!gridColumn(
                    /*label: "<<",*/
                    helpTooltip: "More columns to the left",
                    showWhen: local!optionalColumnPointer > 1,
                    align: "CENTER",
                    width: "ICON",
                    value: a!richTextDisplayField(
                      value: a!richTextIcon(icon: "caret-left", caption: "Scroll Left to see more columns")
                    )
                  ),
                  
                  a!forEach(
                    local!selectedOptionalColumns,
                    a!gridColumn(
                      label: fv!item,
                      value: property(fv!row, fv!item, "--")
                    )
                  ),
                  

                  a!gridColumn(
                    /*label: ">>",*/
                    helpTooltip: "More columns to the right",
                    showWhen: local!optionalColumnPointer <= local!maxOptionalColumnPointerValue,
                    align: "CENTER",
                    width: "ICON",
                    value: a!richTextDisplayField(
                      value: a!richTextIcon(icon: "caret-right", caption: "Scroll Right to see more columns")
                    )
                  ),
                }
              ),
              a!richTextDisplayField(
                align: "RIGHT",
                value: {
                  a!richTextItem(
                    size: "LARGE",
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!optionalColumnPointer,
                          local!optionalColumnPointer - 1
                        )
                      },
                      showWhen: local!optionalColumnPointer > local!defaultColumnPointerValue
                    ),
                    linkStyle: "STANDALONE",
                    text: {
                      a!richTextIcon(
                        icon: "long-arrow-left",
                        caption: "Scroll Left" & if(local!optionalColumnPointer <= local!defaultColumnPointerValue, " (disabled)", ""),
                        color: if(
                          local!optionalColumnPointer <= local!defaultColumnPointerValue,
                          "#D3D3D3",
                          ""
                        )
                      )
                    }
                  ),
                  "   ",
                  a!richTextIcon(
                    size: "MEDIUM_PLUS",
                    icon: "map-o",
                    color: if(
                      local!optionalColumnPointer = local!defaultColumnPointerValue,
                      "#D3D3D3",
                      null()
                    ),
                    caption: "Reset",
                    link: a!dynamicLink(
                      showWhen: local!optionalColumnPointer <> local!defaultColumnPointerValue,
                      saveInto: {
                        a!save(
                          local!optionalColumnPointer,
                          local!defaultColumnPointerValue
                        )
                      }
                    ),
                    linkStyle: "STANDALONE"
                  ),
                  "   ",
                  a!richTextItem(
                    size: "LARGE",
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!optionalColumnPointer,
                          local!optionalColumnPointer + 1
                        )
                      },
                      showWhen: local!optionalColumnPointer <= local!maxOptionalColumnPointerValue
                    ),
                    linkStyle: "STANDALONE",
                    text: {
                      a!richTextIcon(
                        icon: "long-arrow-right",
                        caption: "Scroll Right" & if(local!optionalColumnPointer > local!maxOptionalColumnPointerValue, " (disabled)", ""),
                        color: if(
                          local!optionalColumnPointer > local!maxOptionalColumnPointerValue,
                          "#D3D3D3",
                          ""
                        )
                      )
                    }
                  )
                }
              )
            }
          )
        }
      )
    }
  )
)

RE: Can we freeze the data columns when the user scrolls in data grid

Mike Schmitt — Thu, 05 Mar 2020 12:17:19 GMT

Tricksy - I like it. I'd go one step further and create a 4th static column, icon width, that doesn't show any data but instead acts as a separator (perhaps with some icon displayed on every row, or just a blank space), to visually delineate where the "frozen" panels stop.

RE: Can we freeze the data columns when the user scrolls in data grid

Stewart Burchell — Thu, 05 Mar 2020 09:53:46 GMT

So whilst there's no OOTB nice way to do this,m with some imagination you can achieve this. In an a!gridField() an individual a!gridColumn() can have its 'showWhen' attribute set. So, splitting the problem into two:

scrolling the columns - have control components that you can click to scroll left/right, and have these save into a local variable that acts as the 'position' of the first column. So, for example, if you click the scroll right, then you add one to the position of the first column, If a given column is less than the position of the first column, the set the 'showWhen' to false.
freezing the first 3 columns: simply set their 'showWhen' to true, irrespective of the above rule

Obviously you'll need to handle not being able to scroll further left than column 1, or further right than the last column (column 50 in your case).

RE: Can we freeze the data columns when the user scrolls in data grid

Peter Lewis — Wed, 04 Mar 2020 22:15:41 GMT

Yeah is it really necessary for them to see all 50 columns at the same time? I honestly can't think of too many reasons why I would need all those columns at once.

Instead, you could do something like provide a multiple dropdown menu where they could select which columns are useful. Then, you can hide all other columns. Also, you can follow a master detail approach where you can show a few columns in the grid (maybe just the three you mentioned above) and provide a link. Then, when the user clicks the link, you can display all the other data about the row below or next to your grid.

In general, I try to follow the rule of never having horizontal scrolling. Think about other ways to display the data that would limit that possibility.

RE: Can we freeze the data columns when the user scrolls in data grid

Mike Schmitt — Wed, 04 Mar 2020 14:29:21 GMT

There currently isn't any direct way to do this, other than perhaps showing separate grids in a column layout (if possible) where the left-hand column is minimized in size and then the right-hand one is free to scroll. However I think a best practice recommendation might be to consider alternatives to showing a grid with 50 columns - such as showing only the most important columns by default, and allowing an "expanded view" for specific rows either when selected or when an inline link is clicked, etc.