or
0 answers
51 views
I am trying to output the contents of a webpage to a PDF using the below. Here is a simplified example that demonstrates my problem: https://dojo.telerik.com/FsiNAoUB/2
My actual webpage contains a few paragraphs of information in divs and a few tables. The tables can be wide so I am using the kendo.drawing.fit so everything looks good on the PDF.
With the kendo.drawing.fit, the PDF outputs the page very nicely, all the objects fits well on the PDF.
But the problem I have is that the header and footer templates do not work when using kendo.drawing.fit. Meaning, no header or footer appears in the PDF. But the objects do appear as desired.
If I remove the kendo.drawing.fit, the header and footer templates work again, but the output does not look as good. The grids are too wide etc...
How can I get the below example working with header and footer templates?
More information:
If these setting are set here: "kendo.drawing.drawDOM("#grid", {paperSize: "A4",margin: "3cm",template: $("#page-template").html()......."
-All the pages of the PDF are placed on top of each other on 1 single page. For example instead of 3 pages in the PDF, there is only 1 page because each page is "printed" on the same page, on top of each other. However, the header and footer templates do print on the PDF.
Here is an example PDF:
If these setting are set here: "return kendo.drawing.exportPDF(content, {paperSize: "A4",margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },template: $("#page-template").html()});"
-The PDF appears as desired but there are no header or footer templates.
kendo.drawing.drawDOM("#grid", {
paperSize: "A4",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
template: $("#page-template").html()
}).then(function(group){
//Adding this forces all the pages of the PDF to overlap onto 1 page
var PAGE_RECT = new kendo.geometry.Rect(
[0, 0], [mm(210 - 20), mm(297 - 20)]
);
var content = new kendo.drawing.Group();
content.append(group);
kendo.drawing.fit(content, PAGE_RECT)
//
return kendo.drawing.exportPDF(content, {
//paperSize: "A4",
//margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
//template: $("#page-template").html()
});
})
.done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "filename.pdf",
//proxyURL: "myurl/Test/"
});
});
0 answers
46 views
Hello,
I'm currently creating a treeview page using kendo JQuery.
I want to make it so that when a child node is selected, the parent node is selected.
I found this page, https://docs.telerik.com/kendo-ui/knowledge-base/check-nodes-programmatically, and tried to this properties.
var treeview = $("#tree").data("kendoTreeView");
var bar = treeview.findByText("Bar");
treeview.dataItem(bar).set("checked", true);
But, 'menuAuth.js:299 Uncaught TypeError: Cannot read properties of undefined (reading 'findByText')' was printed on the console.
also, parent cannot be read.
'menuAuth.js:301 Uncaught TypeError: Cannot read properties of undefined (reading 'parent')' is printed on console too.
I really need to make parent node selection.
please let me know how can I use this things.
Thanks,
Jieun
2 answers
62 views
I am trying to use npm version of kendo ui jquery, I have added it to my package.json and referenced the latest version I have access to which is 2023.1.425, when I try to use the license I have on my account I am getting the following error:
License activation failed for @progress/kendo-ui v2023.3.1114 Your trial license expired on 10/14/2023, 2:00:17 PM.
It seems the license is attempting to activate another version, to be more a specific a trial that has expired, I should still be able to use my perpetual license of the latest version I have access to which is 2023.1.425, but it seems the portal has rewritten latest license with a trial license?
any help with this should be appreciated
1 answer
45 views
Hi everyone,
I have problems on binding data from json to Kendo UI for Jquery scheduler, here is my code:
Html/JS
$("#scheduler").kendoScheduler({
timezone: "Europe/Rome",
ongoingEvents: true,
editable: false, /*must be read-only*/
views: [
{
type: "month"
}
],
dataSource: {
batch: true,
transport: {
read: {
url: "/ajax/scheduler-view.php",
dataType: "json"
}
}
},
schema: {
model: {
fields: {
id: { type: "number", field: "id" },
title: { field: "title" },
start: { type: "date", field: "start" },
end: { type: "date", field: "end" },
description: { field: "description" },
isAllDay: { type: "boolean", field: "isAllDay" }
}
}
}
});and here is the JSON:
[{"id":1,"title":"mio titolo","description":"","startTimezone":"Europe\/Rome","start":"\/Date(1729786479)\/","end":"\/Date(1729872879)\/","endTimezone":"Europe\/Rome","isAllDay":true}]I tryied many ways, but I cannot see the event in the scheduler (that is rendered ok, but empty).
Any suggestion?
Thank you
Alessandro
Top achievements
Rank 1
Iron
Iron
Iron
Rank 1
Iron
Iron
Iron
answered
on
24 Oct 2024
1 answer
32 views
Is there a speed control/play back rate configuration that exists for the KendoMediaPlayer component? If so, is the configuration flexible where you can specify an array of various speeds to it? Looking through the documentation I don't see any configurations or examples of a speed control.
Martin
Telerik team
answered
on
24 Oct 2024
0 answers
201 views
I'm using kendo spreadsheet in my project and have a lot of customization so first I'm having some code to prepare grid data and in the end using the below line to set the spread sheet data
kendo.jQuery(this.el.nativeElement).kendoSpreadsheet(gridData);
If i have 3000 rows and 100 columns it takes around ~1 min.
I got a suggestion to use batch but I'm not finding any syntax. Please advice.
Janaki
Top achievements
Rank 1
Rank 1
asked
on
24 Oct 2024
1 answer
96 views
REPOSTING HERE AS I BELIEVE I HAVE POSTED THIS IN THE INCORRECT FORUM (Sorry ).
Hi, I am new to this, so I apologise if this is a simple question/answer.
I have been asked to "learn while doing" on some code .
at the moment, if a filter is used on a ride, and it return matches, the first row is selected, and that data is then used to help get data for the tab strip.
If the filter returns on rows, the tapstrip still has the data showing for the previous (still selected ? ) row .
I have tried
grid.bind("dataBound", function () {
var displayedRows = grid.tbody.find(">tr");
var tabStrip = $("#details").data("kendoTabStrip");
if (displayedRows.length === 0) {
// Display the length of displayed rows for troubleshooting
/* alert("Number of displayed rows: " + displayedRows.length); // Show in alert for easier visibility*/
//var tabStrip = $("#details").data("kendoTabStrip");
tabStrip.contentElements.empty(); // Clear tab content
tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message
}
else {
}
});and this works for the First time it finds length = 0, but if I clear the filter and do a search that has results, or clear the filter and select the first row in #grid, the tabstrip is not updated.
please can someone advise what I need in the else clause, as anything gi put in here either doesn't work, or "breaks" the other options grid.binds i have in that sets the default search filter on one column to "contains".
thanks
1 answer
59 views
Hi support team,
is there a way I can prevent the reordering when using the columnReorder event?
I thought about using something like the following approach but had no luck.
function onColumnReorder(e) {
if (e.oldIndex < 5) {
e.newIndex = e.oldIndex;
e.preventDefault();
}
I already found this documentation article Prevent Column Reordering - Kendo UI for jQuery Data Grid - Kendo UI for jQuery (telerik.com)
But this is seems to me like kind of a hack. The screen is flickering.
Regards
Sven
Martin
Telerik team
answered
on
24 Oct 2024
1 answer
52 views
I have a function as
function () {
return this.get('inputTextvalue') && this.get('inputTextvalue').trim();
}
I want to set to the kendo Observable:
var ko = kendo.observable({
onEdit: function (e) {
$(function () {
var ds= e.container.find('.k-grid').data('kendoGrid').dataSource,
model.set('inputTextvalue', null);
model.set('btnEnabled', function () {
return this.get('inputTextvalue') && this.get('inputTextvalue').trim();
});
dataSource.data(model.Data);
});
}
});
I'm getting error as
Uncaught SyntaxError: "undefined" is not valid JSON
at JSON.parse (<anonymous>)
at init._change (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:125534)
at init.trigger (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:4180)
at init.<anonymous> (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:83206)
at init.trigger (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:4180)
at init.set (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:88287)
at init.set (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:90491)
at init.onEdit (<anonymous>:14:29)
at init.<anonymous> (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:168524)
at init.trigger (kendo?v=Ap0ariFxbPaGlnYj11dqmTEGSRA:10:4180)
Martin
Telerik team
answered
on
21 Oct 2024
4 answers
898 views
I have two Kendo scheduler timelines that are displayed one above the other. I want to keep the horizontal scroll position of the two timelines in sync by hooking into the scroll position for one timeline when scrolling in the other, but I can't see a way of doing this. Does anyone know of a way?
Also, in order to have a vertical correlation between the two timelines, I'd like to force the timelines to have a vertical scrollbar, even when one isn't needed: when a scrollbar is present in one of the timelines but not the other, the times don't align vertically because the scrollbar's width forces the compression of the time intervals. Again, any help would be appreciated.
grid.bind("dataBound", function () { var displayedRows = grid.tbody.find(">tr"); var tabStrip = $("#details").data("kendoTabStrip"); if (displayedRows.length === 0) { grid.clearSelection(); // Clear selection if no matches tabStrip.contentElements.empty(); // Clear tab content tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message } else { clearTabStrip(); // Clear any previous "No Data" message // Select the first row if there are matches grid.select(displayedRows.first()); // Populate TabStrip elements tabStrip.setOptions({ animation: { open: { effects: "fadeIn" } }, items: [ { text: "Connection", contentUrl: "Index", action: function () { location.href = '/Connection'; } }, { text: "PMS", contentUrl: "Index", action: function () { location.href = '/PMS'; } }, { text: "Corporate", contentUrl: "Index", action: function () { location.href = '/Corporate'; } }, { text: "Units", contentUrl: "Index", action: function () { location.href = '/Units'; } }, { text: "Version", contentUrl: "Index", action: function () { location.href = '/SoftwareVersion'; } }, { text: "Services", contentUrl: "Index", action: function () { location.href = '/Services'; } }, { text: "more", contentUrl: "Index", action: function () { location.href = '/Services'; } }, { text: "Emails", contentUrl: "Index", action: function () { location.href = '/SMTP'; } }, { text: "SMTP", contentUrl: "Index", action: function () { location.href = '/HotelSMTPSettings'; } }, { text: "Payments", contentUrl: "Index", action: function () { location.href = '/HotelPayment'; } }, { text: "Methods", contentUrl: "Index", action: function () { location.href = '/HotelPaymentMethods'; } }, { text: "Pay System", contentUrl: "Index", action: function () { location.href = '/HotelPaymentSystem'; } }, { text: "Notes", contentUrl: "Index", action: function () { location.href = '/HotelNotes'; } } ] }); tabStrip.reload(); // Reload TabStrip content tabStrip.select(1); // Ensure the second tab (Connection) is selected // tabStrip.select(0); // Ensure the first tab (Connection) is selected } });// Handle dataBound event grid.bind("dataBound", function () { var displayedRows = grid.tbody.find(">tr"); var tabStrip = $("#details").data("kendoTabStrip"); if (displayedRows.length === 0) { grid.clearSelection(); // Clear selection if no matches tabStrip.contentElements.empty(); // Clear tab content tabStrip.contentElements.append('<div class="no-data">No Data Available</div>'); // Add "No Data Available" message } else { clearTabStrip(); // Clear any previous "No Data" message // Select the first row if there are matches grid.select(displayedRows.first()); // Populate TabStrip elements tabStrip.setOptions({ animation: { open: { effects: "fadeIn" } }, items: [ { text: "Connection", contentUrl: "Index", action: function () { location.href = '/Connection'; } }, { text: "PMS", contentUrl: "Index", action: function () { location.href = '/PMS'; } }, { text: "Corporate", contentUrl: "Index", action: function () { location.href = '/Corporate'; } }, { text: "Units", contentUrl: "Index", action: function () { location.href = '/Units'; } }, { text: "Version", contentUrl: "Index", action: function () { location.href = '/SoftwareVersion'; } }, { text: "Services", contentUrl: "Index", action: function () { location.href = '/Services'; } }, { text: "Reception", contentUrl: "Index", action: function () { location.href = '/Reception; } }, { text: "Emails", contentUrl: "Index", action: function () { location.href = '/SMTP'; } }, { text: "SMTP", contentUrl: "Index", action: function () { location.href = '/Settings'; } }, { text: "Payments", contentUrl: "Index", action: function () { location.href = '/Payment'; } }, { text: "Methods", contentUrl: "Index", action: function () { location.href = '/PaymentMethods'; } }, { text: "Pay System", contentUrl: "Index", action: function () { location.href = '/PaymentSystem'; } }, { text: "Notes", contentUrl: "Index", action: function () { location.href = '/Notes'; } } ] }); tabStrip.reload(); // Reload TabStrip content setTimeout(function () { tabStrip.select(1); setTimeout(function () { tabStrip.select(0); tabStrip.reload(); // Reload content of the Connection tab }, 50); // Adding a delay to ensure the tab is correctly reselected }, 0); } }); // Function to clear the TabStrip function clearTabStrip() { var tabStrip = $("#details").data("kendoTabStrip"); tabStrip.contentElements.empty(); // Clear tab content }