Sorting | ASP.NET Core MVC Controls

Sorting

In This Topic

FlexSheet supports sorting on the client side. Your FlexSheet data can be easily sorted by any column, to ensure effective reporting, browsing and analysis of data.

For instance, while analyzing sales report (in FlexSheet) for your organization, you might want to view the records in ascending order of Date or alphabetical order of Products. In such a situation, you need to sort the entries in the columns containing Date and Product entries in your FlexSheet. The below example demonstrates this scenario.

The SortManager property allows FlexSheet to manage the sort processing. You can set Order of sorting, Columns to be sorted and even change the sort order in the client side. Additionally, you can add further levels to sort multiple columns.

The following image shows a bound FlexSheet control, displaying date-wise Sales data for two products. In the below example, FlexSheet data gets sorted in descending order of entries in the third column, containing Country names (column index 2), on a button click.

The following code examples demonstrate how to enable Sorting in the FlexSheet:

In Code

Add a Sale.cs class to the Models folder.

Sale.cs	Copy Code
public class Sale { public int ID { get; set; } public DateTime Date { get; set; } public string Country { get; set; } public string Product { get; set; } public double Amount { get; set; } public bool Active { get; set; } private static List<string> COUNTRIES = new List<string> { "US", "Germany", "UK", "Japan", "Italy", "Greece" }; private static List<string> PRODUCTS = new List<string> { "Widget", "Gadget", "Doohickey" }; /// <summary> /// Get the data. /// </summary> /// <param name="total"></param> /// <returns></returns> public static IEnumerable<Sale> GetData(int total) { var rand = new Random(0); var list = Enumerable.Range(0, total).Select(i => { var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)]; var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)]; var date = new DateTime(2015, i % 12 + 1, 25); return new Sale { ID = i + 1, Date = date, Country = country, Product = product, Amount = Math.Round(rand.NextDouble() * 10000 - 5000, 2), Active = (i % 4 == 0) }; }); return list; } public static List<string> GetCountries() { var countries = new List<string>(); countries.AddRange(COUNTRIES); return countries; } public static List<string> GetProducts() { List<string> products = new List<string>(); products.AddRange(PRODUCTS); return products; } }

Sale.cs

Copy Code

public class Sale
{
    public int ID { get; set; }
    public DateTime Date { get; set; }
    public string Country { get; set; }
    public string Product { get; set; }
    public double Amount { get; set; }
    public bool Active { get; set; }

    private static List<string> COUNTRIES = new List<string> { "US", "Germany", "UK", "Japan", "Italy", "Greece" };
    private static List<string> PRODUCTS = new List<string> { "Widget", "Gadget", "Doohickey" };

    /// <summary>
    /// Get the data.
    /// </summary>
    /// <param name="total"></param>
    /// <returns></returns>
    public static IEnumerable<Sale> GetData(int total)
    {
        var rand = new Random(0);
        var list = Enumerable.Range(0, total).Select(i =>
        {
            var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)];
            var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)];
            var date = new DateTime(2015, i % 12 + 1, 25);

            return new Sale
            {
                ID = i + 1,
                Date = date,
                Country = country,
                Product = product,
                Amount = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
                Active = (i % 4 == 0)
            };
        });
        return list;
    }

    public static List<string> GetCountries()
    {
        var countries = new List<string>();
        countries.AddRange(COUNTRIES);
        return countries;
    }

    public static List<string> GetProducts()
    {
        List<string> products = new List<string>();
        products.AddRange(PRODUCTS);
        return products;
    }
}

SortingController.cs

C#	Copy Code
public partial class SortController : Controller { // GET: Sort public static List<Sale> SALES = Sale.GetData(15).ToList(); public ActionResult SortIndex() { return View(SALES); } }

Sorting.cshtml

HTML	Copy Code
@using MVCFlexSheet.Models; @model IEnumerable<sale> <script> var flex, sortManager; c1.documentReady(function () { flex = wijmo.Control.getControl("#sortsheet"); sortManager = flex.sortManager; }); function sortFlex() { sortManager.sortDescriptions.items[0].columnIndex = 2; sortManager.sortDescriptions.items[0].ascending = false; sortManager.commitSort(); } </script> <div> <input id="sort" type="button" onclick="sortFlex()" value="Sort" /> <br /><br /> <c1-flex-sheet class="flexSheet" id="sortsheet"> <c1-bound-sheet> <c1-items-source source-collection="Model"></c1-items-source> </c1-bound-sheet> </c1-flex-sheet> </div>

HTML

Copy Code

@using MVCFlexSheet.Models;
@model IEnumerable<sale>

<script>
        var flex, sortManager;
        c1.documentReady(function () {
            flex = wijmo.Control.getControl("#sortsheet");
            sortManager = flex.sortManager;
        });
        function sortFlex() {
            sortManager.sortDescriptions.items[0].columnIndex = 2;
            sortManager.sortDescriptions.items[0].ascending = false;
            sortManager.commitSort();
        }
</script>    

<div>
    <input id="sort" type="button" onclick="sortFlex()" value="Sort" />
    <br /><br />
    <c1-flex-sheet class="flexSheet" id="sortsheet">
        <c1-bound-sheet>
            <c1-items-source source-collection="Model"></c1-items-source>
        </c1-bound-sheet>
    </c1-flex-sheet>        
</div>

wijmo.grid.sheet

wijmo.grid.sheet Module