onListColumnSelectorChanged Event


Fires after the user has made a selection in the List Columns Show/hide control. You can use this event to persist the List state.

Persisting List Column State 

At run-time, a user can adjust the Layout of a columnar layout by hiding columns, adjusting the column order and by adjusting the width of each column. You can persist this state using the {dialog.object}.persistListColumnLayout() method.

You can restore a previously persisted List column layout using the {dialog.object}.restoreListColumnLayout() method.

The persisted column layout is store in the browser's localStorage using the List GUID and the Layout name as the key.

Each List has a unique GUID property.

When you use the {dialog.object}.restoreListColumnLayout() method, the method checks localStorage to see if there is a persisted Layout that matches the List's GUID property and the name of the Layout that is currently active. (List's can have multiple Layouts.). You can only restore the Column Layout of a columnar List Layout.

{dialog.object}.persistListColumnLayout('list1')  //persist layout of List1

{dialog.object}.restoreListColumnLayout('list1')  //restore layout of List1


Setting the order and visibility of columns in a List Layout

You can allows users to dynamically show/hide List columns at run-time and also to change the order in which the columns appear in the List by adding a List column show/hide button to a UX component.

In this video, we show how a List column show/hide button can be added to a UX and we show how it can be used to change the columns in the List are run-time.

In the video, we also show how an event is fired when the List layout is changed. This event is defined in the List builder onListColumnSelectorChanged event.


Saving and Restoring the List's Column Layout

The Show/hide list columns Defined Control can be used to give the user the ability to show, hide, and reorder columns in a List's layout. The layout can be saved, allowing you to later restore the layout the user created when they return to the application.

When the user changes the layout of the List columns, the onListColumnSelectorChanged event is triggered. This event can be used to persist the List's modified layout.

In this video, we show how to use the UX component's .persistListColumnLayout() and .restoreListColumnLayout() methods to save and restore the Column layout for a List control.

See Also