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

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.

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.

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

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.

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

Nice! 

very nice .Thank you for your efforts

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

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.