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
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
Rank 1
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...
Rank 1
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...
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
Rank 1
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> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.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: { }, 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>
Rank 1
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...
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
Rank 1
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.
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
Rank 1
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 .
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.
Vladimir Iliev
Telerik by Progress