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)&nbsp;<input id="newRowAtTop" type="checkbox" onchange="setNewRowAtTop()" />
</p>

@section Description{
    <p>@Html.Raw(MultiRowRes.CustomEditors_Text0)</p>
    <p>@Html.Raw(MultiRowRes.CustomEditors_Text15)</p>
}