CollectionView Sorting
Use the CollectionView.sortDescriptions property to specify which fields should be sorted and in which direction.
Choose one of the options to see it in action:
Result:
Country
Downloads
Sales
Expenses
US
145,248
81,732.54
38,401.13
Germany
111,632
20,603.32
27,944.24
UK
181,205
44,217.79
48,877.49
Japan
54,740
29,190.63
23,365.74
Italy
126,531
46,951.19
49,107.56
Greece
6,073
86,237.02
49,767.35
US
135,436
31,459.18
40,845.40
Germany
169,610
99,190.22
1,631.26
UK
139,988
52,628.41
46,700.93
Japan
137,524
54,681.54
4,055.50
Italy
37,424
45,332.72
14,858.59
Greece
197,708
64,269.75
38,148.18
US
6,078
38,100.45
17,157.09
Country
Downloads
Sales
Expenses
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // This file locates: "Scripts/Lesson/C1Mvc/CVSorting.js".c1.documentReady(function () { // get grid and its CollectionView var theGrid = wijmo.Control.getControl('#theGrid'); var view = theGrid.collectionView; // change the sort document.addEventListener('change', function (e) { // remove the old sort view.sortDescriptions.clear(); // add the new sorts var props = e.target.value.split(','); for (var i = 0; i < props.length; i++) { var asc = props[i] == 'Country'; // country in ascending order, other in descending order var sd = new wijmo.collections.SortDescription(props[i], asc); view.sortDescriptions.push(sd); } });}); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1MvcController : Controller { // GET: CVSorting public ActionResult CVSorting() { return View(Models.FlexGridData.GetSales(200)); } }} |
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 | @model IEnumerable<FlexGridData.Sale><h1> @Html.Raw(Resources.C1Mvc.CVSorting_Title)</h1><p> @Html.Raw(Resources.C1Mvc.CVSorting_Text1)</p><p> @Html.Raw(Resources.C1Mvc.CVSorting_Text2)</p><label> <input type="radio" name="sort" value="" checked="true" /> @Html.Raw(Resources.C1Mvc.CVSorting_Text3)</label><label> <input type="radio" name="sort" value="Country" /> @Html.Raw(Resources.C1Mvc.CVSorting_Text4)</label><label> <input type="radio" name="sort" value="Country,Sales" /> @Html.Raw(Resources.C1Mvc.CVSorting_Text5)</label><label> <input type="radio" name="sort" value="Country,Sales,Downloads" /> @Html.Raw(Resources.C1Mvc.CVSorting_Text6)</label><p> @Html.Raw(Resources.C1Mvc.CVSorting_Text7)</p>@(Html.C1().FlexGrid().Id("theGrid").Height(250) .Bind(b=>b.Bind(Model).DisableServerRead(true)) .AutoGenerateColumns(false) .Columns(cs=> { cs.Add().Binding("Country").Header("Country"); cs.Add().Binding("Downloads").Header("Downloads"); cs.Add().Binding("Sales").Header("Sales"); cs.Add().Binding("Expenses").Header("Expenses"); }) .ShowSort(true) .AllowSorting(false) // sorting done by us, not by the grid .ShowAlternatingRows(false) .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)) |