FlexGrid
ページング
機能
サンプル
設定
説明
このサンプルは、FlexGrid を使用してページ付きビューを実装する方法を示します。 すべての作業は、グリッドのデータソースとして使用される CollectionView クラスによって行われます。 ページングを有効にするには、FlexGrid または CollectionViewService の PageSize プロパティを設定します。 ページを切り替えるには、Pager コントロールを使用し、Pager.Owner プロパティを FlexGrid または CollectionViewService の ID に設定します。
メモ: ページング UI は、グリッド外で実装されます。これにより、 ページングメカニズムの外観と機能を完全に制御できます。 JavaScript で Pager をカスタマイズする方法については、クライアント CollectionView クラスを参照してください。
ソース
PagingController.cs
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using MvcExplorer.Models;
using Microsoft.AspNetCore.Http;
namespace MvcExplorer.Controllers
{
public partial class FlexGridController : Controller
{
private readonly ControlOptions _gridPagingModel = new ControlOptions
{
Options = new OptionDictionary
{
{"Page Size", new OptionItem {Values = new List<string> {"10", "25", "50", "100"}, CurrentValue = "25"}},
}
};
public ActionResult Paging(IFormCollection data)
{
_gridPagingModel.LoadPostData(data);
ViewBag.DemoOptions = _gridPagingModel;
return View();
}
public ActionResult Paging_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
{
return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(500)));
}
}
}
Paging.cshtml
@model IEnumerable<Sale>
@{
ControlOptions optionsModel = ViewBag.DemoOptions;
ViewBag.DemoSettings = true;
}
@section Styles{
<style>
.customGrid {
margin-top: 5px;
}
</style>
}
<c1-items-source id="collectionViewService" read-action-url="@Url.Action("Paging_Bind")"
page-size="@Convert.ToInt32(optionsModel.Options["PageSize"].CurrentValue)"></c1-items-source>
<c1-pager owner="collectionViewService"></c1-pager>
<c1-flex-grid height="300px" id="pagingGrid" class="customGrid"
is-read-only="true" items-source-id="collectionViewService">
</c1-flex-grid>
<c1-pager owner="pagingGrid"></c1-pager>
@section Settings{
@await Html.PartialAsync("_OptionsMenu", optionsModel)
}
@section Description{
<p>@Html.Raw(FlexGridRes.Paging_Text0)</p>
<p>@Html.Raw(FlexGridRes.Paging_Text1)</p>
}
マニュアル