Features

Custom Editors

Custom Editors

Features

New row at top: 

Description

This sample shows how you can customize the way to add rows or change the values in the cells of MultiRow control.

This sample uses the property NewRowAtTop displaying as checkbox to enable adding new row at the top or bottom of the grid.

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