Menu
Free Trials
Table of contents

Integration with TypeScript

This tutorial will help you to integrate Pivot Table Component with TypeScript. Follow the steps to set up a simple TypeScript project in Visual Studio using Flexmonster Pivot Table:

Step 1. Create new TypeScript project in Visual Studio

  1. Open Visual Studio. If you don’t have any, we recommend Visual Studio 2015.
  2. Click File. filetypescript
  3. Choose New -> Project. projecttypescript
  4. Choose Typescript. typescriptprojecttypescript
  5. Enter project name and click OK. addtypescript

Step 2. Add Flexmonster files

Create folder scripts/vendor/ inside your project. Copy flexmonster/ folder from the download package to scripts/vendor/. Here you can also add other JavaScript libraries for your project. flexmonstertypescript

Step 3. Add definitions (d.ts)

Create folder scripts/definitions/ and add flexmonster.d.ts and jquery.d.ts inside. Here you can also add other definition files for your project. definitionstypescript

Step 4. Add main TypeScript file

Create folder src/ and add new TypeScript file named “PivotApp”. Please note, licenseKey is your license or trial key, so you should replace XXX with an actual key.

class PivotApp {
    private pivot: Flexmonster;

    constructor() {
        this.pivot = $("#content").flexmonster({
            componentFolder: "scripts/vendor/flexmonster/",
            toolbar: true,
            licenseKey: "XXX",
            width: "100%",
            height: "500",
            ready: () => this.onPivotReady()
        });
    }

    private onPivotReady(): void {
        this.pivot.load("http://www.flexmonster.com/download/report.xml");
    }
}

window.onload = () => {
    new PivotApp();
};

Step 5. Add index.html file

Create index.html file and add links to jquery, flexmonster and PivotApp JavaScript files.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <script src="scripts/vendor/flexmonster/lib/jquery.min.js"></script>
    <script src="scripts/vendor/flexmonster/flexmonster.js"></script>
    <script src="src/PivotApp.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>
    <div id="content"></div>
</body>
</html>

Step 6. Run the project

Now the project is ready to run. In Visual Studio choose Debug->Start without debugging. runtypescript You will see Pivot Table with sample report loaded.