FlexGrid
FlexGrid
Column Pinning
PinningType property allows to add pin icons to the column headers and clicking the icons toggles the column's frozen state
Features
ID
Start
End
Country
Product
Color
Amount
ID
Start
End
Country
Product
Color
Amount
1
1/25/2025
1/25/2025
German
Gadget
Green
581.61
2
2/25/2025
2/25/2025
Italy
Gadget
Green
-4,673.75
0
loading...
Settings
Description
PinningType property allows to add pin icons to the column headers and clicking the icons toggles the column's frozen state
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 | using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Primitives; using MvcExplorer.Models; using System.Collections.Generic; using System.Linq; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private readonly ControlOptions _columnPinningDataModel = new ControlOptions { Options = new OptionDictionary { {"Pinning Type", new OptionItem {Values = new List<string> {"None", "SingleColumn", "ColumnRange", "Both"}, CurrentValue = "SingleColumn"}} } }; public ActionResult ColumnPinning(IFormCollection collection) { _columnPinningDataModel.LoadPostData(collection); ViewBag.DemoOptions = _columnPinningDataModel; return View(); } public ActionResult ColumnPinning_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { var extraData = requestData.ExtraRequestData .ToDictionary(kvp => kvp.Key, kvp => new StringValues(kvp.Value.ToString())); var data = new FormCollection(extraData); _columnPinningDataModel.LoadPostData(data); var model = Sale.GetData(500); return this.C1Json(CollectionViewHelper.Read(requestData, model)); } } } |
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 | @using C1.Web.Mvc.Grid @model IEnumerable<Sale> @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; } @section Scripts{ <script> function collectingQueryData(sender, e) { if (e.extraRequestData == null) { e.extraRequestData = {}; } @foreach (var menuName in optionsModel.Options.Keys.Select(ControlOptions.ToOptionName)) { <text> e.extraRequestData["@(menuName)"] = '@(optionsModel.Options[menuName].CurrentValue)'; </text> } } </script>} <c1-flex-grid id="ovFlexGrid" auto-generate-columns="true" class="grid" is-read-only="true" width="900px" pinning-type="@((PinningType)Enum.Parse(typeof(PinningType), optionsModel.Options["Pinning Type"].CurrentValue))"> <c1-items-source read-action-url="@Url.Action("ColumnPinning_Bind")" query-data="collectingQueryData"></c1-items-source> </c1-flex-grid> @section Settings{ @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Summary{ <p>@Html.Raw(FlexGridRes.AllowPinning_Text0)</p> } @section Description{ @Html.Raw(FlexGridRes.AllowPinning_Text0) } |