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>
}