or
7 answers
336 views
Hi,
I have a problem when exporting a pdf where the element being exported contained a Material Design Icon. The PDF is invalid and does not display correctly in Adobe Reader.
I check the validity here https://www.pdf-online.com/osa/validate.aspx
The PDF does render correctly in Chrome PDF viewer though.
Any suggestions as to why?
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started with Kendo UI for jQuery</title>
<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<p>Hello <a href="https://docs.telerik.com/kendo-ui/intro/first-steps">Kendo UI for jQuery</a>!
This is version <strong id="kendoVersion"></strong>.</p>
<script>
$(function() {
$("#kendoVersion").text(kendo.version);
});
</script>
<script>
kendo.pdf.defineFont({
"Material Design Icons": "https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/fonts/materialdesignicons-webfont.ttf"
});
</script>
<script type="text/javascript">
var generatePDF = function () {
kendo.drawing.drawDOM("#PdfPrintTest", {
paperSize: 'auto',
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
}).then(function (group) {
kendo.drawing.pdf.saveAs(group, "test.pdf")
});
};
</script>
<button onclick="generatePDF();">Download</button>
<div id="PdfPrintTest">
Bob lives in a <span class="mdi mdi-grass"></span>. and he likes it a lot
</div>
</body>
</html>
Martin
Telerik team
answered
on
20 Apr 2021
1 answer
527 views
Hi team,
I'm trying to setup notifications on my project, using your demo : https://demos.telerik.com/kendo-ui/notification/templates. I managed to make notifications appears like in your tutorial, but they are not stacking when multiple of them are open in the same time.
Here's my code :
function showNotification(_title, _txt, _type) { var notification = $("#notificationPopup").kendoNotification({ position: { pinned: true, top: 30, right: 30 }, autoHideAfter: 0, stacking: "down", templates: [{ type: "success", template: $("#successTemplate").html() }, { type: "warning", template: $("#warningTemplate").html() }, { type: "error", template: $("#errorTemplate").html() }] }).data("kendoNotification"); notification.show({ title: _title, message: _txt }, _type);}
<span id="notificationPopup" style="display:none;"></span><script id="successTemplate" type="text/x-kendo-template"> <div class="notifSuccess"> <h3>#= title #</h3> <p>#= message #</p> </div></script><script id="warningTemplate" type="text/x-kendo-template"> <div class="notifWarning"> <h3>#= title #</h3> <p>#= message #</p> </div></script><script id="errorTemplate" type="text/x-kendo-template"> <div class="notifError"> <h3>#= title #</h3> <p>#= message #</p> </div></script>
I call showNotification() whenever I want one to appear, but they do one in front each other instead of stacking in the direction I indicated.
Any idea of what I missed ?
Best regards,
Valentin
Valentin
Top achievements
Rank 1
Veteran
Rank 1
Veteran
answered
on
20 Apr 2021
3 answers
1.0K+ views
how to get base64 from the edited image, any sample or documentation?
tks
Stoyan
Telerik team
answered
on
19 Apr 2021
6 answers
817 views
Sorry if this question formats oddly. I'm using Firefox at the moment and wordwrap isn't working correctly here on the forum with FF v22.0.
My application has to do multiple searches against a large database, one search after the other, every few minutes, all day long.
Users click a map, the app gets the latitude and longitude of the location, and then queries the database for entities within a given radius.
The entities are displayed in the grid. Lather. Rinse. Repeat.
I destroy the grid before each search and delay the search for a fraction of a second (I've tried as long as 1.5 seconds) to give the "destruction" time in which to complete.
On the second and subsequent searches, the grid loses its groupable feature. The grouping-is-not-allowed icon when the user tries to drag the column-header to the group-panel.
It may be relevant that the grid is on a panelBar.
function doSearch() {
var existingGrid = $('#grid').data('kendoGrid');
if (existingGrid) {
existingGrid.destroy();
existingGrid.wrapper.html("");
}
setTimeout(function () {
FetchData(); // the success handler for this AJAX call instantiates and configures the grid
}, 222);
}
My application has to do multiple searches against a large database, one search after the other, every few minutes, all day long.
Users click a map, the app gets the latitude and longitude of the location, and then queries the database for entities within a given radius.
The entities are displayed in the grid. Lather. Rinse. Repeat.
I destroy the grid before each search and delay the search for a fraction of a second (I've tried as long as 1.5 seconds) to give the "destruction" time in which to complete.
On the second and subsequent searches, the grid loses its groupable feature. The grouping-is-not-allowed icon when the user tries to drag the column-header to the group-panel.
It may be relevant that the grid is on a panelBar.
function doSearch() {
var existingGrid = $('#grid').data('kendoGrid');
if (existingGrid) {
existingGrid.destroy();
existingGrid.wrapper.html("");
}
setTimeout(function () {
FetchData(); // the success handler for this AJAX call instantiates and configures the grid
}, 222);
}
Dimo
Telerik team
answered
on
19 Apr 2021
10 answers
2.6K+ views
I need to capture a multi page form in pdf format and then save it to the server with the record and not to the client. This is the code I wrote that send it to the client, how can I modify it to send it to the server instead
root.options.set("pdf", {
multiPage: 'true'
});
$('#formContainer .appPage').each(function (section) {
kendo.drawing.drawDOM(this).then(function (group) {
group.options.set("pdf", {
margin: {
left: "1cm",
right: "1cm",
top: "1cm",
bottom: "1cm"
}
});
root.append(group);
});
});
kendo.drawing.pdf.saveAs(root, "App.pdf");
Charanpreet
Top achievements
Rank 1
Veteran
Rank 1
Veteran
answered
on
17 Apr 2021
1 answer
435 views
Hello,
I have been able to add text to the kendo.ui.progress with the below JQuery and CSS. However, there are only certain times when processing an AJAX operation that I would like to display text and animation via kendo.ui.progress. Is there a way to clear the "loading" message after the ajax call is complete?
kendo.ui.progress.messages = { loading: "Processing file remittance. Please wait.."};kendo.ui.progress($("body"), true);span.k-loading-text { font-size: 1.1rem; text-indent: 0; top: 55%; display: inline-block; padding: 5px; background-color: #fff; border-radius: 5px; border: 1px solid #555;}
Neli
Telerik team
answered
on
16 Apr 2021
3 answers
248 views
hi,
Spreadsheet component is throwing an error while opening the attached file using fromFile method -> https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/methods/fromfile#:~:text=Clears%20the%20spreadsheet%20and%20populates,recent%20version%20of%20other%20browsers.
If I remove the filters than it works fine.
Can you please check.
Regards,
Jaspreet
Veselin Tsvetanov
Telerik team
answered
on
15 Apr 2021
1 answer
131 views
I can't find an options to hide the deleteTag. I want the user to select/deselect items by clicking on the items in the multiselect dropdown, and not by clicking the deleteTag on each tag.
I can change the popup-message when the mouse is hovering the 'X', but I can't find an option to remove the 'X'
Martin
Telerik team
answered
on
15 Apr 2021
1 answer
715 views
This article: https://docs.telerik.com/kendo-ui/knowledge-base/clear-selection-all-pages-grid
uses the undocumented property _selectedIds. If would prefer using a documented way, and since the article is rather old, maybe there is one today?
Tsvetomir
Telerik team
answered
on
15 Apr 2021
2 answers
2.0K+ views
Hi, we are currently evaluating Kendo UI and are having some trouble figuring out how to bind results a REST API call to the grid.
Most of the examples we have found are for other formats or local files. We are going to have to work exclusively with a vendor REST API so we need to figure this out in general. Ultimately we also want to be able to bind these results to a Diagram as well. But the focus is on a simple grid for now.
Any help would be appreciated including if there is a better way to do this.
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
<div class="box wide">
<div id="DDisplayCommitteeName"></div>
<div id="grid"></div>
<div class="demo-section k-content wide">
<div id="diagram"></div>
</div>
<div>
<h4>Export committee chart</h4>
<div class="box-col">
<button class='export-pdf k-button'>Export as PDF</button>
</div>
<div class="box-col">
<button class='export-img k-button'>Export as Image</button>
</div>
<div class="box-col">
<button class='export-svg k-button'>Export as SVG</button>
</div>
</div>
</div>
<script type="text/javascript">
/* GRID BLOCK */
$.ajax({
type: "GET",
url: "https://#####?QueryName=$/_Ross/Committee Members&offset=0&limit=100&CommitteeName='Finance Committee'",
// data: args, // parameters if available
headers: {"RequestVerificationToken": document.getElementById("__RequestVerificationToken").value,"X-TypeNameHandling": "false"},
dataType: "application/json",
success: function (result) {
var grid = $("#grid").data("kendoGrid");
var dataSource = new kendo.data.DataSource({ data: result });
grid.setDataSource(dataSource);
grid.dataSource.read();
},
error: function (httpRequest, textStatus, errorThrown) {
alert("Error: " + textStatus + " " + errorThrown + " " + httpRequest);
}
});
Example json results:
{
"Items": [
{
"Committee": "Governance Committee",
"Member": "Mr. Brodie Archer",
"Member ID": "22630",
"Position": "Chair",
"Status": "A",
"TermStart": "2020-05-13T00:00:00",
"TermEnd": "2022-05-31T00:00:00",
"Title": "Director, Operations",
"PositionRank": 10,
},
{
"Committee": "Governance Committee",
"Member": "Mr. David William Smith",
"Member ID": "21537",
"Position": "Member",
"Status": "A",
"TermStart": "2019-10-01T00:00:00",
"TermEnd": "2021-10-31T00:00:00",
"Title": "Team Lead",
"PositionRank": 80,
},
{
"Committee": "Governance Committee",
"Member": "Mrs. Sue Pack",
"Member ID": "20966",
"Position": "Member",
"Status": "A",
"TermStart": "2019-10-01T00:00:00",
"TermEnd": "2021-10-31T00:00:00",
"Title": "",
"PositionRank": 80,
},
{
"Committee": "Governance Committee",
"Member": "Ms. Claire F. Hosken",
"Member ID": "19069",
"Position": "Member",
"Status": "A",
"TermStart": "2019-10-01T00:00:00",
"TermEnd": "2021-10-31T00:00:00",
"Title": "Senior Vice President",
"PositionRank": 80,
}
],
"Offset": 0,
"Limit": 100,
"Count": 4,
"TotalCount": 4,
"NextPageLink": null,
"HasNext": false,
"NextOffset": 0
}
Tsvetomir
Telerik team
answered
on
14 Apr 2021
