Features

Sorting

Sorting

This samples shows the sort features of the MultiRow control.

Features

Overview
Collapsible Column Headers
Styling Records, Groups, and Cells
Grouping
Group Headers
Row Header
Filtering
Row and Column Freezing
Paging
Group Panel
Remote Data Binding
Custom Cells
Custom Editors
Custom Column Headers
Editing
Batch Editing
Sorting
Virtual Scrolling
Disable Server Reading
Data Map
Excel Export
PDF Export
Unobtrusive Validation
Active
End
Product
Color
Discount
Amount2
loading...

Settings

Sorting Field :
Sorting Order :

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
using MultiRowExplorer.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
  
namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        public ActionResult Sorting()
        {
            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
63
64
65
66
67
@model IEnumerable<Sale>
@{
    var fields = new[] { "ID", "Start", "End", "Country", "Product", "Color", "Amount", "Amount2", "Discount", "Active" };
    var orders = new[] { "Ascending", "Descending" };
    ViewBag.DemoSettings = true;
    ViewBag.SettingsByMenu = false;
}
  
<c1-multi-row id="sortingMultiRow" class="multirow" is-read-only="true" order-by="ID">
    <c1-items-source read-action-url="@Url.Action("Sorting_Bind")"></c1-items-source>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="ID"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Active"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="Start" format="MM/dd/yyyy"></c1-multi-row-cell>
        <c1-multi-row-cell binding="End" format="MM/dd/yyyy HH:mm:ss" width="150"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Country" colspan="2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Product"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Color"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Amount"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Amount2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Discount" colspan="2"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
</c1-multi-row>
  
@section Scripts{
    <script>
        var field = "ID", order = "Ascending";
        function sortMultiRow(combo) {
            var multiRow, ascending, sd;
            if (combo.hostElement.id === "sortingfield")
                field = combo.selectedValue;
            if (combo.hostElement.id === "sortingorder")
                order = combo.selectedValue;
  
            if (!field || !order) {
                return;
            }
  
            multiRow = wijmo.Control.getControl("#sortingMultiRow");
            ascending = order === "Ascending";
            sd = multiRow.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(MultiRowRes.Sorting_Text0) <c1-combo-box id="sortingfield" selected-index="0" is-editable="false" selected-index-changed="sortMultiRow"><c1-items-source source-collection="@fields"></c1-items-source></c1-combo-box>
    @Html.Raw(MultiRowRes.Sorting_Text1) <c1-combo-box id="sortingorder" selected-index="0" is-editable="false" selected-index-changed="sortMultiRow"><c1-items-source source-collection="@orders"></c1-items-source></c1-combo-box>
}
  
@section Summary{
    @Html.Raw(MultiRowRes.Sorting_Text2)
}
  
@section Description{
    @Html.Raw(MultiRowRes.Sorting_Text3)
}