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
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 | using System.Web.Mvc;using System.Collections.Generic;using C1.Web.Mvc.Grid;using MvcExplorer.Models;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(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 67 68 69 70 71 72 73 | @using C1.Web.Mvc.Grid@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>}@(Html.C1().FlexGrid<Sale>().Id(settings.ControlId) .AutoGenerateColumns(false) .AllowMerging(AllowMerging.All) .ExpandSelectionOnCopyPaste(true) .IsReadOnly(false) .Bind(Model) .CssClass("grid") .Columns(columns => { columns.Add(column => column.Binding("ID").Width("70")); columns.Add(column => column.Binding("Country").AllowMerging(true)); columns.Add(column => column.Binding("Product").AllowMerging(true)); columns.Add(column => column.Binding("Color").AllowMerging(true)); columns.Add(column => column.Binding("Amount").Format("c")); columns.Add(column => column.Binding("Discount").Width("100").Format("p0")); columns.Add(column => column.Binding("Active").Width("80").AllowMerging(true)); }))@section Description{ @Html.Raw(Resources.FlexGrid.MergeCells_Text0) <br /> @Html.Raw(Resources.FlexGrid.MergeCells_Text1)} |