Features

カスタムエディタ

カスタムエディタ

機能

一番上の新しい行: 

説明

このサンプルは、MultiRowコントロールに行を追加したりセルの値を変更したりする方法を示します。

このサンプルでは、NewRowAtTopプロパティを使用して、グリッドの上部または下部に新しい行を追加できるようにします。

このサンプルでは、EditTemplateIdプロパティを使用してセルエディタのテンプレートのIDを指定しています。
ユーザーがセルの編集を開始すると、エディタが表示され、フォーカスが取得されます。

次の3種類のエディタがあります。

  • 「Value」または「Text」プロパティを持つC1 Inputコントロールを使用

    セルのEditTemplateプロパティを設定する必要があります。

    グリッドで新しい行を追加できる場合は、エディタのIsRequiredプロパティをfalseに設定する必要があります。
    セル全体をエディタに表示する場合は、スタイルの幅を「100%」に設定する必要があります。

    このサンプルでは、「Date」、「Time」、「Country」、「Amount」、および「Color」がC1 Inputコントロールをエディタとして使用します。

  • 他のコントロール、あるいは「Value」または「Text」プロパティを持たないC1コントロールを使用

    グリッドのOnClientCellEditEndingイベントを使用し、


    cellEditEndingEventArgs.cancel = true;

    を設定して更新を適用する必要があります。

    次に、セル値をいつ更新し、アプリケーション内のグリッドからエディタを除去するかを検討する必要があります。
    たとえば、エディタがフォーカスを失ったときに、セル値を更新してエディタを除去する必要があります。

    このサンプルでは、「Product」列がをエディタとして使用しています。

    イベントハンドラで連結列を取得するには、MultiRowのgetBindingColumn関数を使用してください。

  • グリッドの内部エディタを使用

    この例では、「Amount2」と「Active」がグリッドの内部エディタを使用しています。ここでは、何もする必要がありません。

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;
                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();
                }
            });
        });

        // The following scripts are added to customize updating for the Product column.

        // apply the customized updating for the Product column
        function cellEditEnding(grid, cellRangeEventArgs) {
            var row = cellRangeEventArgs.row, col = cellRangeEventArgs.col;
            var bcol = grid.getBindingColumn(grid.cells, row, col);
            // when it is the editor of the "Product" column,
            // apply the updating manually.
            if (!cellRangeEventArgs.cancel
                && cellRangeEventArgs.panel.cellType == wijmo.grid.CellType.Cell
                && bcol.binding == 'Product') {
                updateCellValue(grid, cellRangeEventArgs);
                cellRangeEventArgs.cancel = true;
            }
        }

        function productEditorFocus(event) {
            var input = event.currentTarget;
            if (input) {
                wijmo.setSelectionRange(input, 0, input.value.length);
            }
        }

        function productEditorBlur(event) {
            var input = event.currentTarget;
            setTimeout(function () {
                if (wijmo.contains(document.activeElement, input)
                    // ensure the input element is not removed from the page.
                    || !document.body.contains(input)) {
                    return;
                }
                var wrapper = input.parentNode,
                   cellRange = getActiveEditorCellRange(input),
                   grid = wijmo.Control.getControl('#customEditorsMultiRow');
                updateCellValue(grid, cellRange);
                if(wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
            });
        }

        // the id of the element would be [MultiRow's id] + "_Cell_r" + row + "_c" + col + "_"
        function getActiveEditorCellRange(ele) {
            var id = ele.id, strId,
                row, col, index;
            if (id) {
                strId = id.substr('customEditorsMultiRow_Cell_r'.length);
                index = strId.indexOf('_c');
                row = parseInt(strId.substring(0, index));
                col = parseInt(strId.substr(index + 2));
                return { row: row, col: col };
            }
        }

        // update the Product cell's value with its editor.
        function updateCellValue(grid, cellRangeEventArgs) {
            var row, col,
                sel = grid.selection,
                cv = grid.collectionView;

            row = cellRangeEventArgs.row;
            col = cellRangeEventArgs.col;
            var input = getEditorControl(row, col);
            grid.setCellData(row, col, input.value);
            var itemIndex = grid._getCvIndex(row);
            cv.editItem(cv.items[itemIndex]);
            cv.commitEdit();
            cv.commitNew();
        }

        function getEditorControl(row, col) {
            var elementId = 'customEditorsMultiRow_Cell_r' + row + '_c' + col;
            return document.getElementById(elementId);
        }
    </script>
}

<script id="edtDate" type="text/template">
    @(Html.C1().InputDate()
        .Id("dateEditor")
        .Format("d")
        .IsRequired(false) // add this for new row
        .CssStyle("width", "100%") // full with the cell
        .TemplateBind("Value", "Start")
        .ToTemplate()
    )
</script>
<script id="edtTime" type="text/template">
    @(Html.C1().InputTime()
        .Id("timeEditor")
        .Step(30)
        .Format("t")
        .IsRequired(false) // add this for new row
        .CssStyle("width", "100%") // full with the cell
        .TemplateBind("Value", "End").ToTemplate()
    )
</script>
<script id="edtAmount" type="text/template">
    @(Html.C1().InputNumber()
        .Id("amountEditor")
        .Format("c2")
        .IsRequired(false) // add this for new row
        .CssStyle("width", "100%") // full with the cell
        .Step(10)
        .TemplateBind("Value", "Amount").ToTemplate()
    )
</script>
<script id="edtCountry" type="text/template">
    @(Html.C1().ComboBox()
        .Id("countryEditor")
        .IsEditable(false)
        .Bind(countries)
        .CssStyle("width", "100%") // full with the cell
        .TemplateBind("Text", "Country").ToTemplate()
    )
</script>
<script id="edtProduct" type="text/template">
    <input type="text" id="{{uid}}" onfocus="productEditorFocus(event)" onblur="productEditorBlur(event)" style="width:100%;height:100%" value="{{Product}}" />
</script>
<script id="edtColor" type="text/template">
    @(Html.C1().InputColor()
        .Id("colorEditor")
        .CssStyle("width", "100%") // full with the cell
        .TemplateBind("Text", "Color").ToTemplate()
    )
</script>
<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").CellTemplate(ctb => ctb.EditTemplateId("edtDate")));
            cells.Add(cell => cell.Binding("End").Header("Time").Format("t").CellTemplate(ctb => ctb.EditTemplateId("edtTime")));
        });
        ld.Add().Colspan(2).Cells(cells =>
        {
            cells.Add(cell => cell.Binding("Country").Header("Country").Colspan(2).CellTemplate(ctb => ctb.EditTemplateId("edtCountry")));
            cells.Add(cell => cell.Binding("Product").Header("Product").CellTemplate(ctb => ctb.EditTemplateId("edtProduct")));
            cells.Add(cell => cell.Binding("Color").Header("Color").CellTemplate(ctb => ctb.EditTemplateId("edtColor")));
        });
        ld.Add().Cells(cells =>
        {
            cells.Add(cell => cell.Binding("Amount").Header("Amount").Format("n2").CellTemplate(ctb => ctb.EditTemplateId("edtAmount")));
            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))
    .OnClientCellEditEnding("cellEditEnding")
    .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>

<p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text1)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text2)</p>

<ul class="normal">
    <li>
<b>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text11)</b>
<p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text3)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text4)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text5)</p>

    </li>
    <li>
<b>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text12)</b>
<p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text6)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text7)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text8)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text9)</p>

    </li>
    <li>
<b>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text13)</b>
<p>@Html.Raw(Resources.MultiRowExplorer.CustomEditors_Text10)</p>

    </li>
</ul>
}