Available in the Full Version

Pivot Data Selector - TypeScript

This sample demonstrates how to use TypeScript with the igPivotDataSelector(on the left) and how to assign the data using the class-based approach.

Sales

Filters	Columns
	Seller
Rows
Date	Units Sold

Defer Update

Drop Filter Fields Here
Units Sold	Seller
Date	All Sellers

All Periods	2127

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

HTML
TypeScript

<!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 src="/TypeScriptSamples/pivot-data-selector/typescript.js"></script>
</body>
</html>

/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />

class SelectorProduct1 {
    ProductCategory: string;
    SellerName: string;
    Country: string;
    City: string;
    Date: string;
    UnitPrice: number;
    UnitsSold: number;
    constructor(category: string,  sellerName: string,  country: string,  city: string,
                     date: string,  unitPrice: number,  unitsSold: number) {
        this.ProductCategory = category;
        this.SellerName = sellerName;
        this.Country = country;
        this.City = city;
        this.Date = date;
        this.UnitPrice = unitPrice;
        this.UnitsSold = unitsSold;
    }
}


var dataSelector: SelectorProduct1[] = [];
dataSelector.push(new SelectorProduct1("Clothing", "Stanley Brooker", "Bulgaria", "Plovdiv", "01/01/2012", 12.81, 282));
dataSelector.push(new SelectorProduct1("Clothing", "Elisa Longbottom", "US", "New York", "01/05/2013", 49.57, 296));   
dataSelector.push(new SelectorProduct1("Bikes", "Lydia Burson", "Uruguay", "Ciudad de la Costa", "01/06/2011", 3.56, 68 ));
dataSelector.push(new SelectorProduct1("Accessories", "David Haley", "UK", "London", "04/07/2012", 85.58, 293));
dataSelector.push(new SelectorProduct1("Components", "John Smith", "Japan", "Yokohama", "12/08/2012", 18.13, 240));
dataSelector.push(new SelectorProduct1("Clothing", "Larry Lieb", "Uruguay", "Ciudad de la Costa", "05/12/2011", 68.33, 456));
dataSelector.push(new SelectorProduct1("Components", "Walter Pang", "Bulgaria", "Sofia", "02/19/2013", 16.05, 492));

var dataSource = new $.ig.OlapFlatDataSource({
    dataSource: dataSelector,
    metadata: {
        cube: {
            name: "Sales",
            caption: "Sales",
            measuresDimension: {
                caption: "Measures",
                measures: [ //for each measure, name and aggregator are required
                    {
                        caption: "Units Sold", name: "UnitsSold",
                        // returns a function that will be used as sum aggregator on the 'UnitsSold property' of the data objects
                        aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold')
                    }]
            },
            dimensions: [ // for each dimension name and hierarchies are required
                {
                    caption: "Seller", name: "Seller", hierarchies: [{
                        caption: "Seller", name: "Seller", levels: [
                            {
                                name: "AllSellers", caption: "All Sellers",
                                memberProvider: function (item) { return "All Sellers"; }
                            },
                            {
                                name: "SellerName", caption: "Seller",
                                memberProvider: function (item) { return item.SellerName; }
                            }]
                    }]
                },
                {
                    caption: "Date", name: "Date", /*displayFolder: "Folder1\\Folder2",*/ hierarchies: [
                        $.ig.OlapUtilities.prototype.getDateHierarchy(
                            "Date", // the source property name
                            ["year", "quarter", "month", "date"], // the date parts for which levels will be generated (optional)
                            "Dates", // The name for the hierarchy (optional)
                            "Date", // The caption for the hierarchy (optional)
                            ["Year", "Quarter", "Month", "Day"], // the captions for the levels (optional)
                            "All Periods") // the root level caption (optional)
                    ]
                }
            ]
        }
    },
    // Preload hierarchies for the rows, columns, filters and measures
    rows: "[Date].[Dates]",
    columns: "[Seller].[Seller]",
    measures: "[Measures].[UnitsSold]"
});

$(function () {
    $('#dataSelector').igPivotDataSelector({
        dataSource: dataSource,
        height: "580px",
        width: "230px"
    });

    $("#pivotGrid").igPivotGrid({
        dataSource: dataSource,
        height: "580px",
        width: "580px"
    });
});

Ignite UI for jQuery | Samples

Search Results

Pivot Data Selector - TypeScript

Code View