FlexGrid
カスタムエディタ
このサンプルは、カスタムエディタを使用して FlexGrid セルの値を変更する方法を示します。
機能
サンプル
設定
説明
このサンプルは、EditTemplate プロパティおよび Editor プロパティを使用してグリッドの内部エディタ以外のエディタを設定する方法を示します。
ユーザーがセルの編集を開始すると、 エディタが表示され、フォーカスが取得されます。
このサンプルでは、KeyActionTabおよびKeyActionEnterプロパティを使用してタブキーおよびEnterキーを押したときに実行されるアクションをカスタマイズする方法を紹介します。特に、CycleEditableを選択して、Tab/Enterキーを押したときに選択範囲を次の編集可能な列に移動することで、編集を容易にすることができます。
ソース
CustomEditorsController.cs
using C1.Web.Mvc; using System.Collections.Generic; using System.Linq; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using System; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private static List<Sale> Source = Sale.GetData(20).ToList<Sale>(); public ActionResult CustomEditors() { ViewBag.DemoSettings = true; ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = _getCustomEditorClientSettings(), DefaultValues = _getCustomEditorDefaultValues() }; ViewBag.Countries = Sale.GetCountries(); ViewBag.Products = Sale.GetProducts(); return View(); } private static IDictionary<string, object[]> _getCustomEditorClientSettings() { return new Dictionary<string, object[]> { {"KeyActionTab", new object[]{ "None", "MoveDown", "MoveAcross", "Cycle", "CycleOut", "CycleEditable" }}, {"KeyActionEnter", new object[]{ "None", "MoveDown", "MoveAcross", "Cycle", "CycleOut", "CycleEditable" }} }; } private static IDictionary<string, object> _getCustomEditorDefaultValues() { var defaultValues = new Dictionary<string, object> { {"KeyActionTab", "CycleEditable"}, {"KeyActionEnter", "MoveDown"} }; return defaultValues; } public ActionResult CustomEditorsBind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, Source)); } public ActionResult GridEditorsUpdate([C1JsonRequest]CollectionViewEditRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit(requestData, sale => { string error = string.Empty; bool success = true; var fSale = Source.Find(item => item.ID == sale.ID); fSale.Country = sale.Country; fSale.Amount = sale.Amount; fSale.Start = sale.Start; fSale.End = sale.End; fSale.Product = sale.Product; fSale.Active = sale.Active; fSale.Amount2 = sale.Amount2; fSale.Color = sale.Color; return new CollectionViewItemResult<Sale> { Error = error, Success = success && ModelState.IsValid, Data = fSale }; }, () => Source)); } public ActionResult GridEditorsCreate([C1JsonRequest]CollectionViewEditRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit(requestData, item => { string error = string.Empty; bool success = true; try { Source.Add(item); item.ID = Source.Max(u => u.ID) + 1; } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult<Sale> { Error = error, Success = success, Data = item }; }, () => Source)); } public ActionResult GridEditorsDelete([C1JsonRequest]CollectionViewEditRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit(requestData, item => { string error = string.Empty; bool success = true; try { var resultItem = Source.Find(u => u.ID == item.ID); Source.Remove(resultItem); } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult<Sale> { Error = error, Success = success, Data = item }; }, () => Source)); } } }
CustomEditors.cshtml
@model IEnumerable<Sale> @{ ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; List<string> countries = ViewBag.Countries; List<string> products = ViewBag.Products; } @section Scripts{ <script type="text/javascript"> c1.documentReady(function () { var grid = wijmo.Control.getControl('#customGridEditorsGrid'); grid.hostElement.addEventListener('keydown', function (e) { if (e.keyCode == 32) { e.preventDefault(); } }); }); function customChangeKeyActionTab(control, value) { var control = wijmo.Control.getControl("#customGridEditorsGrid"); control.keyActionTab = value; control.invalidate(); } function customChangeKeyActionEnter(control, value) { var control = wijmo.Control.getControl("#customGridEditorsGrid"); control.keyActionEnter = value; control.invalidate(); } </script> } <c1-input-date id="dateEditor" style="width:100%" is-required="false" format="d"></c1-input-date> <c1-input-time id="timeEditor" style="width:100%" is-required="false" step="30" format="t"></c1-input-time> <c1-input-number id="amountEditor" style="width:100%" is-required="false" format="c2" step="10"></c1-input-number> <c1-combo-box id="countryEditor" style="width:100%" is-editable="false"> <c1-items-source source-collection="@countries"></c1-items-source> </c1-combo-box> <c1-input-color id="colorEditor" style="width:100%" is-required="false"></c1-input-color> <!-- FlexGrid hosting the custom editors --> <c1-flex-grid id="customGridEditorsGrid" allow-add-new="true" allow-delete="true" key-action-tab="CycleEditable" key-action-enter="MoveDown" auto-generate-columns="false" style="height:500px"> <c1-flex-grid-column binding="ID" width="0.4*" is-read-only="true"></c1-flex-grid-column> <c1-flex-grid-column binding="Start" header="Date" width="*" format="d" editor="dateEditor"></c1-flex-grid-column> <c1-flex-grid-column binding="End" header="Time" width="*" format="t" editor="timeEditor"></c1-flex-grid-column> <c1-flex-grid-column binding="Country" width="1.5*" editor="countryEditor"></c1-flex-grid-column> <c1-flex-grid-column binding="Product" width="1.5*"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount" width="1.5*" format="n2" editor="amountEditor"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount2" width="1.5*" format="n2"></c1-flex-grid-column> <c1-flex-grid-column binding="Color" width="1.5*" format="n2" editor="colorEditor"></c1-flex-grid-column> <c1-flex-grid-column binding="Active" width="1.5*" format="n2"></c1-flex-grid-column> <c1-items-source read-action-url="@Url.Action("CustomEditorsBind")" update-action-url="@Url.Action("GridEditorsUpdate")" create-action-url="@Url.Action("GridEditorsCreate")" delete-action-url="@Url.Action("GridEditorsDelete")"> </c1-items-source> </c1-flex-grid> @section Summary{ <p>@Html.Raw(FlexGridRes.CustomEditors_Text0)</p> } @section Description{ <p>@Html.Raw(FlexGridRes.CustomEditors_Text1)</p> <p>@Html.Raw(FlexGridRes.CustomEditors_Text2)</p> <p>@Html.Raw(FlexGridRes.CustomEditors_Text13)</p> }
マニュアル