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

data grid displays 50  columns and need to freeze the first 3 columns  as the user scrolls horizontally when checking the other columns in data grid

  Discussion posts and replies are publicly visible

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

  • +1
    Certified Lead Developer
    in reply to Stewart Burchell

    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",
                              ""
                            )
                          )
                        }
                      )
                    }
                  )
                }
              )
            }
          )
        }
      )
    )

  • 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"},

  • 0
    Certified Lead Developer
    in reply to Rama

    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.

  • Thank you its working now.I appreciate your help.

Reply Children
  • 0
    Certified Lead Developer
    in reply to Rama

    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"
                  )
                }
              )
            }
          )
        }
      )
    )