Skip to content

Commit f31c639

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent d1c1ae8 commit f31c639

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+1143
-19339
lines changed

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

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
---
2+
title: PDF Export
3+
page_title: PDF Export
4+
description: "Export the Telerik UI Scheduler for {{ site.framework }} to PDF."
5+
slug: pdfexport_schedulerhelper_aspnetcore
6+
position: 3
7+
---
8+
9+
# PDF Export
10+
11+
The Telerik {{ site.product_short }} Scheduler component provides a built-in PDF export functionality.
12+
13+
For a runnable example, refer to the [demo on exporting the Scheduler to PDF](https://demos.telerik.com/{{ site.platform }}/scheduler/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/schedulerbuilder#toolbarsystemaction)
21+
* [PDF export configuration](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/schedulerbuilder#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 Scheduler.
25+
26+
```HtmlHelper
27+
<!-- Load Pako Deflate library to enable PDF compression -->
28+
<script src="https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/js/pako_deflate.min.js"></script>
29+
30+
@(Html.Kendo().Scheduler<SchedulerModel>()
31+
.Name("scheduler")
32+
.Toolbar(t => t.Pdf())
33+
.Pdf(pdf => pdf
34+
.FileName("Kendo UI Scheduler Export.pdf")
35+
)
36+
.DataSource(d => d
37+
.Model(m =>
38+
{
39+
m.Id(f => f.Id);
40+
m.Field(f => f.Title).DefaultValue("No title");
41+
})
42+
.Read(read => read.Action("PDF_Export_Read", "Scheduler"))
43+
)
44+
)
45+
```
46+
{% if site.core %}
47+
```TagHelper
48+
<!-- Load Pako Deflate library to enable PDF compression -->
49+
<script src="https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/js/pako_deflate.min.js"></script>
50+
51+
<kendo-scheduler name="scheduler">
52+
<pdf file-name="Kendo UI Scheduler Export.pdf"/>
53+
<toolbar>
54+
<scheduler-toolbar-button name="pdf"></scheduler-toolbar-button>
55+
</toolbar>
56+
<scheduler-datasource type="@DataSourceTagHelperType.Ajax">
57+
<transport>
58+
<read url="@Url.Action("PDF_Export_Read", "Scheduler")" />
59+
</transport>
60+
<scheduler-model id="Id">
61+
<fields>
62+
<field name="Id" type="number"></field>
63+
<field name="title" from="Title" type="string" default-value="No title"></field>
64+
</fields>
65+
</scheduler-model>
66+
</scheduler-datasource>
67+
</kendo-scheduler>
68+
```
69+
{% endif %}
70+
71+
## Changing the Export Settings
72+
73+
By default, the paper size of the exported document is determined by the size of the Scheduler on the viewport. You have the ability to further alter the paper size and dimensions of the document as per your requirements.
74+
75+
The following example demonstrates how to additionally configure the Scheduler's `PaperSize()`, `Margin()`, and `Landscape()` PDF export settings.
76+
77+
```HtmlHelper
78+
@(Html.Kendo().Scheduler<SchedulerModel>()
79+
.Name("scheduler")
80+
.Toolbar(t => t.Pdf())
81+
.Pdf(pdf => pdf
82+
.Landscape(true)
83+
.Margin(20, 50, 20, 50)
84+
.PaperSize("auto")
85+
.FileName("Kendo UI Scheduler Export.pdf")
86+
)
87+
.DataSource(d => d
88+
.Model(m =>
89+
{
90+
m.Id(f => f.Id);
91+
m.Field(f => f.Title).DefaultValue("No title");
92+
})
93+
.Read(read => read.Action("PDF_Export_Read", "Scheduler"))
94+
)
95+
)
96+
```
97+
{% if site.core %}
98+
```TagHelper
99+
<kendo-scheduler name="scheduler">
100+
<pdf file-name="Kendo UI Scheduler Export.pdf" landscape="true" paper-size="auto">
101+
<scheduler-pdf-margin top="20" left="50" right="20" bottom="50" />
102+
</pdf>
103+
<toolbar>
104+
<scheduler-toolbar-button name="pdf"></scheduler-toolbar-button>
105+
</toolbar>
106+
<scheduler-datasource type="@DataSourceTagHelperType.Ajax">
107+
<transport>
108+
<read url="@Url.Action("PDF_Export_Read", "Scheduler")" />
109+
</transport>
110+
<scheduler-model id="Id">
111+
<fields>
112+
<field name="Id" type="number"></field>
113+
<field name="title" from="Title" type="string" default-value="No title"></field>
114+
</fields>
115+
</scheduler-model>
116+
</scheduler-datasource>
117+
</kendo-scheduler>
118+
```
119+
{% endif %}
120+
121+
## Saving Files on the Server
122+
123+
To send the generated file to a remote endpoint, use the `ProxyURL()` and `ForceProxy()` methods.
124+
125+
```HtmlHelper
126+
@(Html.Kendo().Scheduler<SchedulerModel>()
127+
.Name("scheduler")
128+
.Toolbar(t => t.Pdf())
129+
.Pdf(pdf => pdf
130+
.FileName("Kendo UI Scheduler Export.pdf")
131+
.ForceProxy(true)
132+
.ProxyURL(Url.Action("Pdf_Export_Save", "Scheduler"))
133+
)
134+
.DataSource(d => d
135+
.Model(m =>
136+
{
137+
m.Id(f => f.Id);
138+
m.Field(f => f.Title).DefaultValue("No title");
139+
})
140+
.Read(read => read.Action("PDF_Export_Read", "Scheduler"))
141+
)
142+
)
143+
```
144+
145+
{% if site.core %}
146+
```TagHelper
147+
<kendo-scheduler name="scheduler">
148+
<pdf file-name="Kendo UI Scheduler Export.pdf"
149+
force-proxy="true"
150+
proxy-url="@Url.Action("Pdf_Export_Save", "Scheduler")">
151+
</pdf>
152+
<toolbar>
153+
<scheduler-toolbar-button name="pdf"></scheduler-toolbar-button>
154+
</toolbar>
155+
<scheduler-datasource type="@DataSourceTagHelperType.Ajax">
156+
<transport>
157+
<read url="@Url.Action("PDF_Export_Read", "Scheduler")" />
158+
</transport>
159+
<scheduler-model id="Id">
160+
<fields>
161+
<field name="Id" type="number"></field>
162+
<field name="title" from="Title" type="string" default-value="No title"></field>
163+
</fields>
164+
</scheduler-model>
165+
</scheduler-datasource>
166+
</kendo-scheduler>
167+
```
168+
{% endif %}
169+
170+
```ServerProxy
171+
[HttpPost]
172+
public ActionResult Pdf_Export_Save(string contentType, string base64, string fileName)
173+
{
174+
var fileContents = Convert.FromBase64String(base64);
175+
return File(fileContents, contentType, fileName);
176+
}
177+
```
178+
179+
## Embedding Unicode Characters
180+
181+
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).
182+
183+
The following example demonstrates how to handle custom fonts.
184+
185+
```HtmlHelper
186+
@(Html.Kendo().Scheduler<SchedulerModel>()
187+
.Name("scheduler")
188+
.Toolbar(t => t.Pdf())
189+
.Pdf(pdf => pdf
190+
.FileName("Kendo UI Scheduler Export.pdf")
191+
)
192+
.DataSource(d => d
193+
.Model(m =>
194+
{
195+
m.Id(f => f.Id);
196+
m.Field(f => f.Title).DefaultValue("No title");
197+
})
198+
.Read(read => read.Action("PDF_Export_Read", "Scheduler"))
199+
)
200+
)
201+
```
202+
{% if site.core %}
203+
```TagHelper
204+
<kendo-scheduler name="scheduler">
205+
<pdf file-name="Kendo UI Scheduler Export.pdf"/>
206+
<toolbar>
207+
<scheduler-toolbar-button name="pdf"></scheduler-toolbar-button>
208+
</toolbar>
209+
<scheduler-datasource type="@DataSourceTagHelperType.Ajax">
210+
<transport>
211+
<read url="@Url.Action("PDF_Export_Read", "Scheduler")" />
212+
</transport>
213+
<scheduler-model id="Id">
214+
<fields>
215+
<field name="Id" type="number"></field>
216+
<field name="title" from="Title" type="string" default-value="No title"></field>
217+
</fields>
218+
</scheduler-model>
219+
</scheduler-datasource>
220+
</kendo-scheduler>
221+
```
222+
{% endif %}
223+
```Style
224+
<style>
225+
/*
226+
Use the DejaVu Sans font for display and embedding in the PDF file.
227+
The standard PDF fonts have no support for Unicode characters.
228+
*/
229+
.k-scheduler {
230+
font-family: "DejaVu Sans", "Arial", sans-serif;
231+
}
232+
233+
/* Hide toolbar, navigation and footer during export */
234+
.k-pdf-export .k-scheduler-toolbar,
235+
.k-pdf-export .k-scheduler-navigation .k-nav-today,
236+
.k-pdf-export .k-scheduler-navigation .k-nav-prev,
237+
.k-pdf-export .k-scheduler-navigation .k-nav-next,
238+
.k-pdf-export .k-scheduler-footer {
239+
display: none;
240+
}
241+
</style>
242+
```
243+
244+
## Further Reading
245+
246+
* [PDF output by the Kendo UI Drawing library](https://docs.telerik.com/kendo-ui/framework/drawing/pdf-output/overview)
247+
* [Drawing DOM elements with the Kendo UI Drawing library](https://docs.telerik.com/kendo-ui/framework/drawing/dom-elements/overview)
248+
* [Saving files with Kendo UI](https://docs.telerik.com/kendo-ui/framework/saving-files)
249+
250+
## See Also
251+
252+
* [Server-Side API](/api/scheduler)
253+
* [PDF Export of the Telerik UI Scheduler for {{ site.framework }} Demo](https://demos.telerik.com/{{ site.platform }}/scheduler/pdf-export)

‎docs/api/javascript/data/model.md

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -131,28 +131,51 @@ Defines a new `Model` type by using the provided options. The returned value inh
131131

132132
#### Example - define a model
133133

134+
<button id="update-name">Change Name</button>
135+
<button id="update-age">Change Age</button>
136+
134137
<script>
135-
var Person = kendo.data.Model.define({
138+
var Person = kendo.data.Model.define({
136139
id: "personId", // the identifier of the model
137140
fields: {
138-
"name": {
139-
type: "string"
140-
},
141-
"age": {
142-
type: "number"
143-
}
141+
"personId": {
142+
defaultValue: 0,
143+
type: "number"
144+
},
145+
"name": {
146+
type: "string"
147+
},
148+
"age": {
149+
parse: (value) => kendo.parseInt(value), // Parse the value manually.
150+
nullable: true, // Age can be null
151+
editable: false, // Age cannot be edited.
152+
}
144153
}
145-
});
154+
});
146155

147-
var person = new Person({
156+
var person = new Person({
148157
name: "John Doe",
149158
age: 42
150-
});
151-
152-
/* The result can be observed in the DevTools(F12) console of the browser. */
153-
console.log(person.get("name")); // outputs "John Doe"
154-
/* The result can be observed in the DevTools(F12) console of the browser. */
155-
console.log(person.get("age")); // outputs 42
159+
});
160+
161+
var person2 = new Person({
162+
name: "James Doe",
163+
age: null
164+
});
165+
166+
$(document.body).append(`<div><h3>Person 1</h3><p>Name - ${person.get("name")}, Type - ${typeof(person.get("name"))}</p><p>Age - ${person.get("age")}, Type - ${typeof(person.get("age"))}</p></div>`);
167+
$(document.body).append(`<div><h3>Person 2</h3><p>Name - ${person2.get("name")}, Type - ${typeof(person2.get("name"))}</p><p>Age - ${person2.get("age")}, Type - ${typeof(person2.get("age"))}</p></div>`);
168+
169+
$("#update-name").on("click", (e) => {
170+
person.set("name", "Test Name");
171+
$(document.body).append(`<div><h3>Updated Person 1</h3><p>Name - ${person.get("name")}, Type - ${typeof(person.get("name"))}</p><p>Age - ${person.get("age")}, Type - ${typeof(person.get("age"))}</p></div>`);
172+
});
173+
174+
// The age will not be updated through the `set` method because the field is not editable.
175+
$("#update-age").on("click", (e) => {
176+
person.set("age", 1645);
177+
$(document.body).append(`<div><h3>Updated Person 1</h3><p>Name - ${person.get("name")}, Type - ${typeof(person.get("name"))}</p><p>Age - ${person.get("age")}, Type - ${typeof(person.get("age"))}</p></div>`);
178+
});
156179
</script>
157180

158181
#### Parameters

0 commit comments

Comments
 (0)