FlexGrid
列の固定
PinningTypeプロパティを使用すると、列ヘッダーにピンアイコンを追加できます。アイコンをクリックすると、列の固定状態が切り替わります。
機能
サンプル
設定
説明
PinningTypeプロパティを使用すると、列ヘッダーにピンアイコンを追加できます。アイコンをクリックすると、列の固定状態が切り替わります。
ソース
ColumnPinningController.cs
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;
using MvcExplorer.Models;
using System.Collections.Generic;
using System.Linq;
namespace MvcExplorer.Controllers
{
public partial class FlexGridController : Controller
{
private readonly ControlOptions _columnPinningDataModel = new ControlOptions
{
Options = new OptionDictionary
{
{"Pinning Type", new OptionItem {Values = new List<string> {"None", "SingleColumn", "ColumnRange", "Both"}, CurrentValue = "SingleColumn"}}
}
};
public ActionResult ColumnPinning(IFormCollection collection)
{
_columnPinningDataModel.LoadPostData(collection);
ViewBag.DemoOptions = _columnPinningDataModel;
return View();
}
public ActionResult ColumnPinning_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
{
var extraData = requestData.ExtraRequestData
.ToDictionary(kvp => kvp.Key, kvp => new StringValues(kvp.Value.ToString()));
var data = new FormCollection(extraData);
_columnPinningDataModel.LoadPostData(data);
var model = Sale.GetData(500);
return this.C1Json(CollectionViewHelper.Read(requestData, model));
}
}
}
ColumnPinning.cshtml
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
@{
ControlOptions optionsModel = ViewBag.DemoOptions;
ViewBag.DemoSettings = true;
}
@section Scripts{
<script>
function collectingQueryData(sender, e) {
if (e.extraRequestData == null) {
e.extraRequestData = {};
}
@foreach (var menuName in optionsModel.Options.Keys.Select(ControlOptions.ToOptionName))
{
<text>
e.extraRequestData["@(menuName)"] = '@(optionsModel.Options[menuName].CurrentValue)';
</text>
}
}
</script>
}
<c1-flex-grid id="ovFlexGrid" auto-generate-columns="true" class="grid" is-read-only="true" width="900px"
pinning-type="@((PinningType)Enum.Parse(typeof(PinningType), optionsModel.Options["Pinning Type"].CurrentValue))">
<c1-items-source read-action-url="@Url.Action("ColumnPinning_Bind")" query-data="collectingQueryData"></c1-items-source>
</c1-flex-grid>
@section Settings{
@await Html.PartialAsync("_OptionsMenu", optionsModel)
}
@section Summary{
<p>@Html.Raw(FlexGridRes.AllowPinning_Text0)</p>
}
@section Description{
@Html.Raw(FlexGridRes.AllowPinning_Text0)
}
マニュアル