Available in the Full Version

Pivot Grid - Sorting

This sample demonstrates how to enable sorting in the igPivotGrid and how to apply sorting for specific levels upon initialization.
    Drop Filter Fields Here
  • Units Sold
  • Product
  • Date
All ProductsAll Products
AccessoriesBikesClothingComponents
All Periods26023303732976635463121625
2012282140273568814618562
2011325274104986521320861
2010432743654914514618752
2009410569765226619322500
2008650547535477536022095
2007501328425595540518855

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

    <style>
        #dataSelector, #pivotGrid {
            float: left;
        }
    </style>
</head>
<body>
    <div class="sampleContent">
        <div id="dataSelector"></div>
        <div id="pivotGrid"></div>
    </div>

    <script type="text/javascript" src="/data-files/sales.js"></script>
    <script>
        $(function () {
            dataSource = new $.ig.OlapFlatDataSource({
                dataSource: sales,
                metadata: {
                    cube: {
                        name: "Sales",
                        caption: "Sales",
                        measuresDimension: {
                            caption: "Measures",
                            measures: [
                                { caption: "Units Sold", name: "UnitsSold", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold') },
                                { caption: "Unit Price", name: "UnitPrice", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitPrice', 2) }]
                        },
                        dimensions: [
                            {
                                caption: "Date", name: "Date", hierarchies: [
                                    $.ig.OlapUtilities.prototype.getDateHierarchy(
                                        "Date", ["year", "quarter", "month", "date"], "Dates", "Date",
                                        ["Year", "Quarter", "Month", "Day"], "All Periods")]
                            },
                            {
                                caption: "Location", name: "Location", hierarchies: [{
                                    caption: "Location", name: "Location", levels: [
                                             { name: "AllLocations", levelCaption: "All Locations", memberProvider: function (item) { return "All Locations"; } },
                                             { name: "Country", levelCaption: "Country", memberProvider: function (item) { return item.Country; } },
                                             { name: "City", levelCaption: "City", memberProvider: function (item) { return item.City; } }]
                                }]
                            },
                            {
                                caption: "Product", name: "Product", hierarchies: [{
                                    caption: "Product", name: "Product", levels: [
                                    { name: "AllProducts", levelCaption: "All Products", memberProvider: function (item) { return "All Products"; } },
                                    { name: "ProductCategory", levelCaption: "Category", memberProvider: function (item) { return item.ProductCategory; } }]
                                }]
                            },
                            {
                                caption: "Seller", name: "Seller", hierarchies: [{
                                    caption: "Seller", name: "Seller", levels: [
                                     { name: "AllSellers", levelCaption: "All Sellers", memberProvider: function (item) { return "All Sellers"; } },
                                     { name: "SellerName", levelCaption: "Seller", memberProvider: function (item) { return item.SellerName; } }]
                                }]
                            }
                        ]
                    }
                },
                rows: "[Date].[Dates]",
                columns: "[Product].[Product]",
                measures: "[Measures].[UnitsSold]"
            });

            $("#pivotGrid").igPivotGrid({
                allowSorting: true,
                allowHeaderRowsSorting: true,
                allowHeaderColumnsSorting: true,
                firstSortDirection: "ascending",
                firstLevelSortDirection: "ascending",
                levelSortDirections: [
                    { levelUniqueName: "[Date].[Dates].[year]", sortDirection: "descending" },
                    { levelUniqueName: "[Product].[Product].[ProductCategory]" }
                ],
                dataSource: dataSource,
                dataSourceInitialized: function (evt, ui) {
                    // expand the first members in the rows and in the columns in order to observe the applie sorting
                    $("#pivotGrid").igPivotGrid("expandTupleMember", "rowAxis", 0, 0, false);
                    $("#pivotGrid").igPivotGrid("expandTupleMember", "columnAxis", 0, 0, true);
                },
                height: "580px",
                width: "560px"
            });

            $('#dataSelector').igPivotDataSelector({
                dataSource: dataSource,
                height: "580px"
            });
        });
    </script>
</body>
</html>