ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / Columns / Save and Load Column Layout
In This Topic
    Save and Load Column Layout
    In This Topic

    FlexGrid has a client ColumnLayout property that saves the column layout in the browser's localStorage. ColumnLayout gets or sets a JSON string containing a list of grid columns and their properties. It doesn't support the datamap column in the FlexGrid.

    To see how it works, you can try doing the following:

    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.

    FlexGrid supports server-side saving\loading of column layout. This is useful in situations where column layout needs to be saved in a database for presenting different views to different users.

    The following image shows how a FlexGrid when ColumnLayout property is used to save the layout of FlexGrid. The example uses Sale.cs model as its datasource, added in the QuickStart section.

    The following code examples demonstrate how to set Save and Load Column layout in a FlexGrid:

    In Code


    Copy Code
    public ActionResult Index()
        var model = Sales.GetData(500);
        return View(model);


    Copy Code
    @using MVCFlexGrid.Models
    @using C1.Web.Mvc.Grid;
    @model IEnumerable<Sale>
        // Save or restore column layout in localStorage
        function saveColumnLayout() {
            var grid = wijmo.Control.getControl("#ovFlexGrid");
            localStorage['columns'] = grid.columnLayout;
        function loadColumnLayout() {
            var grid = wijmo.Control.getControl("#ovFlexGrid"),
                columnLayout = localStorage['columns'];
            if (columnLayout) {
                grid.columnLayout = columnLayout;
    <input type="button" value="Save Column Layout" class="btn" onclick="saveColumnLayout()" />
    <input type="button" value="Load Column Layout" class="btn" onclick="loadColumnLayout()" />
    <c1-flex-grid id="ovFlexGrid" auto-generate-columns="true" class="grid" is-read-only="true" allow-sorting="true">
        <c1-items-source initial-items-count="100" source-collection="Model"></c1-items-source>
    See Also