Persisting Layout

By default, FlexGrid allows users to resize and reorder columns.

It is easy to extend this and allow users to select columns as well. For example, you can use the MultiSelect control below to select the columns to be displayed on the grid:

You can use the grid's columnLayout property to allow users to save and restore column layouts. Click the buttons below to see how this works.

// This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsColumnLayout.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');

    // populate column picker
    var cols = [];
    theGrid.columns.forEach(function (col) {
        cols.push({
            header: col.header,
            binding: col.binding,
            visible: true
        });
    });

    var columnPicker = wijmo.Control.getControl('#columnPicker');
    columnPicker.itemsSource = cols;
    columnPicker.checkedItemsChanged.addHandler(function (s, e) {
        cols.forEach(function (item) {
            theGrid.getColumn(item.binding).visible = item.visible;
        })
    });

    // save/restore layout buttons
    document.getElementById('btnSave').addEventListener('click', function() {
        localStorage.setItem('myLayout', theGrid.columnLayout);
    });
    document.getElementById('btnRestore').addEventListener('click', function() {
        var layout = localStorage.getItem('myLayout');
        if (layout) {
            theGrid.columnLayout = layout;
        }
    });
});

using System.Web.Mvc;

namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: ColumnsColumnLayout
        public ActionResult ColumnsColumnLayout()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}

@model IEnumerable<FlexGridData.Sale>

<h1>
    @Html.Raw(Resources.C1FlexGrid.ColumnsColumnLayout_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsColumnLayout_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsColumnLayout_Text2)
</p>
@Html.C1().MultiSelect().Id("columnPicker").DisplayMemberPath("header").CheckedMemberPath("visible").HeaderFormat("{count:n0} columns visible")
<br />
<br />
@Html.C1().FlexGrid().Id("theGrid").Bind(Model)

<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsColumnLayout_Text3)
</p>
<button id="btnSave" class="btn btn-default">
    @Html.Raw(Resources.C1FlexGrid.ColumnsColumnLayout_Text4)
</button>
<button id="btnRestore" class="btn btn-default">
    @Html.Raw(Resources.C1FlexGrid.ColumnsColumnLayout_Text5)
</button>