Column Layout

The FlexGrid has a columnLayout property that gets or sets a JSON string containing a list of grid columns and their properties.

This sample uses the columnLayout property to persist the column layout to the browser's localStorage using the following code:

// save or restore column layout in localStorage
saveColumnLayout() {
    if (localStorage) {
        localStorage['columns'] = this.flex.columnLayout;
        console.log('**LAYOUT: ' + this.flex.columnLayout);
    }
}
loadColumnLayout() {
    if (localStorage) {
        this.flex.columnLayout = localStorage['columns'];
    }
}

To see how this works, follow these steps:

1. Resize some columns and drag some to new positions.
2. Click the "Save Column Layout" button to save the changes to local storage.
3. Refresh the page to restore the original layout.
4. Click the "Load Column Layout" button to restore the layout from local storage.