Export to Excel/Pdf

[Στέλιος]

Hello,

 

I'm working on a project at ASP.NET Core, using Kendo UI Pivot Grid with AngularJS. I have a Pivot Grid table and I'm saving/loading data on an SQL Server as reports for it successfully. I have a "details" page, where the data are loading and the table appears, but it's not editable. Up till now everything is ok. Now I'm trying to export the data as Excel and PDF formats and after I've tried every method that I have found, I had no results... Please, tell me what I'm doing wrong, or what I forget!

 

My code follows: 

HTML

@*Below I initialize my data via ng-init. I had to convert them from SQL first. Below there are the 2 buttons for export. Then the table appears*@
<div id="Details" class="form-group">
        <div ng-app="PivotGrid" ng-controller="PivotGridShow" data-ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))" >
                <div class="pull-right">
                    <button id="exportexcel" class="k-button k-button-icontext hidden-on-narrow"><span class="k-icon k-i-excel"></span>Export to Excel</button>
                    <button id="exportpdf" class="k-button k-button-icontext hidden-on-narrow"><span class="k-icon k-i-pdf"></span>Export to PDF</button>
                </div>
        <div kendo-pivot-grid k-options="options" k-data-source="dataSource" id="pivotgrid" class="hidden-on-narrow" style="width:100%; height:100%;"></div>
        <div class="responsive-message"></div>
    </div>
</div>
<style>
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>

 

JS (script for the PivotGrid)

angular.module('app.splitter-panel', ['Kendo.directives']);
angular.module('app', ['app.splitter-panel']);
angular.module("PivotGrid", ["kendo.directives"])

    .controller("PivotGridShow", function ($scope) {

        $scope.init = function (report) {
            $scope.columns = report.ReportLayoutColumns;
            $scope.rows = report.ReportLayoutRows;
            $scope.measures = report.ReportLayoutMeasures;
            $scope.dataSource = loadDataSource();
            $scope.options = {
                excel: {
                    fileName: "Report.xlsx",
                    allPages: true,
                    filterable: true,
                    proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                },
                pdf: {
                    author:"Retail-Link",
                    date:new Date(),
                    fileName:"Report.pdf",
                    landscape:false,
                    margin:{
                        left: 10,
                        right: "10pt",
                        top: "10mm",
                        bottom: "1in"
                    },
                    paperSize: "A4",
                    proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                },
                filterable: true,
                sortable: true,
                columnWidth: 100,
                height: 800,
                dataSource: $scope.dataSource,
                dataBound: function (e) {
                    document.getElementById('measures').value = JSON.stringify(e.sender.options.dataSource._measures);
                    document.getElementById('rows').value = JSON.stringify(e.sender.options.dataSource._rows);
                    document.getElementById('columns').value = JSON.stringify(e.sender.options.dataSource._columns);
                }
            };
        };

        function loadDataSource() {
            var PivotGrid = new kendo.data.PivotDataSource({
                type: "xmla",

                columns: JSON.parse($scope.columns),
                rows: JSON.parse($scope.rows),
                measures: JSON.parse($scope.measures),

                transport: {
                    connection: {
                        catalog: "Adventure Works DW 2008R2",
                        cube: "Adventure Works"
                    },
                    read: {
                        url: "http://demos.telerik.com/olap/msmdpump.dll"
                    }
                },
                schema: {
                    type: "xmla"
                },
                error: function (e) {
                    alert("error: " + kendo.stringify(e.errors[0]));
                }
            });
            return PivotGrid;

//Below there are my last two tries for the buttons

            $scope.exportexcel = function () {
                PivotGrid.saveAsExcel();
            }

            $("#exportpdf").click(function () {
                PivotGrid.saveAsPDF();
            });

        }
    });

 

This is what I include

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib_bower/metisMenu/dist/metisMenu.min.js"></script>
<script src="~/lib_bower/pace/pace.min.js"></script>
<script src="~/lib_bower/slimScroll/jquery.slimscroll.min.js"></script>
<script src="~/lib_bower/angular/angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>

[Daniel]

Hello Stelios,

I made a runnable example (based on your code) demonstrating how to export PivotGrid to excel with AngularJS and .NET core. You can download the attachment from this post.

Regards,
Daniel
Telerik by Progress

[Στέλιος]

Thank you very much Daniel,

As it seems, what I had forgot was to give a name to "kendo-pivot-grid" in my HTML, so that the $scope. could take something from somewhere, and all my efforts had the same effect...

In addition, my next obstacle is how to load an MSOLAP inside this project, to the PivotGrid. I've tried with ADOMD but I've got some difficulties, because there are compatibility issues with ASP.NET Core.

If you could give me some guidance with this also, I would be really grateful. 

 

Thanks in advance for your time,

Regards

Stelios

[Daniel]

Hello Stelios,

You can examine the help topic below.
OLAP Cube Setup

Regards,
Daniel
Telerik by Progress