Skip to content

Commit 12d2671

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 8a70c71 commit 12d2671

34 files changed

+1151
-578
lines changed

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,31 @@ The model whose level must be calculated.
127127
#### Returns
128128

129129
`Number` the hierarchy level of the node.
130+
131+
#### Example - get the level of an item in the TreeListDataSource
132+
<script>
133+
var dataSource = new kendo.data.TreeListDataSource({
134+
transport: {
135+
read: {
136+
url: "https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All",
137+
dataType: "jsonp"
138+
}
139+
},
140+
schema: {
141+
model: {
142+
id: "EmployeeID",
143+
parentId: "ReportsTo",
144+
fields: {
145+
ReportsTo: { field: "ReportsTo", nullable: true },
146+
EmployeeID: { field: "EmployeeId", type: "number" }
147+
},
148+
expanded: true
149+
}
150+
},
151+
change: function(e){
152+
var item = dataSource.get(9);
153+
console.log("Employee with name " + item.FirstName + "is at level: " + dataSource.level(item));
154+
}
155+
});
156+
dataSource.read();
157+
</script>

‎docs/api/javascript/dataviz/ui/chart.md‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2523,7 +2523,7 @@ The configuration of the axis lines. Also affects the major and minor ticks, but
25232523
width: 3
25242524
},
25252525
categories: ["2011", "2012", "2013"]
2526-
}],
2526+
},
25272527
series: [{
25282528
data: [1, 2, 3]
25292529
}]
@@ -33892,7 +33892,34 @@ Defines whether the widget should proceed with resizing even if the element dime
3389233892
### saveAsPDF
3389333893
Saves the Chart as a PDF file using the options specified in [options.pdf](/api/javascript/dataviz/ui/chart#configuration-pdf).
3389433894

33895-
> Calling this method could trigger the browser built-in popup blocker in some cases. To avoid that always call it as a response to end-user action e.g. button click.
33895+
> Calling this method could trigger the browser built-in popup blocker in some cases. To avoid that always call it as a response to end-user action e.g. button click.
33896+
33897+
#### Example - export the Chart to PDF
33898+
<!-- Load Pako ZLIB library to enable PDF compression -->
33899+
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/pako_deflate.min.js"></script>
33900+
<button id="exportBtn">Export to PDF</button>
33901+
<div id="chart" style="width: 600px; height: 400px;"></div>
33902+
<script>
33903+
$("#chart").kendoChart({
33904+
pdf: {
33905+
paperSize: "A4",
33906+
landscape: true,
33907+
margin: "2cm"
33908+
},
33909+
legend: {
33910+
position: "bottom"
33911+
},
33912+
series: [
33913+
{ name: "Series 1", data: [1, 2, 3] },
33914+
{ name: "Series 2", data: [3, 4, 5] }
33915+
]
33916+
});
33917+
33918+
$("#exportBtn").on("click", function(){
33919+
var chart = $("#chart").getKendoChart();
33920+
chart.saveAsPDF();
33921+
});
33922+
</script>
3389633923

3389733924
### setDataSource
3389833925

‎docs/api/javascript/dataviz/ui/diagram.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8035,6 +8035,43 @@ The removed items (shapes or connections).
80358035

80368036
The widget instance which fired the event.
80378037

8038+
#### Example - get added and removed items
8039+
8040+
<div id="diagram"></div>
8041+
<script>
8042+
function onChange(e){
8043+
console.log("Added items: " + e.added.length + "; Removed items: " + e.removed.length);
8044+
}
8045+
8046+
$("#diagram").kendoDiagram({
8047+
shapes:[
8048+
{
8049+
id:"1",
8050+
content:{
8051+
text: "State 1"
8052+
},
8053+
x: 20,
8054+
y: 20
8055+
},
8056+
{
8057+
id:"2",
8058+
content: {
8059+
text: "State 2"
8060+
},
8061+
x: 160,
8062+
y: 20
8063+
}
8064+
],
8065+
connections:[
8066+
{
8067+
from: "1",
8068+
to: "2"
8069+
}
8070+
],
8071+
change: onChange
8072+
});
8073+
</script>
8074+
80388075
### click
80398076

80408077
Fired when the user clicks on a shape or a connection.
@@ -8356,6 +8393,46 @@ The rest of the items (shapes and connections).
83568393

83578394
The widget instance which fired the event.
83588395

8396+
#### Example - get shape info from selection
8397+
8398+
<div id="diagram"></div>
8399+
<script>
8400+
function onSelect(e){
8401+
var selectedItem = e.selected[0]; // first element in selection
8402+
if(selectedItem instanceof kendo.dataviz.diagram.Shape){
8403+
console.log("Selected shape with text: " + selectedItem.options.content.text);
8404+
}
8405+
}
8406+
8407+
$("#diagram").kendoDiagram({
8408+
shapes:[
8409+
{
8410+
id:"1",
8411+
content:{
8412+
text: "State 1"
8413+
},
8414+
x: 20,
8415+
y: 20
8416+
},
8417+
{
8418+
id:"2",
8419+
content: {
8420+
text: "State 2"
8421+
},
8422+
x: 160,
8423+
y: 20
8424+
}
8425+
],
8426+
connections:[
8427+
{
8428+
from: "1",
8429+
to: "2"
8430+
}
8431+
],
8432+
select: onSelect
8433+
});
8434+
</script>
8435+
83598436
### toolBarClick
83608437

83618438
Fired when the user clicks an item in the toolbar.

‎docs/api/javascript/drawing/path.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,35 @@ Represents a path consisting of linear or cubic Bézier curve segments.
2828
### options `Object`
2929
The configuration options.
3030

31+
#### Example - create and draw a path
32+
33+
<div id="surface" style="width: 250px; height: 165px;"></div>
34+
<script>
35+
var draw = kendo.drawing;
36+
37+
// Initialize a path using an options object
38+
var path = new draw.Path({
39+
stroke: {
40+
color: "#9999b6",
41+
width: 2
42+
},
43+
fill: {
44+
color: "#33ccff"
45+
},
46+
opacity: 0.5,
47+
cursor: "pointer"
48+
});
49+
50+
// Describe the path
51+
path.moveTo(0, 0)
52+
.lineTo(150, 0).lineTo(150, 65).lineTo(0, 65)
53+
.close();
54+
55+
// Draw the path on a drawing surface
56+
var surface = draw.Surface.create($("#surface"));
57+
surface.draw(path);
58+
</script>
59+
3160
## Class Methods
3261

3362
### fromArc

‎docs/api/javascript/drawing/rect.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,49 @@ Draws a rectangle with set geometry, fill and stroke.
2727
### geometry `kendo.geometry.Rect`
2828
The geometric object that defines the rectangle origin and size.
2929

30+
#### Example - creating a rect
31+
32+
<div id="surface"></div>
33+
<script>
34+
// Import the Drawing API namespaces
35+
var geom = kendo.geometry;
36+
var draw = kendo.drawing;
37+
38+
var rectGeom = new geom.Rect([5, 5], [200, 100]);
39+
40+
var rectangle = new draw.Rect(rectGeom, {
41+
fill: {
42+
color: "#33ccff"
43+
}
44+
});
45+
46+
var surface = draw.Surface.create($("#surface"));
47+
surface.draw(rectangle);
48+
</script>
49+
3050
### options `Object`
3151
The configuration options.
3252

53+
#### Example - creating a rect
54+
55+
<div id="surface"></div>
56+
<script>
57+
// Import the Drawing API namespaces
58+
var geom = kendo.geometry;
59+
var draw = kendo.drawing;
60+
61+
var rectGeom = new geom.Rect([5, 5], [200, 100]);
62+
63+
var rectangle = new draw.Rect(rectGeom, {
64+
fill: {
65+
color: "#33ccff"
66+
}
67+
});
68+
69+
var surface = draw.Surface.create($("#surface"));
70+
surface.draw(rectangle);
71+
</script>
72+
3373
## Configuration
3474

3575
### clip `kendo.drawing.Path`

‎docs/api/javascript/ui/grid.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7989,6 +7989,25 @@ The [Pager widget](/api/javascript/ui/pager) attached to the Grid.
79897989

79907990
The jQuery object which represents the grid table element.
79917991

7992+
#### Example - get the Grid alternating rows
7993+
7994+
<div id="grid"></div>
7995+
<script>
7996+
$("#grid").kendoGrid({
7997+
columns: [
7998+
{ field: "name" },
7999+
{ field: "age" }
8000+
],
8001+
dataSource: [
8002+
{ name: "Jane Doe", age: 30},
8003+
{ name: "John Doe", age: 33},
8004+
]
8005+
});
8006+
var grid = $("#grid").data("kendoGrid");
8007+
var altRows = grid.table.find("tr.k-alt");
8008+
altRows.css("background", "#afeeee");
8009+
</script>
8010+
79928011
### tbody `jQuery`
79938012

79948013
The jQuery object which represents the table body. Contains all grid table rows.
@@ -8736,6 +8755,31 @@ Obtains an Array of the DOM elements, which correspond to the data items from th
87368755

87378756
`Array` The currently rendered data table rows (`<tr>` elements).
87388757

8758+
#### Example - use items method to access all Grid rows
8759+
8760+
<button id="selectAll">Select All Rows</button>
8761+
<div id="grid"></div>
8762+
<script>
8763+
$("#grid").kendoGrid({
8764+
columns: [
8765+
{ field: "name" },
8766+
{ field: "age" }
8767+
],
8768+
dataSource: [
8769+
{ name: "Jane Doe", age: 30 },
8770+
{ name: "John Doe", age: 33 }
8771+
],
8772+
selectable: "multiple, row"
8773+
});
8774+
8775+
$("#selectAll").on("click", function(){
8776+
var grid = $("#grid").data("kendoGrid");
8777+
var allRows = grid.items();
8778+
8779+
grid.select(allRows);
8780+
});
8781+
</script>
8782+
87398783
### lockColumn
87408784

87418785
Locks (freezes) a column, allowing users to see it at all times when scrolling.

‎docs/framework/globalization/overview.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ The default culture, which Kendo UI widgets uses is "en-US".
4949

5050
> The culture must be set before any Kendo UI widgets that rely on it, are initialized.
5151
52+
> If you include the generic culture file, you can omit the country/region code. For example, `kendo.culture.en.min.js` can be used with `kendo.culture("en");`) instead of `kendo.culture.en-GB.min.js` with `kendo.culture("en-GB");`. The generic files do not carry country/region specifics, however, and can only serve as a more generic representation.
53+
5254
## Configuration
5355

5456
### Format Number or Date Objects

‎docs/knowledge-base/grid-custom-filter-with-foreignkey-column.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ component: grid
2020

2121
## Description
2222

23-
How can I use a custom filter over a `foreignKey` column in the Grid?
23+
How can I use a custom filter over a foreign key column in the Grid?
2424

2525
## Solution
2626

@@ -29,7 +29,7 @@ By default, the Grid internally matches the `values` collection in the column wi
2929
Apply custom filtering and manually handle the matching and the creation of the unique values collection.
3030

3131
```dojo
32-
<script src="../content/shared/js/products.js" type="text/javascript"></script>
32+
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js" type="text/javascript"></script>
3333
<div id="example">
3434
<div id="grid"></div>
3535

‎docs/styles-and-layout/using-kendo-in-responsive-web-pages.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ The example below demonstrates how to auto-resize a chart with a 100% width.
9292

9393
Each Kendo UI widget has a `resize()` method which can be used to trigger a layout readjustment instead of using [`kendo.resize`](/api/javascript/kendo/methods/resize). The `resize` method of the widget accepts a single Boolean parameter, which defines whether the control should execute its layout adjustment algorithm even if the widget dimensions have not changed (`"force"` mode).
9494

95-
### Apply `resize()` Method
95+
### Apply resize() Method
9696

9797
The example below demonstrates how to use the `resize()` method.
9898

@@ -137,7 +137,10 @@ Responsive UI enhancements utilize media queries and include built-in UI enhance
137137

138138
### Responsive UI Features in Kendo UI Widgets
139139

140-
* **Kendo UI Grid** Integrates a responsive pager, which automatically adjusts to different screen widths and provides the ability to define which columns to be hidden on small view ports. This makes them more flexible for mobile web usage.
140+
* **Kendo UI Grid** Provides the ability to define which columns to be hidden on small view ports.
141+
* **Kendo UI Pager**
142+
- [Less-Based Themes]({% slug themesandappearnce_kendoui_desktopwidgets %}) - utilize media queries to automatically adjusts to different screen widths.
143+
- [Sass-Based Themes]({% slug sassbasedthemes_kendoui %}) - utilize classes that are assigned based on the current width of the Pager. The classes are changed automatically when the `window` resizes or when the Pager is placed in a Layout Kendo UI widget. In all other cases, manually [apply `resize()` method](#apply-resize-method).
141144
* **Kendo UI Scheduler** Provides a mechanism to overflow its `view` selection options into a dropdown on small screen estates. Additionally, it can apply short date/month/year abbreviations where applicable. Thus, its visual presentation is fine-tuned for usage in responsive web scenarios.
142145
* **Kendo UI Responsive Panel** This is a responsive container component. Its sole purpose is providing the necessary plumbing for hiding content on small screens when the specified width boundary is passed, and showing this content when its hamburger icon button is clicked.
143146

0 commit comments

Comments
 (0)