FlexGrid
FlexGrid
Sorting
In this sample, you can sort the collection based on the corresponding field value chosen in the first list.
Features
ID
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
ID
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
0
loading...
Settings
Sorting Field :Description
In this sample, you can sort the collection based on the corresponding field value chosen in the first list. You can also specify the sorting order in the second list.
Use the SortingType property to change this behavior so users can sort none/single/multiple columns at a time.
Use the SortingType property to change this behavior so users can sort none/single/multiple columns at a time.
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 | using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using System.Collections.Generic; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private readonly ControlOptions _sortingDataModel = new ControlOptions { Options = new OptionDictionary { {"Sorting type", new OptionItem {Values = new List<string> {"None", "SingleColumn", "MultiColumn"}, CurrentValue = "SingleColumn"}} } }; public ActionResult Sorting(IFormCollection collection) { _sortingDataModel.LoadPostData(collection); ViewBag.DemoOptions = _sortingDataModel; return View(); } public ActionResult Sorting_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, 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 | @using C1.Web.Mvc.Grid @model IEnumerable<Sale> @{ var fields = new[] { "ID", "Start", "End", "Country", "Product", "Color", "Amount", "Amount2", "Discount", "Active" }; var orders = new[] { "Ascending", "Descending" }; ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; ViewBag.SettingsByMenu = false; } <c1-flex-grid id="flexgrid" class="grid" auto-generate-columns="false" is-read-only="true" order-by="ID" sorting-type="@((AllowSorting)Enum.Parse(typeof(AllowSorting), optionsModel.Options["Sorting type"].CurrentValue))"> <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="Amount" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column> <c1-flex-grid-column binding="Active"></c1-flex-grid-column> <c1-items-source read-action-url="@Url.Action("Sorting_Bind")"></c1-items-source> </c1-flex-grid> @section Scripts{ <script> var field = "ID", order = "Ascending"; function sortGrid(combo) { var flexGrid, ascending, sd; if (combo.hostElement.id === "sortingfield") field = combo.selectedValue; if (combo.hostElement.id === "sortingorder") order = combo.selectedValue; if (!field || !order) { return; } flexGrid = wijmo.Control.getControl("#flexgrid"); ascending = order === "Ascending"; sd = flexGrid.collectionView.sortDescriptions; sdNew = new wijmo.collections.SortDescription(field, ascending); // remove any old sort descriptors and add the new one sd.splice(0, sd.length, sdNew); } </script>} @section Settings { @Html.Raw(FlexGridRes.Sorting_SortingField) : <c1-combo-box id="sortingfield" selected-index="0" is-editable="false" selected-index-changed="sortGrid"><c1-items-source source-collection="@fields"></c1-items-source></c1-combo-box> @Html.Raw(FlexGridRes.Sorting_SortingOrder) : <c1-combo-box id="sortingorder" selected-index="0" is-editable="false" selected-index-changed="sortGrid"><c1-items-source source-collection="@orders"></c1-items-source></c1-combo-box> @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Description{ @Html.Raw(FlexGridRes.Sorting_Text0) <br /> @Html.Raw(FlexGridRes.SortingType_Text0) } |