FlexGrid
Custom Editors
This sample shows how you can use custom editors to change the values in FlexGrid cells.
Features
Sample
Settings
Description
The sample demonstrates two ways to set up editors other than FlexGrid’s internal editor: EditTemplate and Column Editor properties.
When the user starts editing a cell, the editor will show and get the focus.
The sample also shows how to customize the action for tab key and enter key using KeyActionTab and KeyActionEnter properties. Especially we can select the setting CycleEditable to facilitates editting by moving the selection to the next editable when press tab/enter key.
Source
CustomEditorsController.cs
using C1.Web.Mvc; using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using C1.Web.Mvc.Serialization; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private static List<Sale> Source = Sale.GetData(20).ToList<Sale>(); public ActionResult CustomEditors() { ViewBag.DemoSettings = true; ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = _getCustomEditorClientSettings(), DefaultValues = _getCustomEditorDefaultValues() }; ViewBag.Countries = Sale.GetCountries(); ViewBag.Products = Sale.GetProducts(); return View(Source); } private static IDictionary<string, object[]> _getCustomEditorClientSettings() { return new Dictionary<string, object[]> { {"KeyActionTab", new object[]{ "None", "MoveDown", "MoveAcross", "Cycle", "CycleOut", "CycleEditable" }}, {"KeyActionEnter", new object[]{ "None", "MoveDown", "MoveAcross", "Cycle", "CycleOut", "CycleEditable" }} }; } private static IDictionary<string, object> _getCustomEditorDefaultValues() { var defaultValues = new Dictionary<string, object> { {"KeyActionTab", "CycleEditable"}, {"KeyActionEnter", "MoveDown"} }; return defaultValues; } public ActionResult GridEditorsUpdate([C1JsonRequest]CollectionViewEditRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit(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 GridEditorsCreate([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 GridEditorsDelete([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)); } } }
CustomEditors.cshtml
@model IEnumerable<Sale> @{ ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; List<string> countries = ViewBag.Countries; List<string> products = ViewBag.Products; } @section Scripts{ <script type="text/javascript"> c1.documentReady(function () { var grid = wijmo.Control.getControl('#customGridEditorsGrid'); grid.hostElement.addEventListener('keydown', function (e) { if (e.keyCode == 32) { e.preventDefault(); } }); }); function customChangeKeyActionTab(control, value) { var control = wijmo.Control.getControl("#customGridEditorsGrid"); control.keyActionTab = value; control.invalidate(); } function customChangeKeyActionEnter(control, value) { var control = wijmo.Control.getControl("#customGridEditorsGrid"); control.keyActionEnter = value; control.invalidate(); } </script> } @(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().InputDate() .Id("dateEditor") .Format("d") .IsRequired(false) // add this for new row .CssStyle("width", "100%") // full with the cell ) @(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 ) @(Html.C1().InputTime() .Id("timeEditor") .Step(30) .Format("t") .IsRequired(false) // add this for new row .CssStyle("width", "100%") // full with the cell ) <!-- FlexGrid hosting the custom editors --> @(Html.C1().FlexGrid<Sale>() .Id("customGridEditorsGrid") .KeyActionTab(C1.Web.Mvc.Grid.KeyAction.CycleEditable) .KeyActionEnter(C1.Web.Mvc.Grid.KeyAction.MoveDown) .AllowAddNew(true) .AllowDelete(true) .AutoGenerateColumns(false) .Columns(bl => { bl.Add(cb => cb.Binding("ID").Width("0.4*").IsReadOnly(true)); bl.Add(cb => cb.Binding("Start").Header("Date").Width("*").Format("d").Editor("dateEditor")); bl.Add(cb => cb.Binding("End").Header("Time").Width("*").Format("t").Editor("timeEditor")); bl.Add(cb => cb.Binding("Country").Width("1.5*").Editor("countryEditor")); bl.Add(cb => cb.Binding("Product").Width("1.5*")); bl.Add(cb => cb.Binding("Amount").Format("n2").Width("1.5*").Editor("amountEditor")); bl.Add(cb => cb.Binding("Amount2").Format("n2").Width("1.5*")); bl.Add(cb => cb.Binding("Color").Width("1.5*").Editor("colorEditor")); bl.Add(cb => cb.Binding("Active").Width("1.5*")); }) .Bind(bl => bl.Update(Url.Action("GridEditorsUpdate")) .Create(Url.Action("GridEditorsCreate")) .Delete(Url.Action("GridEditorsDelete")) .Bind(Model)) .CssStyle("height", "500px") ) @section Summary{ <p>@Html.Raw(Resources.FlexGrid.CustomEditors_Text0)</p> } @section Description{ <p>@Html.Raw(Resources.FlexGrid.CustomEditors_Text1)</p> <p>@Html.Raw(Resources.FlexGrid.CustomEditors_Text2)</p> <p>@Html.Raw(Resources.FlexGrid.CustomEditors_Text13)</p> }
Documentation