Skip to content

Commit 372154a

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 2c8784a commit 372154a

File tree

5 files changed

+337
-1
lines changed

5 files changed

+337
-1
lines changed

‎docs-aspnet/html-helpers/scheduling/gantt/overview.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,8 @@ The following example demonstrates the basic configuration of the Gantt.
305305
| [Data binding]({% slug htmlhelpers_gantt_binding_aspnetcore %}) | The Gantt provides various options for data binding. |
306306
| [Columns]({% slug htmlhelpers_gantt_columns_aspnetcore %}) | The Gantt columns offer configuration options for customizing the columns in the list section of the Gantt |
307307
| [Planned vs Actual]({% slug htmlhelpers_gantt_planned_vs_actual_aspnetcore %}) | You can compare the actual `start` and `end` dates with the originaly planned dates. |
308+
| [PDF export]({% slug htmlhelpers_gantt_pdf_export_aspnetcore %}) | The Gantt has built-in PDF export capabilities. |
309+
| [Select date range]({% slug htmlhelpers_gantt_select_date_range_aspnetcore %}) | You can configure the component to display tasks in a specified date range only. |
308310
| [Resources]({% slug htmlhelpers_gantt_resources_aspnetcore %}) | The Gantt allows you to assign optional resources to the Gantt tasks. |
309311
| [Templates]({% slug htmlhelpers_gantt_templates_aspnetcore %}) | You can customizing the rendering of the Gantt tasks through templates. |
310312
| [Accessibility]({% slug accessibility_aspnetcore_gantt %}) | The Gantt is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support. |

‎docs-aspnet/html-helpers/scheduling/gantt/pdf-export.md‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
---
2+
title: PDF Export
3+
page_title: PDF Export
4+
description: "Export the Telerik UI Gantt for {{ site.framework }} to PDF."
5+
slug: htmlhelpers_gantt_pdf_export_aspnetcore
6+
position: 5
7+
---
8+
9+
# PDF Export
10+
11+
The Telerik {{ site.product_short }} Gantt component provides a built-in PDF export functionality.
12+
13+
For a runnable example, refer to the [demo on exporting the Gantt to PDF](https://demos.telerik.com/{{ site.platform }}/gantt/pdf-export).
14+
15+
## Getting Started
16+
17+
To enable PDF export:
18+
19+
1. Include the corresponding toolbar command and set the export settings.
20+
* [Toolbar configuration](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/ganttbuilder#toolbarsystemaction)
21+
* [PDF export configuration](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/ganttbuilder#pdfsystemaction)
22+
1. Include the `Pako Deflate` library in the page to enable compression.
23+
24+
The following example demonstrates how to enable the PDF export functionality of the Gantt.
25+
26+
{% if site.core %}
27+
```HtmlHelper
28+
<!-- Load Pako Deflate library to enable PDF compression -->
29+
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
30+
31+
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
32+
.Name("gantt")
33+
.Toolbar(tb =>
34+
{
35+
tb.Pdf();
36+
})
37+
.Pdf(pdf => pdf
38+
.FileName("Gantt Export.pdf")
39+
)
40+
//...additional Gantt configuration...
41+
)
42+
```
43+
```TagHelper
44+
<!-- Load Pako Deflate library to enable PDF compression -->
45+
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
46+
47+
<kendo-gantt name="gantt">
48+
<toolbars>
49+
<toolbar name="pdf">
50+
</toolbar>
51+
</toolbars>
52+
<pdf file-name="Gantt Export.pdf">
53+
</pdf>
54+
<!-- ...additional Gantt configuration... -->
55+
</kendo-gantt>
56+
```
57+
{% else %}
58+
```HtmlHelper
59+
<!-- Load Pako Deflate library to enable PDF compression -->
60+
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
61+
62+
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
63+
.Name("gantt")
64+
.Toolbar(tb =>
65+
{
66+
tb.Add().Name("pdf");
67+
})
68+
.Pdf(pdf => pdf
69+
.FileName("Gantt Export.pdf")
70+
)
71+
//...additional Gantt configuration...
72+
)
73+
```
74+
{% endif %}
75+
76+
## Saving Files on the Server
77+
78+
To send the generated file to a remote endpoint, use the `ProxyURL()` and `ForceProxy()` methods.
79+
80+
{% if site.core %}
81+
```HtmlHelper
82+
<!-- Load Pako Deflate library to enable PDF compression -->
83+
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
84+
85+
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
86+
.Name("gantt")
87+
.Toolbar(tb =>
88+
{
89+
tb.Pdf();
90+
})
91+
.Pdf(pdf => pdf
92+
.FileName("Gantt Export.pdf")
93+
.ForceProxy(true)
94+
.ProxyURL(Url.Action("PdfExportSave", "Home"))
95+
)
96+
//...additional Gantt configuration...
97+
)
98+
```
99+
```TagHelper
100+
<!-- Load Pako Deflate library to enable PDF compression -->
101+
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
102+
103+
<kendo-gantt name="gantt">
104+
<toolbars>
105+
<toolbar name="pdf">
106+
</toolbar>
107+
</toolbars>
108+
<pdf file-name="Gantt Export.pdf"
109+
force-proxy="true"
110+
proxy-url="@Url.Action("PdfExportSave", "Home")">
111+
</pdf>
112+
</kendo-gantt>
113+
```
114+
{% else %}
115+
```HtmlHelper
116+
<!-- Load Pako Deflate library to enable PDF compression -->
117+
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
118+
119+
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
120+
.Name("gantt")
121+
.Toolbar(tb =>
122+
{
123+
tb.Add().Name("pdf");
124+
})
125+
.Pdf(pdf => pdf
126+
.FileName("Gantt Export.pdf")
127+
.ForceProxy(true)
128+
.ProxyURL(Url.Action("PdfExportSave", "Home"))
129+
)
130+
//...additional Gantt configuration...
131+
)
132+
```
133+
{% endif %}
134+
135+
```ServerProxy
136+
[HttpPost]
137+
public ActionResult PdfExportSave(string contentType, string base64, string fileName)
138+
{
139+
var fileContents = Convert.FromBase64String(base64);
140+
return File(fileContents, contentType, fileName);
141+
}
142+
```
143+
144+
## Embedding Unicode Characters
145+
146+
The default fonts in PDF files do not provide Unicode support. To support international characters, you have to embed an external font. For more information on the supported [Deja Vu font family](https://dejavu-fonts.github.io) as part of the Kendo UI distributions and other fonts, refer to the Kendo UI for jQuery article on [custom fonts and PDF](https://docs.telerik.com/kendo-ui/framework/drawing/pdf-output/embedded-fonts).
147+
148+
The following example demonstrates how to handle custom fonts.
149+
150+
```Style
151+
<style>
152+
/*
153+
Use the DejaVu Sans font for display and embedding in the PDF file.
154+
The standard PDF fonts have no support for Unicode characters.
155+
*/
156+
.k-gantt {
157+
font-family: "DejaVu Sans", "Arial", sans-serif;
158+
}
159+
160+
/* Hide the Gantt toolbar during export */
161+
.k-pdf-export .k-gantt-toolbar {
162+
display: none;
163+
}
164+
</style>
165+
```
166+
167+
## Further Reading
168+
169+
* [PDF output by the Kendo UI Drawing library](https://docs.telerik.com/kendo-ui/framework/drawing/pdf-output/overview)
170+
* [Drawing DOM elements with the Kendo UI Drawing library](https://docs.telerik.com/kendo-ui/framework/drawing/dom-elements/overview)
171+
* [Saving files with Kendo UI](https://docs.telerik.com/kendo-ui/framework/saving-files)
172+
173+
## See Also
174+
175+
* [Server-Side API](/api/gantt)
176+
* [PDF Export of the Telerik UI Gantt for {{ site.framework }} Demo](https://demos.telerik.com/{{ site.platform }}/gantt/pdf-export)

‎docs-aspnet/html-helpers/scheduling/gantt/resources.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Resources
33
page_title: Resources
44
description: "Use resources in the Telerik UI Gantt component for {{ site.framework }}."
55
slug: htmlhelpers_gantt_resources_aspnetcore
6-
position: 5
6+
position: 6
77
---
88

99
# Resources

‎docs-aspnet/html-helpers/scheduling/gantt/select-date-range.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: Select Date Range
3+
page_title: Date Range
4+
description: "Learn more about how set the date range of the Telerik UI Gantt component for {{ site.framework }}."
5+
slug: htmlhelpers_gantt_select_date_range_aspnetcore
6+
position: 9
7+
---
8+
9+
# Date Range
10+
11+
The Telerik UI for ASP.NET Core Gantt allows you to display tasks only in a specified date range.
12+
13+
For a full example of the date range functionality, refer to the [Selected Date Range (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt/selected-date-and-range).
14+
15+
## Configuration
16+
17+
The example below demonstrates how to configure the different views of the Gantt to display the tasks that are within a date range.
18+
19+
```HtmlHelper
20+
@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
21+
.Name("gantt")
22+
.Views(views =>
23+
{
24+
views.DayView(d => d
25+
.Date(new DateTime(2022, 6, 2))
26+
.Range(r =>
27+
r.Start(new DateTime(2022, 6, 2))
28+
.End(new DateTime(2022, 6, 8))
29+
));
30+
views.WeekView(w => w
31+
.Date(new DateTime(2022, 6, 1))
32+
.Range(r =>
33+
r.Start(new DateTime(2022, 6, 1))
34+
.End(new DateTime(2022, 7, 13))
35+
)
36+
.Selected(true)
37+
);
38+
views.MonthView(m => m
39+
.Date(new DateTime(2022, 5, 18))
40+
.Range(r =>
41+
r.Start(new DateTime(2022, 5, 18))
42+
.End(new DateTime(2022, 8, 3))
43+
));
44+
})
45+
<!-- ...additional Gantt configuration... -->
46+
)
47+
```
48+
{% if site.core %}
49+
```TagHelper
50+
<kendo-gantt name="gantt">
51+
<views>
52+
<gantt-view date="new DateTime(2022, 6, 2)" type="GanttViewType.Day">
53+
<range start="new DateTime(2022, 6, 2)" end="new DateTime(2022, 6, 8)"/>
54+
</gantt-view>
55+
<gantt-view date="new DateTime(2022, 6, 1)" selected="true" type="GanttViewType.Week">
56+
<range start="new DateTime(2022, 6, 1)" end="new DateTime(2022, 7, 13)"/>
57+
</gantt-view>
58+
<gantt-view date="new DateTime(2022, 5, 18)" type="GanttViewType.Month">
59+
<range start="new DateTime(2022, 5, 18)" end="new DateTime(2022, 8, 3)"/>
60+
</gantt-view>
61+
</views>
62+
</kendo-gantt>
63+
```
64+
{% endif %}
65+
66+
## See Also
67+
68+
* [Selected Date Range (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt/selected-date-and-range)
69+
* [Using the API of the Gantt HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/gantt/api)
70+
* [Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt)

‎docs/knowledge-base/prevent-scrollbars-kendo-ui-responsive-panel.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Making Kendo UI Responsive Panel Content Overflow Visible
3+
description: Learn how to prevent scrollbars on a Kendo UI Responsive Panel when using a Kendo Menu inside it.
4+
type: how-to
5+
page_title: How to Fix Scrollbars Appearing in Kendo UI Responsive Panel with Menu
6+
slug: prevent-scrollbars-kendo-ui-responsive-panel
7+
tags: kendo ui, responsive panel, overflow, css, menu
8+
res_type: kb
9+
ticketid: 1661761
10+
---
11+
12+
## Environment
13+
14+
| Product | Version |
15+
| 2024.3.806 | --- |
16+
| Kendo UI for jQuery | Current |
17+
18+
## Description
19+
20+
I am seeing an issue with the [ResponsivePanel](https://docs.telerik.com/kendo-ui/api/javascript/ui/responsivepanel) component in Kendo UI for jQuery. There is a Kendo Menu inside the Responsive Panel, but when displaying the horizontal menu, it shows both horizontal and vertical scroll bars when hovering over a menu item. Additionally, the menu group item is not visible due to the Responsive Panel's height being limited to the initial height of the horizontal menu. This occurs because the Kendo UI framework sets the `overflow` to `auto`, which causes scrollbars to appear for the Responsive Panel.
21+
22+
This KB article also answers the following questions:
23+
- How can I prevent scrollbars from appearing in the Kendo UI Responsive Panel?
24+
- How do I make the overflow content of a Kendo UI Responsive Panel visible?
25+
- What CSS changes are needed to display Kendo Menu items properly inside a Kendo UI Responsive Panel?
26+
27+
## Solution
28+
29+
To solve the issue of scrollbars appearing and ensure the Kendo Menu items inside the Responsive Panel are fully visible, apply the following CSS change to the Responsive Panel:
30+
31+
```css
32+
#responsivepanel-id {
33+
overflow: visible;
34+
}
35+
```
36+
37+
This CSS rule overrides the default `overflow: auto` setting applied by the Kendo UI framework to the Responsive Panel, making all overflow content visible without scrollbars.
38+
39+
Below is a runnable example:
40+
41+
```dojo
42+
<style>
43+
#sidebar{
44+
overflow: visible
45+
}
46+
</style>
47+
<nav id="nav1">
48+
<button class="k-button" id="btnMenuToggle" data-role="button" role="button" aria-disabled="false" tabindex="0"><span class="km-icon km-drawer-icon"></span></button>
49+
<div id="sidebar">
50+
<ul id="mainMenu"></ul>
51+
</div>
52+
53+
</nav>
54+
<script>
55+
$(document).ready(function() {
56+
$("#sidebar")
57+
.kendoResponsivePanel({
58+
breakpoint: 769,//have this more than 768 since if its 768 then responsive panel will not display at screen width >= 768 rather than screen width > 768
59+
orientation: "left",
60+
toggleButton: "#btnMenuToggle"
61+
})
62+
.children("#mainMenu").kendoMenu({
63+
orientation: ($(window).width() > 768 ? "horizontal" : "vertical"),
64+
direction: "bottom left",
65+
dataSource: [
66+
{
67+
text: "Foo", items: [
68+
{text: "Qux ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
69+
{text: "Hi Abc! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
70+
{text: "Hi Klm! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
71+
{text: "Hi Xyz! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"}
72+
]
73+
},
74+
{text: "Bar"}
75+
]
76+
});
77+
});
78+
</script>
79+
```
80+
81+
## Notes
82+
83+
- This solution involves manually overriding the default styles of the Kendo UI Responsive Panel. Please test the changes thoroughly to ensure they do not affect your application's other responsive behaviors or layouts.
84+
85+
## See Also
86+
87+
- [Kendo UI ResponsivePanel API](https://docs.telerik.com/kendo-ui/api/javascript/ui/responsivepanel)
88+
- [Kendo UI Menu API](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu)

0 commit comments

Comments
 (0)