This is a migrated thread and some comments may be shown as answers.

Export to Excel/Pdf

3 Answers 53 Views
PivotGrid
This is a migrated thread and some comments may be shown as answers.
Στέλιος
Top achievements
Rank 1
Στέλιος asked on 28 Nov 2016, 02:57 PM

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>

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 01 Dec 2016, 02:04 PM
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
Telerik UI for ASP.NET Core is ready for Visual Studio 2017 RC! Learn more.
0
Στέλιος
Top achievements
Rank 1
answered on 01 Dec 2016, 03:13 PM

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

0
Daniel
Telerik team
answered on 06 Dec 2016, 11:41 AM
Hello Stelios,

You can examine the help topic below.
OLAP Cube Setup

Regards,
Daniel
Telerik by Progress
Telerik UI for ASP.NET Core is ready for Visual Studio 2017 RC! Learn more.
Tags
PivotGrid
Asked by
Στέλιος
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Στέλιος
Top achievements
Rank 1
Share this question
or