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
This sample shows how you can use custom editors to change the values in MultiRow cells.
Features
Active
Time
Product
Color
Amount2
1
1/25/2025
German
581.61
12:00 AM
Gadget
Green
-2,939.67
2
2/25/2025
Canada
4,919.02
1:30 AM
Gadget
Green
-4,673.75
3
3/25/2025
Japan
2,159.73
2:00 AM
Gadget
Red
-3,810.42
4
4/25/2025
German
1,248.66
3:30 AM
Gadget
Red
-2,815.93
5
5/25/2025
German
4,051.76
4:00 AM
Gadget
Black
-3,108.76
6
6/25/2025
Canada
-3,131.28
5:30 AM
Gadget
Black
-4,314.81
7
7/25/2025
China
698.62
6:00 AM
Widget
Red
-2,745.97
8
8/25/2025
US
3,464.15
7:30 AM
Widget
White
1,131.58
9
9/25/2025
Korea
-2,363.16
8:00 AM
Gadget
Black
3,425.60
10
10/25/2025
US
-2,836.94
9:30 AM
Widget
White
-4,283.10
ID
Date
Country
Amount
Active
Time
Product
Color
Amount2
0
loading...
New row at top:
Description
This sample shows how you can use custom editors to change the values in MultiRow cells.
This sample use the property NewRowAtTop displaying as checkbox to enable adding new row at the top or bottom of the grid.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | using C1.Web.Mvc; using MultiRowExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using Microsoft.AspNetCore.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(); } public ActionResult CustomEditors_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this .C1Json(CollectionViewHelper.Read(requestData, 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)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | @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(); } }); }); function setNewRowAtTop() { var multirow = wijmo.Control.getControl( "#customEditorsMultiRow" ); var checkbox = document.getElementById( "newRowAtTop" ); multirow.newRowAtTop = checkbox. checked ; } </script> } < c1-input-date id = "dateEditor" style = "width:100%" is-required = "false" format = "d" ></ c1-input-date > < c1-input-time id = "timeEditor" style = "width:100%" is-required = "false" step = "30" format = "t" ></ c1-input-time > < c1-combo-box id = "countryEditor" style = "width:100%" is-editable = "false" > < c1-items-source source-collection = "@countries" ></ c1-items-source > </ c1-combo-box > < c1-input-color id = "colorEditor" style = "width:100%" is-required = "false" ></ c1-input-color > < c1-input-number id = "amountEditor" style = "width:100%" is-required = "false" format = "c2" step = "10" ></ c1-input-number > <!-- MultiRow hosting the custom editors --> < c1-multi-row id = "customEditorsMultiRow" allow-add-new = "true" allow-delete = "true" key-action-tab = "Cycle" class = "multirow" new-row-at-top = "false" > < c1-items-source read-action-url = "@Url.Action(" CustomEditors_Bind ")" update-action-url = "@Url.Action(" MultiRowEditorsUpdate ")" create-action-url = "@Url.Action(" MultiRowEditorsCreate ")" delete-action-url = "@Url.Action(" MultiRowEditorsDelete ")" > </ c1-items-source > < c1-multi-row-cell-group > < c1-multi-row-cell binding = "ID" header = "ID" is-read-only = "true" ></ c1-multi-row-cell > < c1-multi-row-cell binding = "Active" header = "Active" is-read-only = "false" ></ c1-multi-row-cell > </ c1-multi-row-cell-group > < c1-multi-row-cell-group > < c1-multi-row-cell binding = "Start" header = "Date" width = "150" format = "d" editor = "dateEditor" ></ c1-multi-row-cell > < c1-multi-row-cell binding = "End" header = "Time" format = "t" editor = "timeEditor" ></ c1-multi-row-cell > </ c1-multi-row-cell-group > < c1-multi-row-cell-group colspan = "2" > < c1-multi-row-cell binding = "Country" header = "Country" colspan = "2" editor = "countryEditor" ></ c1-multi-row-cell > < c1-multi-row-cell binding = "Product" header = "Product" ></ c1-multi-row-cell > < c1-multi-row-cell binding = "Color" header = "Color" editor = "colorEditor" ></ c1-multi-row-cell > </ c1-multi-row-cell-group > < c1-multi-row-cell-group > < c1-multi-row-cell binding = "Amount" header = "Amount" format = "n2" editor = "amountEditor" ></ c1-multi-row-cell > < c1-multi-row-cell binding = "Amount2" header = "Amount2" ></ c1-multi-row-cell > </ c1-multi-row-cell-group > </ c1-multi-row > < p > @Html .Raw(MultiRowRes.CustomEditors_Text14) < input id = "newRowAtTop" type = "checkbox" onchange = "setNewRowAtTop()" /> </ p > @section Description{ < p > @Html .Raw(MultiRowRes.CustomEditors_Text0)</ p > < p > @Html .Raw(MultiRowRes.CustomEditors_Text15)</ p > } |