FlexGrid
Group Panel
The GroupPanel feature allows you to add a drag-drop grouping UI to any FlexGrid control.
Features
Drag columns here to create Groups
ID
Start
End
Country
Product
Color
Active
1
1/25/2025
1/25/2025
German
Gadget
Green
2
2/25/2025
2/25/2025
Italy
Gadget
Green
ID
Start
End
Country
Product
Color
Active
0
Settings
Description
The GroupPanel feature allows you to add a drag-drop grouping UI to any FlexGrid control.
The drag-drop is supported on computer by using mouse and touch devices by touching.
If 'Group Description Creator' is True, 'Start' and 'End' columns can group by Year, 'Country' column can group by continent
The drag-drop is supported on computer by using mouse and touch devices by touching.
If 'Group Description Creator' is True, 'Start' and 'End' columns can group by Year, 'Country' column can group by continent
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 | using MvcExplorer.Models;using System.Collections.Generic;using System.Web.Mvc;namespace MvcExplorer.Controllers{ public partial class FlexGridController : Controller { private readonly ControlOptions _gridGroupPanelModel = new ControlOptions { Options = new OptionDictionary { {"Max Groups", new OptionItem {Values = new List<string> {"3", "4", "5", "6"}, CurrentValue = "3"}}, {"Placeholder", new OptionItem {Values = new List<string> {Resources.FlexGrid.GroupPanel_Placeholder1, Resources.FlexGrid.GroupPanel_Placeholder2}, CurrentValue = Resources.FlexGrid.GroupPanel_Placeholder1}}, {"Hide Grouped Columns", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "False"}}, {"Group Description Creator", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "False"}} } }; public ActionResult GroupPanel(FormCollection data) { _gridGroupPanelModel.LoadPostData(data); ViewBag.DemoOptions = _gridGroupPanelModel; 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 | @using C1.Web.Mvc.Grid@model IEnumerable<Sale>@{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true;}<script type="text/javascript"> var europe = ["UK", "France", "German", "Italy"], american = ["US", "Canada"], asian = ["Japan", "China", "Korea"], autralian = ["Australia"]; function customGroup(prop) { switch (prop) { case 'Start': case 'End': return new wijmo.collections.PropertyGroupDescription(prop, function (item, prop) { return wijmo.Globalize.formatDate(item[prop], 'yyyy'); }); break; case 'Country': return new wijmo.collections.PropertyGroupDescription(prop, function (item, prop) { if (europe.indexOf(item.Country) > -1) { return "Europe"; } else if (american.indexOf(item.Country) > -1) { return "American"; } else if (asian.indexOf(item.Country) > -1) { return "Asian"; } else { return "Australian"; } }); break; } }</script>@(Html.C1().FlexGrid<Sale>() .Id("ovFlexGrid").ShowGroupPanel(s=>s .MaxGroups(Convert.ToInt32(optionsModel.Options["Max Groups"].CurrentValue)) .Placeholder(optionsModel.Options["Placeholder"].CurrentValue) .HideGroupedColumns(Convert.ToBoolean(optionsModel.Options["Hide Grouped Columns"].CurrentValue)) .GroupDescriptionCreator(Convert.ToBoolean(optionsModel.Options["Group Description Creator"].CurrentValue) ? "customGroup" : null) ) .AutoGenerateColumns(false) .Bind(Model) .CssClass("grid") .IsReadOnly(true) .Columns(bl => { bl.Add(cb => cb.Binding("ID")); bl.Add(cb => cb.Binding("Start")); bl.Add(cb => cb.Binding("End")); bl.Add(cb => cb.Binding("Country")); bl.Add(cb => cb.Binding("Product")); bl.Add(cb => cb.Binding("Color")); bl.Add(cb => cb.Binding("Active")); }))@section Settings{ @Html.Partial("_OptionsMenu", optionsModel)}@section Description{ @Html.Raw(Resources.FlexGrid.GroupPanel_Text0) <br/> @Html.Raw(Resources.FlexGrid.GroupPanel_Text1) <br /> @Html.Raw(Resources.FlexGrid.GroupDescriptionCreator_Text0)} |