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

PDF Export Issues

11 Answers 372 Views
Grid
This is a migrated thread and some comments may be shown as answers.
lsaf
Top achievements
Rank 1
lsaf asked on 29 Oct 2015, 06:19 PM

I have a Kendo grid that is created once the Ajax success event is triggered returning JSON data.  The grid displays and works as I would expect.  I have two buttons, one for Export to Excel and the other PDF - Excel works fine.  PDF just grays out the grid and displays an empty progress bar that is never filled.  The PDF is never generated. I have stripped all .js includes (and have also used the kendo demo versions of the .js files) and additional .css includes and yet the problem remains.  It won't work in IE (11) nor in Chrome.

 

<link href="kendo.common.min.css" rel="stylesheet"/>
<link href="kendo.default.min.css" rel="stylesheet"/>
<script src="jquery-1.11.3.js"></script>
<script src="kendo.all.min.js"></script>
<script src="jszip.min.js"></script>
<script src="pako_deflate.min.js"></script>
 

<div id="grid"></div>‚Äč

...
       
      $.ajax({
            url: <web service url>,
            type: 'POST',
            dataType: 'json',
            data: {<parameters>},
            success: function (_data) {
 
                var oTable = $("#grid").kendoGrid({
                    toolbar: ["pdf", "excel"],
                    pdf: {
                        fileName: "Kendo UI Grid Export.pdf"
                    },
                    excel: {
                        fileName: "Kendo UI Grid Export.xlsx"
                    },
                    dataSource: {
                        data: _data,
                        schema: {
                            model: {
                                fields: {
                                    ...
                                }
                            }
                        },
  
                    },
                    selectable: "single",
                    sortable: true,
                    filterable: true,
                    pageable: false,
                    scrollable: true,
                    height: 500,
                    columns: [
                            ...
                    ]
 
                });

 ...

11 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 02 Nov 2015, 12:39 PM
Hi lsaf,

I tested similar configuration on my end and it appears to work correctly. See the dojo below and try to replicate the issue in it and send it to us, so that we can further revise the problem on our side:
http://dojo.telerik.com/UBeko


Regards,
Maria Ilieva
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
lsaf
Top achievements
Rank 1
answered on 02 Nov 2015, 06:21 PM

Turns out if I link to your external:

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" />

it works, but when I link to my internal version:

 <link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>

which is the exact same file it fails...

<link href="/Content/kendo/kendo.common.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.common.css" rel="stylesheet"/>
0
lsaf
Top achievements
Rank 1
answered on 02 Nov 2015, 06:21 PM

Turns out if I link to your external:

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" />

it works, but when I link to my internal version:

 <link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>

which is the exact same file it fails...

<link href="/Content/kendo/kendo.common.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.common.css" rel="stylesheet"/>
0
Maria Ilieva
Telerik team
answered on 04 Nov 2015, 11:07 AM
Hi,

Can you please confirm that you are using the latest (2015.3.930) version of the controls and the local files is the same version as the referred from the cdn?

Regards,
Maria Ilieva
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
lsaf
Top achievements
Rank 1
answered on 19 Nov 2015, 09:38 PM

I pulled the files from the original kendo installation folder and that seem to fix the PDF, but for Excel, I now have a issue where it will only print when the grid is grouped.  Here is the code that will show you the issue - I have a button that toggles the grouping pane when clicked - also, I found I had to manually adjust the grid.content because when redrawn with the grouping pane hidden it left a blank space at the bottom the height of the grouping pane.  Perhaps there is a better way to hide/show the grouping pane.  I have to conserve vertical space in my app, so I don't want it visible when users don't want to group.

 

Here is an example - if you click the group button, you will find you can no longer export...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
   
    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            toolbar: ["excel"],
            excel: {
                fileName: "Kendo UI Grid Export.xlsx"
            },
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                },
                pageSize: 7,
                group : { field :"ProductName"}
            },
            groupable: true,
            sortable: true,
            pageable: true,
            height : 300,
            columns: [
                { width: 300, field: "ProductName", title: "Product Name" },
                { field: "UnitsOnOrder", title: "Units On Order" },
                { field: "UnitsInStock", title: "Units In Stock" }
            ]
        });
       
 function groupClick(gridName) {
 
    var grid = $(gridName).data("kendoGrid");
    var _gridName = gridName.replace('#', '');
 
    grid.groupable = !grid.groupable;
 
 
    // record the height of both so we can adjust because the grid won't fill the content div
    var groupHeight = $(gridName + " .k-grouping-header").outerHeight();
    var contentHeight = grid.content.outerHeight();
 
    if (grid.groupable) {
        $("#toolbar-group-" + _gridName).addClass('k-state-active');
        $(gridName + " .k-grouping-header").css('display', 'block');
 
        // adjust content size
        grid.content.css('height', contentHeight - groupHeight);
 
    }
    else {
        grid.dataSource.group("");
        $("#toolbar-group-" + _gridName).removeClass('k-state-active');
        $(gridName + " .k-grouping-header").css('display', 'none');
 
        // adjust content size
        grid.content.css('height', contentHeight + groupHeight);
 
        if (_gridName == 'grid') gridHeight = contentHeight + groupHeight;
    }
 
    grid.content.scrollTop(0);
 
    return false;
};
    </script>
      <button onclick="groupClick('#grid');">Group</button>
</body>
</html>

0
lsaf
Top achievements
Rank 1
answered on 21 Nov 2015, 12:37 AM

Issue was removing the group using:

grid.dataSource.group("");

Changed it to:

grid.dataSource.group([]);

And now it works.

 

I am still looking for a better way to hide/show the grouping pane that doesn't result in sizing issues of the content pane...

0
Maria Ilieva
Telerik team
answered on 24 Nov 2015, 07:54 AM
Hello,

As the grouping descriptors should be set to the DataSource, if you do not want the group panel to be shown, you should simply omit the Groupable setting from the Grid's configuration.

Html.Kendo().Grid()
    .Name("Grid"
    .DataSource(dataSource => dataSource       
        .Ajax()
        .Group(groups => groups.Add(p => p.ModuleName))     
    )


Regards,
Maria Ilieva
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
lsaf
Top achievements
Rank 1
answered on 24 Nov 2015, 05:04 PM

Sorry, I must not have been clear - I need the grid to be able to show and hide the grouping panel based on a toggle button.  Simply setting groupable does not achieve this.  The reason is I need to conserve vertical space on the page and having the grouping panel visible reduces the number of visible rows in the grid.  Most of the time, users will not want to group, so therefore I have the grouping panel hidden, however, if they want to, I would like them to click a button and have it shown.

 

Thanks,

 

L.

0
Vladimir Iliev
Telerik team
answered on 27 Nov 2015, 07:40 AM
Hi Isaf,

You can achieve the desired behavior by calling the "group" method of the dataSource on clicking the custom button that you mention - please check the example below:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bajivali
Top achievements
Rank 1
answered on 23 Nov 2016, 09:22 PM

Hi Admin,

I also have similar issue. my issue is UI Data gets saved to pdf. if I have too much data. then the pdf looks blank .

<input type="button" onclick="getPDF('.pdf-page')" value="Export to Pdf" class="k-button k-i-pdf btn btn-success" style="float: right" />

<fieldset id="ownerdetailbudgetview">

// contains several partial pages........

</fieldset>

 

function getPDF(selector) {
kendo.drawing.drawDOM($("#ownerdetailbudgetview")).then(function(group){
kendo.drawing.pdf.saveAs(group, "OwnerContractorDetail_Budget.pdf");
});
}

 

on further investigation that I have noticed that the pdf looks blank when the size exceeds 3000kb in pdf.

could you please help me in fixing this issue .

 

0
Vladimir Iliev
Telerik team
answered on 24 Nov 2016, 08:18 AM
Hello Bajivali,

As your last question is not related to the original topic, may I kindly ask you to open a new support thread for the PDF export? In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving. 

On a side note I would suggest to make sure you are not hitting some of the known limitations

Thank you in advance for the understanding.
 
Regards,
Vladimir Iliev
Telerik by Progress
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Tags
Grid
Asked by
lsaf
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
lsaf
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Bajivali
Top achievements
Rank 1
Share this question
or