FlexGrid
FlexGrid
Column Layout
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.
Features
ID
Start
End
Country
Product
Color
Amount
Amount2
Active
ID
Start
End
Country
Product
Color
Amount
Amount2
Active
1
Jan 25 25
00:00
Japan
Gadget
Green
($1,375.59)
$4,973.59
2
Feb 25 25
01:30
France
Gadget
Black
($675.56)
$1,595.47
0
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | @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> } |