Hello,
Can anyone help me locate references or documentation on how to customize the SVG of a linear Gauge?
Basically, I want to create a Battery Gauge. (example attached)
I'm trying to set margins when exporting to PDF using the Drawing API and can't get it to work. Here is a dojo. When you click the button to get the PDF, there is no margin around the chart. I'm assuming I'm doing something wrong, but not quite sure what.
$.ajax({ type: "POST", data: data, url: "IUA/Submit", success: function (result) { if (result.Id !== 0) { alert("Your application has completed the review phase and is confirmed complete. Your PIN will be " + result.Id + ". To complete your submission, please click the OK button below."); $('#loading').hide(); kendo.drawing.drawDOM($("#mainDiv")) .then(function (group) { // Render the result as a PDF file return kendo.drawing.exportPDF(group, { paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }); }) .done(function (data) { // Save the PDF file kendo.saveAs({ type: 'POST', dataURI: data, fileName: "IUAEnrollment.pdf", proxyURL: '@Url.Action("SavePDF", "IUA")', forceProxy: true, proxyTarget: "_blank" }); displayLoading("#formDiv", false); location.reload(); }); } else if (result.IsDuplicateRec == true) { $('#loading').hide(); $("#divDuplicate").show(); $("#captchaDiv").load(location.href + " #captchaDiv>*", ""); } else if (result.IsMVCCaptcha == false) { $('label[for="lblCaptchaErr"]').show(); $("#captchaDiv").load(location.href + " #captchaDiv>*", ""); setTimeout(WaitUntilLoad, 6000); } }, error: function () { $('#loading').hide(); alert("Error occured during the submission. Please contact helpdesk."); } });
Hi,
Is there any way to set the standard print options like "fitting content to print area" or "standard print page size'" while creating a PDF from the drawing API?
let pdfOptions = {
paperSize: 'a3'
landscape: true,
//something like this
printOptions = {
fitContentToPrintArea: true,
paperSize: 'a4'
}
};
kendo.drawing.exportPDF(root, pdfOptions).done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: fileName
});
});
Hi everyone, I would like to ask for your help.
I would like to hide the SubItems when the drawer is in mini mode, if I click on each element.
Thanks in Advance
https://dojo.telerik.com/ejapuWiB/3
Dayan K
Attached two files for your reference.
Code snippet is as below :-
$scope.MonthlyExportStatement = function() {
$scope.MonthlyDownloadButton = "Downloading...";
kendo.drawing.drawDOM(".monthly-pdf-page", {
paperSize: "A3",
margin: "1cm",
multiPage: true,
}).then(function(group){
kendo.drawing.pdf.saveAs(group, "test.pdf");
setTimeout(function(){
$scope.MonthlyDownloadButton = "Download PDF";
$scope.$apply();
});
});
}
For actual image please refer image 2. While downloading PDF with kendoUI, Image is getting cut off. What was wrong with above code ? Please assist me ASAP.
Hello,
I have a problem using the drawing library for creating PDFs with blocks being styled with a column-count style sheet being set to something other than 1 - it seems as if the drawing library is erroneously taking into account the sum of of all columns height instead of the real height when placing the output in a PDF, and thus leaving lots of blank space on the pages.
A working example can be found at Kendo UI Snippet | Kendo UI Dojo (telerik.com) (based on the page templates example)
Is this a known problem, am I missing something or is there any way/workaround to fix this?
Thanks & kind regards,
Hermann
Hello,
we are drawing a kind of graph on top of the map. We are currently trying to draw some text as well and we have gotten it to work kind of.
At the end I am going to include a small script to show how we are doing it right now and also show what the problem is.
We not only need to draw these things but they need to be clickable too. currently we use geojson with an id that allows us to reference the data behind a geojson point.
with the text we are cheating a bit because we interscept and prevent the default shape from being created and append it's dataItem to our new shape which makes it clickable. the problem is it isnt cleaned up well and it will be drawn over if the data changes. in the worst case if the location changes the new shape will be drawn in the new location but the previously drawn ones in the old location are not cleaned up.
Would be lovely if anyone has a tip on how to do in a nice way.
if you execute the fillowing code you will see the text is drawn on top of the previous text while you cannot see the same effect with the native Geojson Lines
function Guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
function rand() {
return Math.random()*360 - 180;
}
function onMarkerClick(e) {
console.log(e);
}
function createMap() {
var datasrc = new kendo.data.DataSource({
type: "geojson",
data: []
});
var datasrc1 = new kendo.data.DataSource({
type: "geojson",
data: []
});
var map = $("#map").kendoMap({
center: [0, 0],
zoom: 12,
layers: [{
type: "tile",
urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
subdomains: ["a", "b", "c"],
attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
},
{
type: "shape",
dataSource: datasrc,
},{
type: "shape",
dataSource: datasrc1,
}],
markerClick: onMarkerClick,
markerCreated: onMarkerCreated,
shapeCreated: onShapeCreated,
}).data("kendoMap");
let arr = [];
let arr1 = [];
for (var i = 0; i < 20; i++) {
arr.push({type: "Feature", id: Guid(), geometry: {type: "Point", coordinates: [0,0-i*0.005]}})
datasrc.data(arr)
}
for (var i = 0; i < 30; i++) {
arr1.push({type: "Feature", id: Guid(), geometry: {type: "LineString", coordinates: [[-5,0.08 - i * 0.002], [5,0.08- i * 0.002]]}})
datasrc1.data(arr1)
}
}
$(document).ready(createMap);
function onMarkerCreated(e) {
e.preventDefault()
}
function onShapeCreated(e) {
if (e.shape.dataItem.geometry.type == "Point") {
console.log("creating shape")
var bbox = e.shape.bbox();
var center = bbox.center()
var label = new kendo.drawing.Text("Lorem Ipsum");
var labelCenter = label.bbox().center()
label.position([
center.x - labelCenter.x,
center.y - labelCenter.y
])
label.dataItem = e.shape.dataItem;
e.layer.surface.draw(label);
e.preventDefault();
} else {
console.log("creating line")
}
}