Features
- Overview
- Collapsible Column Headers
- Styling Records, Groups, and Cells
- Grouping
- Group Headers
- Row Header
- Filtering
- Row and Column Freezing
- Paging
- Group Panel
- Remote Data Binding
- Custom Cells
- Custom Editors
- Custom Column Headers
- Editing
- Batch Editing
- Sorting
- Virtual Scrolling
- Disable Server Reading
- Data Map
- Excel Export
- PDF Export
- Unobtrusive Validation
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) <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> }