Features
カスタムエディタ
カスタムエディタ
機能
一番上の新しい行:
説明
このサンプルは、MultiRowコントロールに行を追加したりセルの値を変更したりする方法を示します。
このサンプルでは、NewRowAtTopプロパティを使用して、グリッドの上部または下部に新しい行を追加できるようにします。
using C1.Web.Mvc; using MultiRowExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.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(Source); } public ActionResult MultiRowEditorsUpdate([C1JsonRequest]CollectionViewEditRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit<Sale>(requestData, sale => { string error = string.Empty; bool success = true; Sale 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 { Sale 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(); } }); }); </script> } @(Html.C1().InputDate() .Id("dateEditor") .Format("d") .IsRequired(false) // add this for new row .CssStyle("width", "100%") // full with the cell ) @(Html.C1().InputTime() .Id("timeEditor") .Step(30) .Format("t") .IsRequired(false) // add this for new row .CssStyle("width", "100%") // full with the cell ) @(Html.C1().InputNumber() .Id("amountEditor") .Format("c2") .IsRequired(false) // add this for new row .CssStyle("width", "100%") // full with the cell .Step(10) ) @(Html.C1().ComboBox() .Id("countryEditor") .IsEditable(false) .Bind(countries) .CssStyle("width", "100%") // full with the cell ) @(Html.C1().InputColor() .Id("colorEditor") .CssStyle("width", "100%") // full with the cell ) <script type="text/javascript"> function setNewRowAtTop() { var multirow = wijmo.Control.getControl("#customEditorsMultiRow"); var checkbox = document.getElementById("newRowAtTop"); multirow.newRowAtTop = checkbox.checked; } </script> <!-- MultiRow hosting the custom editors --> @(Html.C1().MultiRow<Sale>() .Id("customEditorsMultiRow") .KeyActionTab(KeyAction.Cycle) .AllowAddNew(true) .AllowDelete(true) .NewRowAtTop(false) .LayoutDefinition(ld => { ld.Add().Cells(cells => { cells.Add(cell => cell.Binding("ID").Header("ID").IsReadOnly(true)); cells.Add(cell => cell.Binding("Active").Header("Active")); }); ld.Add().Cells(cells => { cells.Add(cell => cell.Binding("Start").Header("Date").Width("150").Format("d").Editor("dateEditor")); cells.Add(cell => cell.Binding("End").Header("Time").Format("t").Editor("timeEditor")); }); ld.Add().Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Country").Header("Country").Colspan(2).Editor("countryEditor")); cells.Add(cell => cell.Binding("Product").Header("Product")); cells.Add(cell => cell.Binding("Color").Header("Color").Editor("colorEditor")); }); ld.Add().Cells(cells => { cells.Add(cell => cell.Binding("Amount").Header("Amount").Format("n2").Editor("amountEditor")); cells.Add(cell => cell.Binding("Amount2").Header("Amount2")); }); }) .Bind(bl => bl.Update(Url.Action("MultiRowEditorsUpdate")) .Create(Url.Action("MultiRowEditorsCreate")) .Delete(Url.Action("MultiRowEditorsDelete")) .Bind(Model)) .CssClass("multirow") ) <p> @Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text14) <input id="newRowAtTop" type="checkbox" onchange="setNewRowAtTop()" /> </p> @section Description{ <p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text0)</p> <p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text15)</p> }