Skip to content

Commit 7080d0e

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 1560d22 commit 7080d0e

32 files changed

+1064
-125
lines changed

‎docs-aspnet/html-helpers/data-management/treelist/ajax-binding.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,19 @@ To configure the TreeList for {{ site.framework }} to do Ajax binding:
5858
}
5959

6060
1. Return the `TreeDataSourceResult` as JSON. Configure the Telerik UI TreeList for Ajax binding.
61+
{% if site.core %}
62+
public JsonResult Index([DataSourceRequest] DataSourceRequest request, int? id)
63+
{
64+
var result = ((EmployeeDirectoryService) employeeDirectory).GetAllRemote().ToTreeDataSourceResult(request,
65+
e => e.EmployeeId,
66+
e => e.ReportsTo,
67+
e => id.HasValue ? e.ReportsTo == parentId : e.ReportsTo == null,
68+
e => e
69+
);
6170

71+
return Json(result);
72+
}
73+
{% else %}
6274
public JsonResult Index([DataSourceRequest] DataSourceRequest request, int? id)
6375
{
6476
var result = ((EmployeeDirectoryService) employeeDirectory).GetAllRemote().ToTreeDataSourceResult(request,
@@ -70,6 +82,7 @@ To configure the TreeList for {{ site.framework }} to do Ajax binding:
7082

7183
return Json(result, JsonRequestBehavior.AllowGet);
7284
}
85+
{% endif %}
7386

7487
1. In the view, configure the TreeList to use the action method created in the previous steps.
7588

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1106,7 +1106,7 @@ Specifies the [value binding](/framework/mvvm/bindings/value) behavior for the w
11061106
});
11071107

11081108
kendo.bind($("#example"), viewModel);
1109-
1109+
</script>
11101110

11111111
### virtual `Boolean|Object`*(default: false)*
11121112

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

Lines changed: 107 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8656,12 +8656,11 @@ If set to `true` the user could reorder the rows by dragging them. By default re
86568656
});
86578657
</script>
86588658

8659-
### resizable `Boolean` *(default:false)*
8659+
### resizable `Boolean|Object` *(default:false)*
86608660

8661-
If set to `true`, users can resize columns by dragging the edges (resize handles) of their header cells. As of Kendo UI Q1 2015, users can also auto-fit a column by double-clicking
8662-
its resize handle. In this case the column will assume the smallest possible width, which allows the column content to fit without wrapping.
8661+
If object is used, it allows configuration of `resizable.columns` and `resizable.rows`. If set to `true`, only column resizing will be enabled.
86638662

8664-
By default, column resizing is disabled.
8663+
By default, column and row resizing is disabled.
86658664

86668665
#### Example - enable column resizing
86678666

@@ -8683,6 +8682,61 @@ By default, column resizing is disabled.
86838682
> Check [Column resizing](https://demos.telerik.com/kendo-ui/grid/column-resizing) for a live demo and
86848683
the [Column widths](/web/grid/appearance#column-widths) help section for additional relevant information.
86858684

8685+
#### resizable.columns `Boolean`
8686+
8687+
If set to `true`, users can resize columns by dragging the edges (resize handles) of their header cells. As of Kendo UI Q1 2015, users can also auto-fit a column by double-clicking its resize handle. In this case the column will assume the smallest possible width, which allows the column content to fit without wrapping.
8688+
8689+
By default, column resizing is disabled.
8690+
8691+
#### Example - enable column resizing
8692+
8693+
<div id="grid"></div>
8694+
<script>
8695+
$("#grid").kendoGrid({
8696+
columns: [
8697+
{ field: "name" },
8698+
{ field: "age" }
8699+
],
8700+
dataSource: [
8701+
{ name: "Jane Doe", age: 30 },
8702+
{ name: "John Doe", age: 33 }
8703+
],
8704+
resizable: {
8705+
columns: true
8706+
}
8707+
});
8708+
</script>
8709+
8710+
> Check [Column resizing](https://demos.telerik.com/kendo-ui/grid/column-resizing) for a live demo and
8711+
the [Column widths](/web/grid/appearance#column-widths) help section for additional relevant information.
8712+
8713+
#### resizable.rows `Boolean`
8714+
8715+
If set to `true`, users can resize Grid rows by dragging their bottom edge. Users can also auto-fit a row by double-clicking its bottom edge. In this case the row will assume the smallest possible height, which allows the cells content to be fully displayed.
8716+
8717+
In scenario where row selection is enabled, users are allowed to resize all selected rows at once by performing the resize interaction on one of them.
8718+
8719+
By default, row resizing is disabled.
8720+
8721+
#### Example - enable column resizing
8722+
8723+
<div id="grid"></div>
8724+
<script>
8725+
$("#grid").kendoGrid({
8726+
columns: [
8727+
{ field: "name" },
8728+
{ field: "age" }
8729+
],
8730+
dataSource: [
8731+
{ name: "Jane Doe", age: 30 },
8732+
{ name: "John Doe", age: 33 }
8733+
],
8734+
resizable: {
8735+
rows: true
8736+
}
8737+
});
8738+
</script>
8739+
86868740
### rowTemplate `String|Function`
86878741

86888742
The [template](/api/javascript/kendo/methods/template) which renders rows. Be default renders a table row (`<tr>`) for every data source item.
@@ -14100,6 +14154,55 @@ If invoked prevents the rowReorder action - prevents the client-side reordering.
1410014154
});
1410114155
</script>
1410214156

14157+
### rowResize
14158+
14159+
Fired when the user resizes a row (rows).
14160+
14161+
The event handler function context (available via the `this` keyword) will be set to the widget instance.
14162+
14163+
#### Event Data
14164+
14165+
##### e.row `jQuery`
14166+
14167+
A jQuery object holding a reference to the resized row element.
14168+
14169+
##### e.rows `jQuery`
14170+
14171+
A jQuery object holding a reference to all row elements that would be affected by the resizing. In scenario where row selection is enabled, users are allowed to resize all selected rows at once by performing the resize on one of them.
14172+
14173+
##### e.newHeight `Number`
14174+
14175+
The new row height.
14176+
14177+
##### e.oldHeight `Number`
14178+
14179+
The previous row height.
14180+
14181+
##### e.sender `kendo.ui.Grid`
14182+
14183+
The widget instance which fired the event.
14184+
14185+
#### Example
14186+
14187+
<div id="grid"></div>
14188+
<script>
14189+
$("#grid").kendoGrid({
14190+
columns: [
14191+
{ field: "name" },
14192+
{ field: "age" }
14193+
],
14194+
dataSource: [
14195+
{ name: "Jane Doe", age: 30 },
14196+
{ name: "John Doe", age: 33 }
14197+
],
14198+
resizable: { rows: true },
14199+
rowResize: function(e) {
14200+
/* The result can be observed in the DevTools(F12) console of the browser. */
14201+
console.log(e.row, e.newHeight, e.oldHeight);
14202+
}
14203+
});
14204+
</script>
14205+
1410314206
### save
1410414207

1410514208
Fired when a data item is saved.

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -343,29 +343,37 @@ The current value of the **ProgressBar**.
343343

344344
#### Example - subscribe to the "change" event during initialization
345345

346-
<div id="progressbar"></div>
347-
<script>
348-
$("#progressbar").kendoProgressBar({
349-
change: function(e) {
350-
/* The result can be observed in the DevTools(F12) console of the browser. */
351-
console.log("Value is " + e.value);
352-
}
353-
});
354-
</script>
346+
<button id="set">Set Value to 50</button>
347+
<div id="progressbar"></div>
348+
<script>
349+
$("#progressbar").kendoProgressBar({
350+
change: function(e) {
351+
kendo.alert("Value is " + e.value);
352+
}
353+
});
354+
355+
$("#set").on("click", () => {
356+
$("#progressbar").data("kendoProgressBar").value(50);
357+
});
358+
</script>
355359

356360
#### Example - subscribe to the "change" event after initialization
357361

362+
<button id="set">Set Value to 50</button>
358363
<div id="progressbar"></div>
359364
<script>
360365
function onChange(e) {
361-
/* The result can be observed in the DevTools(F12) console of the browser. */
362-
console.log("Value is " + e.value);
366+
kendo.alert("Value is " + e.value);
363367
}
364368

365369
$("#progressbar").kendoProgressBar();
366370

367371
var progressbar = $("#progressbar").data("kendoProgressBar");
368372
progressbar.bind("change", onChange);
373+
374+
$("#set").on("click", () => {
375+
$("#progressbar").data("kendoProgressBar").value(50);
376+
});
369377
</script>
370378

371379
### complete

‎docs/controls/checkbox/appearance.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ page_title: jQuery CheckBox Documentation - CheckBox Appearance
44
description: "Get started with the jQuery CheckBox by Kendo UI and learn how to customize the appearance of the widget."
55
previous_url: /styles-and-layout/checkbox-radiobutton
66
slug: appearance_checkbox_widget
7-
position: 3
7+
position: 4
88
---
99

1010
# CheckBox Appearance

‎docs/controls/checkbox/checkbox-overview.png‎

16.4 KB
Loading

‎docs/controls/checkbox/getting-started.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
title: Getting Started
3+
page_title: jQuery CheckBox Documentation - Getting Started with the CheckBox
4+
description: "Get started with the jQuery CheckBox by Kendo UI and learn how to create, initialize, and enable the component."
5+
slug: getting_started_kendoui_checkbox_widget
6+
position: 2
7+
---
8+
9+
# Getting Started with the CheckBox
10+
11+
This guide demonstrates how to get up and running with the Kendo UI for jQuery CheckBox.
12+
13+
After the completion of this guide, you will be able to achieve the following end result:
14+
15+
```dojo
16+
<input id="checkbox" />
17+
18+
<script>
19+
20+
$("#checkbox").kendoCheckBox({
21+
label: "Checkbox",
22+
rounded:"large",
23+
size:"large",
24+
checked: true
25+
});
26+
</script>
27+
```
28+
29+
## 1. Create an Empty input Element
30+
31+
First, create an `<input/>` element on the page that will serve as the initialization element of the CheckBox component.
32+
33+
```html
34+
<input id='checkbox'/>
35+
```
36+
37+
## 2. Initialize the CheckBox
38+
39+
In this step, you will initialize the CheckBox from the `<input>` element. All settings of the CheckBox will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
40+
41+
```html
42+
<input id="checkbox"/>
43+
44+
<script>
45+
// Target the input element by using jQuery and then call the kendoCheckBox() method.
46+
$("#checkbox").kendoCheckBox();
47+
</script>
48+
```
49+
50+
## 3. Define the CheckBox Appearance
51+
52+
Once the basic initialization is completed, you can start adding additional configurations to the CheckBox. The component allows you to specify various styling options.
53+
54+
```html
55+
<input id="checkbox"/>
56+
57+
<script>
58+
59+
// Target the input element by using jQuery and then call the kendoCheckBox() method.
60+
$("#checkbox").kendoCheckBox({
61+
size:"large",
62+
rounded:"large"
63+
});
64+
</script>
65+
```
66+
67+
## 4. Configure the CheckBox Label
68+
69+
The CheckBox allows you to configure the text of the label rendered next to the box through the [label](/api/javascript/ui/checkbox/configuration/label).
70+
71+
```html
72+
<input id="checkbox"/>
73+
74+
<script>
75+
76+
// Target the input element by using jQuery and then call the kendoCheckBox() method.
77+
$("#checkbox").kendoCheckBox({
78+
label:"Checkbox"
79+
size:"large",
80+
rounded:"large"
81+
});
82+
</script>
83+
```
84+
85+
## 5. Define the Checked State
86+
87+
You can specify whether the CheckBox will be checked by default or not.
88+
89+
```html
90+
<input id="checkbox"/>
91+
92+
<script>
93+
94+
// Target the input element by using jQuery and then call the kendoCheckBox() method.
95+
$("#checkbox").kendoCheckBox({
96+
label: "Checkbox"
97+
size: "large",
98+
rounded: "large"
99+
checked: true
100+
});
101+
</script>
102+
```
103+
104+
## Next Steps
105+
106+
* [Referencing Existing Component Instances]({% slug widget_methodsand_events_kendoui_installation %})
107+
* [Demo Page for the CheckBox](https://demos.telerik.com/kendo-ui/checkbox/index)
108+
109+
## See Also
110+
111+
* [JavaScript API Reference of the CheckBox](/api/javascript/ui/checkbox)
112+
* [Knowledge Base Section](/knowledge-base)
113+
114+
<script>
115+
window.onload = function() {
116+
document.getElementsByClassName("btn-run")[0].click();
117+
}
118+
</script>

‎docs/controls/checkbox/label.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Label
33
page_title: jQuery CheckBox Documentation - Label
44
description: "Get started with the jQuery CheckBox by Kendo UI and learn how to configure the label of the widget."
55
slug: label_checkbox_widget
6-
position: 2
6+
position: 3
77
---
88

99
# Label

‎docs/controls/checkbox/overview.md‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,20 @@ position: 1
1010

1111
The CheckBox allows you to provide checkbox functionality to `<input />` elements, style them, set an encoded or decoded label, and disable the CheckBox.
1212

13-
* [Demo page for the CheckBox](https://demos.telerik.com/kendo-ui/checkbox/index)
14-
15-
## Initializing the CheckBox
16-
17-
To initialize the CheckBox, use the `<input />` element.
18-
19-
The following example demonstrates how to initialize the CheckBox from an existing `<input />` element.
20-
21-
```dojo
22-
<input id="checkbox" />
23-
24-
<script>
25-
$("#checkbox").kendoCheckBox();
26-
</script>
27-
```
13+
![Kendo UI for jQuery CheckBox Overview](checkbox-overview.png)
2814

2915
## Functionality and Features
3016

3117
* [Appearance]({% slug appearance_checkbox_widget %})
3218
* [Label]({% slug label_checkbox_widget %})
3319

34-
>tip To learn more about the appearance, anatomy, and accessibility of the CheckBox, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/checkbox/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
20+
## Next Steps
21+
22+
* [Getting Started with the Kendo UI CheckBox for jQuery]({% slug getting_started_kendoui_checkbox_widget %})
23+
* [Overview of the CheckBox (Demo)](https://demos.telerik.com/kendo-ui/checkbox/index)
24+
* [JavaScript API Reference of the CheckBox](/api/javascript/ui/checkbox)
3525

3626
## See Also
3727

38-
* [Basic Usage of the CheckBox (Demo)](https://demos.telerik.com/kendo-ui/checkbox/index)
28+
* [Overview of the CheckBox (Demo)](https://demos.telerik.com/kendo-ui/checkbox/index)
3929
* [JavaScript API Reference of the CheckBox](/api/javascript/ui/checkbox)

0 commit comments

Comments
 (0)