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