FlexGrid では、C1JSONRequest を使用してデータを直接取得できます。これは、サーバー、テーブル、および列を含むリモートデータの URL を指定します。返される配列は、CollectionView オブジェクトのデータソースとして使用されます。
CollectionViewHelper
は、コレクションに編集、フィルタ処理、グループ化、ソートなどのサービスを提供する静的クラスです。このクラスには次のメソッドも含まれます。
Read()
:コレクションからデータを取得します。Edit()
:FlexGrid で Excel 形式の編集を有効にします。詳細については、「Excel 形式の編集」を参照してください。BatchEdit()
:一度に複数の項目を編集できます。詳細については、「一括編集」を参照してください。Bind
プロパティは、特定の操作を実行するためのアクション URL メソッドを渡すことで、FlexGrid をコレクションに連結するために使用されます。
このトピックでは、既存のデータソースからデータを取得する方法について説明します。これは、データをダッシュボードとして表すデータ集約型のアプリケーションやシナリオを開発する際に役立ちます。ローカルモデル連結については、「クイックスタート:FlexGrid へのデータの追加」を参照してください。
次の図は、「クイックスタート」でアプリケーションに追加したモデル Sale.cs から、C1JSON 要求によってデータをフェッチした後の FlexGrid を示しています。
次のコード例は、リモートデータソースからデータをフェッチするために FlexGrid を連結する方法を示します。
RemoteBindController.cs
C# |
コードのコピー
|
---|---|
public partial class FlexGridController : Controller { public ActionResult Index() { return View(); } public IActionResult Index_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(15))); } } |
RemoteBind.cshtml
HTML |
コードのコピー
|
---|---|
@using C1.Web.Mvc.Grid <c1-flex-grid auto-generate-columns="false" allow-sorting="true" is-read-only="true" class="grid" selection-mode="SelectionMode.Row"> <c1-items-source read-action-url="@Url.Action("Index_Bind")"></c1-items-source> <c1-flex-grid-column binding="ID" is-visible="false" ></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"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column> </c1-flex-grid> |