jube-fork/Jube.App/wwwroot/kendo/examples/pivotgrid/angular.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/angular.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
  <div ng-app="KendoDemo" ng-controller="MyCtrl">
    <div kendo-pivot-configurator k-height="580" k-data-source="dataSource" id="configurator" class="hidden-on-narrow"></div>
    <div kendo-pivot-grid k-options="options" id="pivotgrid" class="hidden-on-narrow"></div>
    
    <div class="responsive-message"></div>
  </div>
</div>

<script>
  angular.module("KendoDemo", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.dataSource = new kendo.data.PivotDataSource({
              type: "xmla",
              columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Product].[Category]" } ],
              rows: [{ name: "[Geography].[City]" }],
              measures: ["[Measures].[Reseller Freight Cost]"],
              transport: {
                  connection: {
                      catalog: "Adventure Works DW 2008R2",
                      cube: "Adventure Works"
                  },
                  read: "https://demos.telerik.com/olap/msmdpump.dll"
              },
              schema: {
                  type: "xmla"
              },
              error: function (e) {
                  alert("error: " + kendo.stringify(e.errors[0]));
              }
          });
          $scope.options = {
              columnWidth: 200,
              height: 580,
              dataSource: $scope.dataSource
          };
      })
</script>

<style>
    #configurator {
        width: 400px;
        min-width: 400px;
        display: inline-block;
        vertical-align: top;
    }

    #pivotgrid {
        width: 67%;
        display: inline-block;
        vertical-align: top;
    }

    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>


    
</body>
</html>