FlexGrid
列のレイアウト
機能
サンプル
説明
FlexGrid にはクライアント ColumnLayout プロパティがあり、グリッド列とそのプロパティのリストを含む JSON 文字列を取得または設定します。 datamap 列はサポートされていません。 このサンプルでは、クライアントの ColumnLayout プロパティを使用して、列レイアウトをブラウザの localStorage に保持します。FlexGrid は、サーバー側での列レイアウトの保存/ロードをサポートします。 これは、列レイアウトをストレージ/データベースに保存して、ユーザーごとに異なる表示を行う場合に便利です。実装については、「ColumnLayout」のハウツーサンプルを参照してください。
これがどう動作するかを確認するには、次の手順に従います。
- いくつかの列をサイズ変更し、新しい位置にドラッグします。
- ［列レイアウトの保存］ボタンをクリックし、変更をローカルストレージに保存します。
- ページをリフレッシュして元のレイアウトを復元します。
- ［列レイアウトのロード］ボタンをクリックしてレイアウトをローカルストレージから復元します。
ソース
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>
}
マニュアル