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:
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:
| C# |
Copy Code
|
|---|---|
public ActionResult Index() { var model = Sales.GetData(500); return View(model); } |
|
| HTML |
Copy Code
|
|---|---|
@using MVCFlexGrid.Models
@using C1.Web.Mvc.Grid;
@model IEnumerable<Sale>
<script>
// 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;
}
}
</script>
<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>
</c1-flex-grid>
|
|
