FlexGrid
Column Layout
Features
Sample
Description
The FlexGrid has a client columnLayout property that gets or sets a JSON string containing a list of grid columns and their properties, It doesn't support the datamap column. This sample uses the client columnLayout property to persist the column layout to the browser's localStorage. FlexGrid also supports server-side saving\loading of column layout, this is helpful in cases where column layout maybe saved in a storage\database to present different users with different view. Please refer "ColumnLayout" HowTo sample for the implementation.
To see how this works, follow these steps:
- Resize some columns and drag some to new positions.
- Click the "Save Column Layout" button to save the changes to local storage.
- Refresh the page to restore the original layout.
- Click the "Load Column Layout" button to restore the layout from local storage.
Source
ColumnLayoutController.cs
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public partial class FlexGridController : Controller
{
public ActionResult ColumnLayout()
{
var model = Sale.GetData(500);
return View(model);
}
}
}
ColumnLayout.cshtml
@model IEnumerable<Sale>
@section Scripts{
<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="@FlexGridRes.ColumnLayout_SaveColumnLayout" class="btn" onclick="saveColumnLayout()" />
<input type="button" value="@FlexGridRes.ColumnLayout_LoadColumnLayout" class="btn" onclick="loadColumnLayout()" />
<c1-flex-grid id="ovFlexGrid" auto-generate-columns="false" class="grid" is-read-only="true" sorting-type="SingleColumn">
<c1-flex-grid-column binding="ID" is-visible="true"></c1-flex-grid-column>
<c1-flex-grid-column binding="Start" format="@("MMM d yy")"></c1-flex-grid-column>
<c1-flex-grid-column binding="End" format="@("HH:mm")"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country" width="@("100")"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Color"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active"></c1-flex-grid-column>
<c1-items-source initial-items-count="100" source-collection="Model"></c1-items-source>
</c1-flex-grid>
@section Description{
<p>@Html.Raw(FlexGridRes.ColumnLayout_Text0)</p>
<p>@Html.Raw(FlexGridRes.ColumnLayout_Text1)</p>
<ol>
<li>@Html.Raw(FlexGridRes.ColumnLayout_Li1)</li>
<li>@Html.Raw(FlexGridRes.ColumnLayout_Li2)</li>
<li>@Html.Raw(FlexGridRes.ColumnLayout_Li3)</li>
<li>@Html.Raw(FlexGridRes.ColumnLayout_Li4)</li>
</ol>
}
Documentation