List Control Fixed and Virtual Columns

Description

Keep important information in view by freezing columns. Fixed List columns remain on-screen while the user scrolls your list.

Discussion

You can now define that a List control has columns that are fixed at the start and end of the List. These columns are never hidden as the List is scrolled horizontally. This is similar to how fixed columns in a spreadsheet work.

You can also define that the List has virtual columns that are displayed as needed when the List is scrolled horizontally. This is helpful if a List has a very large number of columns that would slow down rendering of the List.

When you turn on virtual columns, you specify how many columns the List should display. Then you can scroll the List horizontally (using a slider or scroller control) to bring additional List columns into view.

The animation below shows a List with a fixed column on the left (the "start" of the List) and a fixed column on the right (the "end" of the List). The fixed column(s) at the start are red and the fixed column(s) at the end are green.

images/listVirtualizedColumns.gif

To turn on fixed/virtualized columns, edit the List and check the Has fixed/virtualized columns in the Layout Properties section. This property is only shown for Column type layouts.

images/fixedcolumns1.gif

Then click the smart field for the Fixed/virtualized column settings property to bring up the dialog to configure your settings.

images/fixedcolprops.jpg

You can specify:

Property
Description
Number of columns to show

The total number of columns that the List should display. It includes the fixed columns at the start and end of the List. For example, say you set 2 fixed columns at the start and 1 fixed column at the end and 10 columns to display, the center portion of the List (i.e. the columns between the columns at the start and end of the List) would contain 7 columns (10 - 2 - 1).

Scroll control

The type of scroll control. The control can either be a Slider or a Scroller. Scroller controls are only supported if you are using the Alpha theme, or a them inherited from Alpha. This is how you scroll the List horizontally.

Scroll control position

The scroll control postition. The control can either be in the header or footer of the List.

Number of locked columns at start

Number of columns at start of List that always remain visible when you scroll horizontally.

Show column separator after start locked columns

Should a separator line be shown separating the fixed and scrolling columns. If you check this property you can set the separator color and width.

Class Name

A class to apply to the locked columns at the start of the List.

Videos

Fixed List Columns

Spreadsheets include the ability to freeze columns in place so that they are always visible when the sheet is scrolled horizontally. A similar feature in the List allows you to freeze columns, ensuring the columns are always shown. You can freeze columns located at the at the start and end of the List.

In this video, we show how to configure a List to have fixed columns.

Download Component

2020-10-30

See Also