By default, clicking on any column header sorts the data based on the column that is clicked. Clicking the same column header again reverts the sort order. Control-clicking the column header removes the sort.

You may customize the sorting behavior using the grid's showSort and allowSorting properties. You can disable sorting on specific columns by setting the column's allowSorting property to false.

The grid below does not allow sorting by 'ID'. All other columns support sorting.

Country

Sales

Expenses

81,732.54

38,401.13

Germany

20,603.32

27,944.24

44,217.79

48,877.49

Japan

29,190.63

23,365.74

Italy

46,951.19

49,107.56

Greece

86,237.02

49,767.35

Although the CollectionView class supports sorting on multiple properties, the grid does not provide a UI for that. You can build your own Excel-style sort dialogs if you need that functionality.

// This file locates: "Scripts/Lesson/C1FlexGrid/Sorting.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.getColumn('Id').allowSorting = false;
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: Sorting
        public ActionResult Sorting()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Sorting_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Sorting_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Sorting_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Sorting_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Sorting_Text4)
</p>
 
@(Html.C1().FlexGrid().Id("theGrid")
    .DeferResizing(true)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID").Width("60");
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
)
 
<div class="panel panel-warning">
    <div class="panel-heading">
        @Html.Raw(Resources.C1FlexGrid.Sorting_Text5)
    </div>
</div>