FlexGrid には、Excel 形式の高速なセル内編集が組み込みでサポートされています。余分な列を追加して、そこに表示モードと編集モードを切り替えるための［編集］ボタンを置く必要はありません。
ユーザーは、任意のセルでキー入力することで編集を開始できます。これで、そのセルはクイック編集モードになります。このモードでは、カーソルキーを押すと編集が終了し、選択範囲が別のセルに移動します。［F2］キーを押すか、セルをダブルクリックすることで、編集を実行することもできます。これで、そのセルは完全編集モードになります。このモードでは、カーソルキーを押すと、セルテキスト内のカレットが移動します。編集を終了し、別のセルに移動するには、［Enter］、［Tab］、または［Esc］キーを押す必要があります。編集が終了すると、データは自動的に更新されます。
Grid、Column、または Row オブジェクトの IsReadOnly プロパティを使用して、Grid、Column、または Row レベルで編集を無効にすることができます。この例では、ID 列を読み取り専用にします。
次の図は、CollectionView を使用して編集を有効にした後の FlexGrid を示しています。この例では、「クイックスタート」でアプリケーションに追加した Sale.cs モデルを使用します。
次の例は、編集モードにあるグリッドの CRUD（Create、Read、Update、Delete）操作を示します。次のコードを使用すると、FlexGrid で Excel 形式の編集が有効になります。
Controller コードコントローラーに次の参照を追加します。
| C# |
コードのコピー
|
|---|---|
using C1.Web.Mvc; using <ApplicationName>.Models; using System; using System.Collections.Generic; using System.Linq; using C1.Web.Mvc.Serializition; using Microsoft.AspNetCore.Mvc; using System.Diagnostics; |
|
デフォルトのアクションメソッドを次のコードに置き換えます。
| C# |
コードのコピー
|
|---|---|
private static List<Sale> Sales = Sale.GetData(50).ToList>Sale> (); public IActionResult ExcelStyleEditing() { return View(); } public ActionResult GridReadData([C1JsonRequest] CollectionViewRequest>Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, Sales)); } [HttpPost] public ActionResult GridCreate([C1JsonRequest] CollectionViewEditRequest>Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit>Sale> (requestData, sales => { string error = string.Empty; bool success = true; try { Sale item = sales; if (sales?.ID == null) { sales.ID = People.Count; } Sales.Add(sales); } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult>Sale> { Error = error, Success = success && ModelState.IsValid, Data = sales }; }, () => Sales)); } [HttpPost] public ActionResult GridUpdate([C1JsonRequest] CollectionViewEditRequest>Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit>Sale> (requestData, sales => { string error = string.Empty; bool success = true; try { Sale item = sales; int index = Sales.FindIndex(x => x.ID == item.ID); Sales[index] = item; } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult>Sale> { Error = error, Success = success && ModelState.IsValid, Data = sales }; }, () => Sales)); } [HttpPost] public ActionResult GridDelete([C1JsonRequest] CollectionViewEditRequest>Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit>Sale> (requestData, sales => { string error = string.Empty; bool success = true; try { Sale person = Sales.Find(x => x.ID == sales.ID); Sales.Remove(sales); } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewItemResult>Sale> { Error = error, Success = success && ModelState.IsValid, Data = sales }; }, () => Sales)); } |
|
View コード
| CSHTML |
コードのコピー
|
|---|---|
<c1-flex-grid id="inlineEditGrid" auto-generate-columns="false" style="height:400px"> <c1-items-source read-action-url="@Url.Action("GridReadData")" update-action-url="GridUpdate" create-action-url="@Url.Action("GridCreate")" delete-action-url="@Url.Action("GridDelete")"></c1-items-source> <c1-flex-grid-column binding="ID" width="80" align="right" is-read-only="true"></c1-flex-grid-column> <c1-flex-grid-column binding="Country" name="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Color"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column> <c1-flex-grid-column binding="Active"></c1-flex-grid-column> </c1-flex-grid> |
|