Features
カスタムエディタ
カスタムエディタ
機能
一番上の新しい行:
説明
このサンプルは、MultiRowコントロールに行を追加したりセルの値を変更したりする方法を示します。
このサンプルでは、NewRowAtTopプロパティを使用して、グリッドの上部または下部に新しい行を追加できるようにします。
using C1.Web.Mvc; using MultiRowExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using Microsoft.AspNetCore.Mvc; using C1.Web.Mvc.Serialization; namespace MultiRowExplorer.Controllers { public partial class MultiRowController : Controller { private static List<Sale> Source = Sale.GetData(10).ToList<Sale>(); public ActionResult CustomEditors() { ViewBag.Countries = Sale.GetCountries(); ViewBag.Products = Sale.GetProducts(); return View(); } public ActionResult CustomEditors_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, Source)); } public ActionResult MultiRowEditorsUpdate([C1JsonRequest]CollectionViewEditRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit<Sale>(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 MultiRowEditorsCreate([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 MultiRowEditorsDelete([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)); } } }
@model IEnumerable<Sale> @{ List<string> countries = ViewBag.Countries; List<string> products = ViewBag.Products; } @section Scripts{ <script type="text/javascript"> c1.documentReady(function () { var grid = wijmo.Control.getControl('#customEditorsMultiRow'); grid.hostElement.addEventListener('keydown', function (e) { if (e.keyCode == 32) { e.preventDefault(); } }); }); function setNewRowAtTop() { var multirow = wijmo.Control.getControl("#customEditorsMultiRow"); var checkbox = document.getElementById("newRowAtTop"); multirow.newRowAtTop = checkbox.checked; } </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-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> <c1-input-number id="amountEditor" style="width:100%" is-required="false" format="c2" step="10"></c1-input-number> <!-- MultiRow hosting the custom editors --> <c1-multi-row id="customEditorsMultiRow" allow-add-new="true" allow-delete="true" key-action-tab="Cycle" class="multirow" new-row-at-top="false"> <c1-items-source read-action-url="@Url.Action("CustomEditors_Bind")" update-action-url="@Url.Action("MultiRowEditorsUpdate")" create-action-url="@Url.Action("MultiRowEditorsCreate")" delete-action-url="@Url.Action("MultiRowEditorsDelete")"> </c1-items-source> <c1-multi-row-cell-group> <c1-multi-row-cell binding="ID" header="ID" is-read-only="true"></c1-multi-row-cell> <c1-multi-row-cell binding="Active" header="Active" is-read-only="false"></c1-multi-row-cell> </c1-multi-row-cell-group> <c1-multi-row-cell-group> <c1-multi-row-cell binding="Start" header="Date" width="150" format="d" editor="dateEditor"></c1-multi-row-cell> <c1-multi-row-cell binding="End" header="Time" format="t" editor="timeEditor"></c1-multi-row-cell> </c1-multi-row-cell-group> <c1-multi-row-cell-group colspan="2"> <c1-multi-row-cell binding="Country" header="Country" colspan="2" editor="countryEditor"></c1-multi-row-cell> <c1-multi-row-cell binding="Product" header="Product"></c1-multi-row-cell> <c1-multi-row-cell binding="Color" header="Color" editor="colorEditor"></c1-multi-row-cell> </c1-multi-row-cell-group> <c1-multi-row-cell-group> <c1-multi-row-cell binding="Amount" header="Amount" format="n2" editor="amountEditor"></c1-multi-row-cell> <c1-multi-row-cell binding="Amount2" header="Amount2"></c1-multi-row-cell> </c1-multi-row-cell-group> </c1-multi-row> <p> @Html.Raw(MultiRowRes.CustomEditors_Text14) <input id="newRowAtTop" type="checkbox" onchange="setNewRowAtTop()" /> </p> @section Description{ <p>@Html.Raw(MultiRowRes.CustomEditors_Text0)</p> <p>@Html.Raw(MultiRowRes.CustomEditors_Text15)</p> }