FlexGrid Drag and Drop Column Picker

By default, the FlexGrid allows users to drag columns into new positions. But it does not have a built-in system for selecting which columns should be displayed on the grid.

This sample demonstrates how you can build a dialog that allows users to select which columns should be displayed and in what order using drag and drop.

For example, the grid below shows two columns but is bound to an array of items with many extra properties that are not shown:

Click the button below to show a dialog for picking which columns should be displayed on the grid and in what order:

Edit Columns
Drag the columns you want to display to the list on the right. Drag the ones you don't want to the list on the left.
Drag within the list on the right to re-order the columns.
Click the "Apply" button to apply the changes to the grid.