FlexGrid
Group Panel
Features
Sample
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
Source
GroupPanelController.cs
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)); } } }
GroupPanel.cshtml
@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) }
Documentation