sortingmultiple-columnswijmosecondary-sort

Multiple level/criteria sorting using wijmo ICollectionView


Does Wijmo have functionality to add additional levels of sorting in cases where the first search criteria is a match? This secondary search would only be used in cases where the primary criteria are a match.

For example, if my two columns were State and Town, and I wanted to sort the states in ascending order, but the towns within those states in descending order. So my list might read something like

NV | Las Vegas

NV | Ely

NY | Saratoga

NY | New York City

NY | Albany


Solution

  • Sorting is performed at the data source level, by the CollectionView class. The CollectionView has a "sortDescriptors" property which is an array. You can add as many sorting levels as you like. For example:

    // raw data
    var data = [
      { state: 'NV', town: 'Las Vegas' },
      { state: 'NY', town: 'Saratoga' },
      // ... more data ...
    ];
    
    // CollectionView
    var view = new wijmo.collections.CollectionView(data);
    
    // sort by state, then by town
    var sd = view.sortDescriptions;
    sd.push(new wijmo.collections.SortDescription('state', true));
    sd.push(new wijmo.collections.SortDescription('town', true));
    

    Now you can use the "view" object as the grid's data source.

    Note that if you don't use a CollectionView, the FlexGrid will create one automatically for internal use (so it can sort data etc). This internal CollectionView is exposed through the grid's "collectionView" property. So you can also do this:

    // bind grid to raw data (creates internal CollectionView automatically)
    grid.itemsSource = data;
    
    // sort the grid's CollectionView
    var sd = grid.collectionView.sortDescriptions;
    sd.push(new wijmo.collections.SortDescriptor('state', true));
    sd.push(new wijmo.collections.SortDescriptor('town', true));
    

    I hope this helps. For more information on the CollectionView class, please check out this link:

    https://wijmo.com/5/docs/topic/wijmo.collections.CollectionView.Class.html

    I hope this helps.