Skip to content

Commit ff0e896

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent f8034ed commit ff0e896

File tree

5 files changed

+425
-2
lines changed

5 files changed

+425
-2
lines changed

‎docs/knowledge-base/calendar-disable-dates-dynamically.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Disable dates of the Kendo UI Calendar dynamically
3+
description: An example on how to disable dates of the Kendo UI Calendar dynamically.
4+
type: how-to
5+
page_title: Disable dates of the Kendo UI Calendar dynamically| Kendo UI Calendar
6+
slug: calendar-disable-dates-dynamically
7+
tags: calendar, disable, dates, dynamically, javascript,js
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>Calendar for Progress® Kendo UI®</td>
17+
</tr> <tr>
18+
<td>Made with version</td>
19+
<td>2017.3.1026</td>
20+
</tr>
21+
</table>
22+
23+
24+
## Description
25+
26+
How can I disable dates of the Kendo UI Calendar after the initialization of the widget?
27+
28+
## Solution
29+
30+
Use [destroy method](https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#methods-destroy) to destroy the calendar and then initialize once again with disabled dates.
31+
32+
````html
33+
<div id="calendar"></div>
34+
<a class="k-button" onclick="changeDisableDates()">Disable dates</a>
35+
<script>
36+
$("#calendar").kendoCalendar();
37+
38+
function changeDisableDates() {
39+
var calendar = $('#calendar').data('kendoCalendar');
40+
var options = calendar.options;
41+
options.disableDates = ["mo", "sa"];
42+
43+
calendar.destroy();
44+
$('#calendar').html('');
45+
$('#calendar').kendoCalendar(options);
46+
}
47+
</script>
48+
````

‎docs/knowledge-base/chart-style-not-affected-by-sass-theme.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: Custom Theme Created Using Sass ThemeBuilder Doesn't Affect Charts
3+
description: Theme created using ThemeBuilder changes style of every control except the Charts
4+
type: troubleshooting
5+
page_title: Custom Theme Created Using Sass ThemeBuilder Doesn't Affect Charts
6+
slug: chart-style-not-affected-by-sass-theme
7+
tags: chart, theme, themebuilder, style, sass
8+
ticketid: 1141887
9+
res_type: kb
10+
11+
---
12+
13+
## Environment
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>Progress® Kendo UI® Charts for ASP.NET MVC</td>
18+
</tr>
19+
<tr>
20+
<td>Operating System</td>
21+
<td>All</td>
22+
</tr>
23+
<tr>
24+
<td>Visual Studio version</td>
25+
<td>All</td>
26+
</tr>
27+
<tr>
28+
<td>View Engine</td>
29+
<td>Razor</td>
30+
</tr>
31+
</table>
32+
33+
## Description
34+
35+
I created a new Sass theme using the ThemeBuilder tool, downloaded it, and added a reference to it in my `Layout.cshtml` file. The theme works as expected throughout all the application but it doesn't affect the charts even though I chose new colors for the series.
36+
37+
## Cause\ Possible Cause(s)
38+
39+
As the Charts are very specific Widgets, they require a custom property to be set before recognizing the new styles.
40+
41+
## Solution
42+
43+
Set the `theme` property of the Kendo UI Charts to `"sass"`
44+
45+
````c#
46+
@(Html.Kendo().Chart()
47+
.Name("bar")
48+
.Theme("sass")
49+
````
50+
51+
## See Also
52+
* [Progress Sass ThemeBuilder.](http://themebuilder.telerik.com/aspnet-mvc)
53+
* [API Reference for theme property.](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-theme)

‎docs/knowledge-base/grid-export-pdf-without-toolbar-pager.md‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
---
2+
title: Exclude Toolbar and Pager from Grid Pdf Export
3+
description: An example on how to export the Grid to Pdf without the toolbar and pager
4+
type: how-to
5+
page_title: Exclude Toolbar and Pager from Grid Pdf Export
6+
slug: grid-export-pdf-without-toolbar-pager
7+
tags: grid, export, pdf, toolbar, pager, ignore, exclude
8+
ticketid: 1143253
9+
res_type: kb
10+
11+
---
12+
13+
## Environment
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>Grid for Progress® Kendo UI®</td>
18+
</tr>
19+
<tr>
20+
<td>Operating System</td>
21+
<td>All</td>
22+
</tr>
23+
<tr>
24+
<td>Browser</td>
25+
<td>All</td>
26+
</tr>
27+
<tr>
28+
<td>Browser Version</td>
29+
<td>All</td>
30+
</tr>
31+
</table>
32+
33+
## Description
34+
35+
When exporting a Kendo UI Grid to Pdf, the custom Toolbar and Pager are included; how can I prevent them from appearing in the exported Pdf file?
36+
37+
## Solution
38+
39+
Using the following CSS, we can prevent the Toolbar and Pager from being exported when using the export to pdf functionality of the Kendo UI Grid:
40+
41+
````css
42+
.k-pdf-export .k-grid-toolbar,
43+
.k-pdf-export .k-pager-wrap
44+
{
45+
display: none;
46+
}
47+
````
48+
49+
The result:
50+
51+
```html
52+
<div id="example">
53+
54+
<div id="grid"></div>
55+
56+
<script type="text/x-kendo-template" id="template">
57+
<div class="toolbar">
58+
<label class="category-label" for="category">Test input:</label>
59+
<input type="search" id="category" style="width: 150px"/>
60+
<a class="k-button k-button-icontext k-grid-pdf" href="\\#">Export to Pdf</a>
61+
</div>
62+
</script>
63+
<script id="rowTemplate" type="text/x-kendo-tmpl">
64+
<tr data-uid="#: uid #">
65+
<td class="photo">
66+
<img src="../content/web/Employees/#: EmployeeID #.jpg" alt="#: EmployeeID #" />
67+
</td>
68+
<td class="details">
69+
<span class="name">#: FirstName# #: LastName# </span>
70+
<span class="title">Title: #: Title #</span>
71+
</td>
72+
<td class="country">
73+
#: Country #
74+
</td>
75+
<td class="employeeID">
76+
#: EmployeeID #
77+
</td>
78+
</tr>
79+
</script>
80+
<script id="altRowTemplate" type="text/x-kendo-tmpl">
81+
<tr class="k-alt" data-uid="#: uid #">
82+
<td class="photo">
83+
<img src="../content/web/Employees/#: data.EmployeeID #.jpg" alt="#: EmployeeID #" />
84+
</td>
85+
<td class="details">
86+
<span class="name">#: FirstName# #: LastName# </span>
87+
<span class="title">Title: #: Title #</span>
88+
</td>
89+
<td class="country">
90+
#: Country #
91+
</td>
92+
<td class="employeeID">
93+
#: EmployeeID #
94+
</td>
95+
</tr>
96+
</script>
97+
98+
<style>
99+
/*
100+
Use the DejaVu Sans font for display and embedding in the PDF file.
101+
The standard PDF fonts have no support for Unicode characters.
102+
*/
103+
.k-grid {
104+
font-family: "DejaVu Sans", "Arial", sans-serif;
105+
}
106+
107+
/* Hide the Grid header and pager during export */
108+
.k-pdf-export .k-grid-toolbar,
109+
.k-pdf-export .k-pager-wrap
110+
{
111+
display: none;
112+
}
113+
</style>
114+
115+
<script>
116+
// Import DejaVu Sans font for embedding
117+
118+
// NOTE: Only required if the Kendo UI stylesheets are loaded
119+
// from a different origin, e.g. cdn.kendostatic.com
120+
kendo.pdf.defineFont({
121+
"DejaVu Sans" : "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans.ttf",
122+
"DejaVu Sans|Bold" : "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
123+
"DejaVu Sans|Bold|Italic" : "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
124+
"DejaVu Sans|Italic" : "//kendo.cdn.telerik.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
125+
});
126+
</script>
127+
128+
<!-- Load Pako ZLIB library to enable PDF compression -->
129+
<script src="//kendo.cdn.telerik.com/2016.1.112/js/pako_deflate.min.js"></script>
130+
131+
<script>
132+
$("#grid").kendoGrid({
133+
toolbar: ["pdf"],
134+
pdf: {
135+
allPages: true,
136+
fileName: "Kendo UI Grid Export.pdf",
137+
proxyURL: "//demos.telerik.com/kendo-ui/service/export"
138+
},
139+
toolbar: kendo.template($("#template").html()),
140+
dataSource: {
141+
type: "odata",
142+
transport: {
143+
read: {
144+
url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
145+
}
146+
},
147+
pageSize: 5
148+
},
149+
columns: [
150+
{ title: "Photo", width: 140 },
151+
{ title: "Details", width: 350 },
152+
{ title: "Country" },
153+
{ title: "EmployeeID" }
154+
],
155+
rowTemplate: kendo.template($("#rowTemplate").html()),
156+
altRowTemplate: kendo.template($("#altRowTemplate").html()),
157+
height: 500,
158+
scrollable: true,
159+
pageable: true
160+
});
161+
</script>
162+
<style>
163+
.employeeID,
164+
.country {
165+
font-size: 50px;
166+
font-weight: bold;
167+
color: #898989;
168+
}
169+
.name {
170+
display: block;
171+
font-size: 1.6em;
172+
}
173+
.title {
174+
display: block;
175+
padding-top: 1.6em;
176+
}
177+
td.photo, .employeeID {
178+
text-align: center;
179+
}
180+
.k-grid-header .k-header {
181+
padding: 10px 20px;
182+
}
183+
.k-grid tr {
184+
background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
185+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
186+
background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
187+
background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
188+
background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
189+
background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
190+
padding: 20px;
191+
}
192+
.k-grid tr.k-alt {
193+
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
194+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
195+
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
196+
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
197+
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
198+
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
199+
}
200+
</style>
201+
</div>
202+
```
203+
204+
## See Also
205+
206+
* [Kendo UI Grid PDF Export Overview.](https://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export)

0 commit comments

Comments
 (0)