Hi,
On the Grid, normally, messages: { display: "Showing {0}-{1} from {2} data items"} shows on the right side of the footer. When the Grid is limited on width (when re-sizing the window), the messages disappears.
The question here is that: is that possible to display the messages on the second row below of the footers (with first, last , buttons and page number , etc)? we just want to have the messages show up on the grid regardless of the width of the grid.
thanks,
Pauline
Hi,
I am getting the Data from an API where, I get only the first 2 page data At a time.
That is total 50 row records, and I will be showing 25 each in both the pages.
Now the issue is When I get my first 50 records from the API, I know total there are 147 Items, that is I will get all the data only after 3 web api calls.
Now I do not want all the records from the API before the user click on any page.
So after my first call. that I got 2 pages of grid( 25 + 25 = 50), but I know there are four more pages to get all 147 data.
So can I display the rest four more pagination, on click of that pagination can i get relevant data from API.
It looks complicated to explain and to implement.
Is it possible to implement this scenario with Kendo grid, or can I go ahead with a custom grid implementations. Thanks for your time

Hello, we recently encountered an issue when using the scheduler in Google Chrome. It seems as certain zoom percentages on Google Chrome prevents certain cells from being selected in the monthview component of the scheduler. Providing a dojo-example here. And instructions below.
The specific day (and the entire week in fact) can not be selected (see attached image)

Hello, I have read through the documentation many times and believe I can accomplish what I want to do. In fact, I have created a Dojo doing exactly what I want:
http://dojo.telerik.com/UDoZU
However, when I attempt to do this in my own software, I cannot even change the method request type from GET to POST.
I am attempting to create a Kendo Window and insert data inside of it from an API endpoint. I need to set custom request headers for my data call in order to make the request. So far, I've tried:
var window = document.createElement('div');
$(window).kendoWindow();
var dialog = $(window).data("kendoWindow");
dialog.refresh({
url: uri_UIManagement + 'Container/GetBuiltContainer' + urlString,
type: 'POST',
headers: headers,
beforeSend: function (xhr) {
debugger;
}
});
myWindow.kendoWindow({
width: "600px",
title: "About Alvar Aalto",
content: {
url: uri_UIManagement + 'Container/GetBuiltContainer' + urlString,
type: "POST"
},
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
]
}).data("kendoWindow").center().open();
myWindow.data('kendoWindow').refresh({
url: uri_UIManagement + 'Container/GetBuiltContainer' + urlString,
type: 'POST',
headers: headers,
beforeSend: function (xhr) {
debugger;
}
});
NONE of these methods allow me to hit the breakpoint I have set inside of beforeSend. They don't even change the request type from GET to POST. I can accomplish all of these things inside of the Kendo Dojo. What am I missing?


Hi,
I have a small problem with SVG images in the tabstrip-item. Is it possible to give the imageUrl a additional css class?
Because the SVG-Image has a native size of 64x64 which is much too large for me - I would like to define the size over a css-class instead of create a smaller version.
Thank you and best regards!
Hello,
I am from the Czech Republic and we use daylight savings time. Time is changing on 26th March, 2:00 AM. When I create an event in Scheduler and the event crosses the moment when the time is changing, e.g. event lasting from 25th March 5:00 PM to 26th March 5:00 PM, events in the Scheduler renders incorrectly and I get an exception:
Object doesn't support the method innerRect.
The exception is from _positionEvent function.
Interestingly, this problem occurs only when the event lasts exactly 24 hours. When it crosses the changing time moment, but lasts 25 or 23 hours, Scheduler works as expected.
Thanks for replies,
Boris
Hi,
We just upgraded to the new version of Kendo and are struggling a bit with the new themes. FYI we're using the kendo.silver theme.
The grid works fine in general, but the filter icon seems to want to take up way more space than necessary; the column title is often truncated and then 3 dots added to show that there's more. It's hard to explain but see the attached screenshot. The column name is actually "ID" which should easily fit in the space, but you have to make the column really wide for some reason to get it to show otherwise it displays as "I...".
I tried to edit the CSS manually (I did find a large margin in "k-with-icon") but I'm not good with CSS and only made things worse - the column title went on a separate line from the filter icon. Anyone have ideas on how I can fix this? I really don't want to have to go edit every page in our system to increase the column widths; they looked perfect with the old styles.
Thanks!
Nathan
I am using css to increase the numeration but when I export to PDF the number doesn't appear.
Example
1 Section
1.1 Subsection
1.1.1 Standards
by in the PDF their appear like that:
0 Section
0.0 Subsection
0.0.0 Standards
this is the code I used
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="content-wrapper">
<div class="box wide hidden-on-narrow">
<h4>Export page content</h4>
<div class="box-col">
<button class='export-pdf k-button'>Export as PDF</button>
</div>
</div>
<main>
<section class="row foodSect">
<div class="section">
<h1 class="col-md-5">FOOD TRACEABILITY</h1>
<!-- SUBSECTION 2.1-->
<div class="col-md-12 subsections">
<h2 class="col-md-4">FOOD TRACEABILITY</h2>
<!-- STANDARDS 2.1.1-->
<div class="col-md-12 standards">
<h3 class="col-md-5">Traceability Systems for Receiving Food </h3>
</div><!-- end standards 2.1.1-->
</div><!-- end subsection 2.1-->
</div>
</section>
</main>
<style>
.foodSect {counter-reset: section;}
.foodSect h1 {counter-reset: subsection;}
.foodSect h2 {counter-reset: standards;}
.foodSect h3 {
font-size: 0.944em;
margin: 9px auto;
padding-left: 30px;
float: left;
}
.foodSect h1:before {
counter-increment: section;
content: counter(section) " ";
}
.foodSect h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
.foodSect h3:before {
counter-increment: standards;
content: counter(section) "." counter(subsection) "." counter(standards) " ";
}
</style>
<script>
// Import DejaVu Sans font for embedding
// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. cdn.kendostatic.com
kendo.pdf.defineFont({
"DejaVu Sans" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
});
</script>
<!-- Load Pako ZLIB library to enable PDF compression -->
<script>
$(document).ready(function() {
$(".export-pdf").click(function() {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($("#example"),{
multiPage: true,
paperSize: [1100, 1430],
landscape:true,
date:true,
page:true,
title: true,
author:true,
margin: {left: "1cm", top: "1cm", right: "1cm", bottom: "1cm"}
})
.then(function(group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group);
})
.done(function(data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "HR-Dashboard.pdf",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
});
});
});
});
</script>
</body>
</html>
