FlexGrid
FlexGrid
Merge Cells
This view shows the FlexGrid control's merge cells features.
Features
ID
Country
Product
Color
Amount
Discount
Active
1
German
Gadget
Green
$581.61
14%
2
Italy
($4,673.75)
13%
Number
String
Number
Boolean
ID
Country
Product
Color
Amount
Discount
Active
0
loading...
Settings
Allow Merging: All
Expand Selection On Copy Paste: True
Description
This view shows the FlexGrid control's merge cells features.
The ExpandSelectionOnCopyPaste allows to enables/disables automatically expanding the selection to include cells in merged ranges when copying or pasting.
The ExpandSelectionOnCopyPaste allows to enables/disables automatically expanding the selection to include cells in merged ranges when copying or pasting.
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 | using System.Collections.Generic; using C1.Web.Mvc.Grid; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult MergeCells() { ViewBag.DemoSettings = true; ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"AllowMerging", new object[]{AllowMerging.All, AllowMerging.None, AllowMerging.Cells, AllowMerging.ColumnHeaders, AllowMerging.RowHeaders, AllowMerging.AllHeaders}}, {"ExpandSelectionOnCopyPaste", new object[]{true, false}} } }; return View(); } public ActionResult MergeCells_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(500))); } } } |
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 | @model IEnumerable<Sale> @{ ClientSettingsModel settings = ViewBag.DemoSettingsModel; } @section Scripts{ <script> function updateHeaders() { var flex = wijmo.Control.getControl("#@settings.ControlId"); if (flex) { // insert new row if not yet if (flex.columnHeaders.rows.length === 1) { flex.columnHeaders.rows.insert(0, new wijmo.grid.Row()); } flex.columnHeaders.rows[0].allowMerging = true; // set headings so the cells merge for (var i = 0; i < flex.columns.length; i++) { var hdr = 'String'; switch (flex.columns[i].binding) { case 'ID': case 'Amount': case 'Discount': hdr = 'Number'; break; case 'Active': hdr = 'Boolean'; break; } flex.columnHeaders.setCellData(0, i, hdr); } @*// do the same to row headers var col = flex.rowHeaders.columns[0]; col.allowMerging = true; col.width = 80; for (i = 0; i < flex.rows.length; i++) { var start = Math.floor(i / 10) * 10, end = start + 9; flex.rowHeaders.setCellData(i, 0, start + " - " + end); }*@ } } c1.documentReady(function () { updateHeaders(); }); </script>} <c1-flex-grid id="@settings.ControlId" auto-generate-columns="false" allow-merging="All" expand-selection-on-copy-paste="true" is-read-only="false" class="grid"> <c1-flex-grid-column binding="ID" width="70"></c1-flex-grid-column> <c1-flex-grid-column binding="Country" allow-merging="true"></c1-flex-grid-column> <c1-flex-grid-column binding="Product" allow-merging="true"></c1-flex-grid-column> <c1-flex-grid-column binding="Color" allow-merging="true"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" width="100" format="p0"></c1-flex-grid-column> <c1-flex-grid-column binding="Active" width="80" allow-merging="true"></c1-flex-grid-column> <c1-items-source read-action-url="@Url.Action("MergeCells_Bind")"></c1-items-source> </c1-flex-grid> @section Description{ @Html.Raw(FlexGridRes.MergeCells_Text0) <br /> @Html.Raw(FlexGridRes.MergeCells_Text1) } |