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)&nbsp;<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>
}