Sorting

The CollectionView class supports sorting through the ICollectionView interface, similar to .NET. To enable sorting, add one or more sortDescriptions objects to the CollectionView.sortDescriptions property. The result can be obtained from the CollectionView.items property.

SortDescription objects are flexible, allowing you to sort data based on value in ascending or descending order. In the sample below, 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.

Make sure that the DisableServerRead property of ItemSource is set to True if filtering, paging, sorting is to be performed on data available at client side only.

The example uses C1NWind datasource, which was configured in the application in the Quick Start:

The following code example demonstrates how to apply sorting in FlexGrid through CollectionView.

In Code

SortingController.cs

C#	Copy Code
private C1NWindEntities db = new C1NWindEntities(); public ActionResult Index() { return View(db); }

Sorting.cshtml

ASP.NET
JS

Razor	Copy Code
<div class="row-fluid well row"> <div class="col-md-8"> <select id="sortingFieldNameList" class="form-control"></select> </div> <div class="col-md-4"> <select id="sortingOrderList" class="form-control"> <option value="true" selected="selected">Ascending</option> <option value="false">Descending</option> </select> </div> </div> @(Html.C1().FlexGrid().Id("sortingGrid").IsReadOnly(true).AllowSorting(false).AutoGenerateColumns(false) .Bind(b => b.DisableServerRead(true).Bind(Model.Customers)) .Columns(columns => columns .Add(c => c.Binding("CustomerID")) .Add(c => c.Binding("CompanyName")) .Add(c => c.Binding("ContactName")) .Add(c => c.Binding("City")) .Add(c => c.Binding("Country")) .Add(c => c.Binding("Phone")) ) )

Razor

Copy Code

<div class="row-fluid well row">
    <div class="col-md-8">
        <select id="sortingFieldNameList" class="form-control"></select>
    </div>
    <div class="col-md-4">
        <select id="sortingOrderList" class="form-control">
            <option value="true" selected="selected">Ascending</option>
            <option value="false">Descending</option>
        </select>
    </div>
</div>

@(Html.C1().FlexGrid().Id("sortingGrid").IsReadOnly(true).AllowSorting(false).AutoGenerateColumns(false)
    .Bind(b => b.DisableServerRead(true).Bind(Model.Customers))
    .Columns(columns => columns
        .Add(c => c.Binding("CustomerID"))
        .Add(c => c.Binding("CompanyName"))
        .Add(c => c.Binding("ContactName"))
        .Add(c => c.Binding("City"))
        .Add(c => c.Binding("Country"))
        .Add(c => c.Binding("Phone"))
        )
)

Script	Copy Code
<script> function getNames() { return ['CustomerID', 'CompanyName', 'ContactName', 'City', 'Country', 'Phone']; }; $(document).ready(function () { //Sorting sortingGrid = wijmo.Control.getControl('#sortingGrid'); cvSorting = sortingGrid.itemsSource; sortingFieldNameList = document.getElementById('sortingFieldNameList'); sortingOrderList = document.getElementById('sortingOrderList'); // initialize the list items for field names and orders. sortingFieldNameList.innerHTML += '<option value="" selected="selected">Please choose the field you want to sort by...</option>'; for (var i = 0; i < sortingNames.length; i++) { sortingFieldNameList.innerHTML += '<option value="' + sortingNames[i] + '">' + sortingNames[i] + '</option>'; } // track the list change in order to udpate the sortDescriptions property. sortingFieldNameList.addEventListener('change', sortGrid); sortingOrderList.addEventListener('change', sortGrid); //Sorting // create collectionview, grid, the jQuery elements, the field name list. var cvSorting = null, sortingGrid = null, sortingFieldNameList = null, sortingOrderList = null, sortingNames = getNames(); function sortGrid() { var fieldName = sortingFieldNameList.value, ascending = sortingOrderList.value, sd, sdNew; if (!fieldName) { return; } ascending = ascending === 'true'; sd = cvSorting.sortDescriptions; sdNew = new wijmo.collections.SortDescription(fieldName, ascending); // remove any old sort descriptors and add the new one sd.splice(0, sd.length, sdNew); }; }) </script>

Script

Copy Code

<script>
    function getNames() {
        return ['CustomerID', 'CompanyName', 'ContactName', 'City', 'Country', 'Phone'];
    };

    $(document).ready(function () {
        //Sorting
        sortingGrid = wijmo.Control.getControl('#sortingGrid');
        cvSorting = sortingGrid.itemsSource;
        sortingFieldNameList = document.getElementById('sortingFieldNameList');
        sortingOrderList = document.getElementById('sortingOrderList');
        // initialize the list items for field names and orders.
        sortingFieldNameList.innerHTML += '<option value="" selected="selected">Please choose the field you want to sort by...</option>';
        for (var i = 0; i < sortingNames.length; i++) {
            sortingFieldNameList.innerHTML += '<option value="' + sortingNames[i] + '">' + sortingNames[i] + '</option>';
        }

        // track the list change in order to udpate the sortDescriptions property.
        sortingFieldNameList.addEventListener('change', sortGrid);
        sortingOrderList.addEventListener('change', sortGrid);

        //Sorting
        // create collectionview, grid, the jQuery elements, the field name list.
        var cvSorting = null,
            sortingGrid = null,
            sortingFieldNameList = null,
            sortingOrderList = null,
            sortingNames = getNames();

        function sortGrid() {
            var fieldName = sortingFieldNameList.value,
                ascending = sortingOrderList.value,
                sd, sdNew;

            if (!fieldName) {
                return;
            }

            ascending = ascending === 'true';
            sd = cvSorting.sortDescriptions;
            sdNew = new wijmo.collections.SortDescription(fieldName, ascending);

            // remove any old sort descriptors and add the new one
            sd.splice(0, sd.length, sdNew);
        };

    })
</script>