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 Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using System.Collections.Generic; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Http; 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> {Localization.FlexGridRes.GroupPanel_Placeholder1, Localization.FlexGridRes.GroupPanel_Placeholder2}, CurrentValue = Localization.FlexGridRes.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(IFormCollection data) { _gridGroupPanelModel.LoadPostData(data); ViewBag.DemoOptions = _gridGroupPanelModel; return View(); } public ActionResult GroupPanel_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(500))); } } }
GroupPanel.cshtml
@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> <c1-flex-grid id="ovFlexGrid" auto-generate-columns="false" is-read-only="true" class="grid"> <c1-flex-grid-column binding="ID"></c1-flex-grid-column> <c1-flex-grid-column binding="Start"></c1-flex-grid-column> <c1-flex-grid-column binding="End"></c1-flex-grid-column> <c1-flex-grid-column binding="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Color"></c1-flex-grid-column> <c1-flex-grid-column binding="Active"></c1-flex-grid-column> <c1-items-source read-action-url="@Url.Action("GroupPanel_Bind")"></c1-items-source> <c1-flex-grid-group-panel max-groups="@(Convert.ToInt32(optionsModel.Options["Max Groups"].CurrentValue))" placeholder="@(optionsModel.Options["Placeholder"].CurrentValue)" hide-grouped-columns="@(Convert.ToBoolean(optionsModel.Options["Hide Grouped Columns"].CurrentValue))" group-description-creator=@((Convert.ToBoolean(optionsModel.Options["Group Description Creator"].CurrentValue)) ? "customGroup" : "null")> </c1-flex-grid-group-panel> </c1-flex-grid> @section Settings{ @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Description{ @Html.Raw(FlexGridRes.GroupPanel_Text0) <br/> @Html.Raw(FlexGridRes.GroupPanel_Text1) <br/> @Html.Raw(FlexGridRes.GroupDescriptionCreator_Text0) }
Documentation