Skip to content

Commit 1ba183e

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent efe9ec0 commit 1ba183e

File tree

3 files changed

+82
-30
lines changed

3 files changed

+82
-30
lines changed

‎build/package-core.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"url": "https://github.com/telerik/kendo-ui-core.git"
88
},
99
"dependencies": {
10-
"jquery": "3.4.1"
10+
"jquery": "3.5.1"
1111
},
1212
"main": "js/kendo.ui.core.js"
1313
}

‎docs-aspnet/html-helpers/layout/form/items.md‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ position: 2
88

99
# Items
1010

11-
The `Items` configuration options allows you to customize the appearance and behavior of the Form. The `Items` configuration maps the model fields and through it you can:
11+
The `Items` configuration options allows you to customize the appearance and behavior of the Form. The `Items` configuration maps the model fields and through it you can:
1212

1313
* customize the editors
1414
* customize the labels and hints of the editors
@@ -39,7 +39,7 @@ The following example shows how to set the `Label` of an item. Enabling the `Opt
3939

4040
## Configure Hint
4141

42-
The following example shows how to set the `Hint` of an item. The hint is displayed below the editor of the field.
42+
The following example shows how to set the `Hint` of an item. The hint is displayed below the editor of the field.
4343

4444
```Razor
4545
@(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
@@ -63,7 +63,7 @@ The following example shows how to set the `Hint` of an item. The hint is displa
6363

6464
## Configure Editor
6565

66-
With the `Editor` option you can explicitly configure an editor to be used for a specific field. See the [editor](https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemseditor) configuration option in the client-side API documentation, for a list of the supported editors.
66+
With the `Editor` option you can explicitly configure an editor to be used for a specific field. See the [editor](https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemseditor) configuration option in the client-side API documentation, for a list of the supported editors.
6767

6868
```Razor
6969
@(Html.Kendo().Form<MyApplication.Models.FormItemsViewModels>()
@@ -137,6 +137,31 @@ With the `Editor` option you can explicitly configure an editor to be used for a
137137
)
138138
```
139139

140+
## Custom Editor
141+
142+
You can implement custom editor by using the editor option as a function as follows:
143+
144+
```Razor
145+
@(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
146+
.Name("formExample")
147+
.HtmlAttributes(new { action = "Index", method = "POST" })
148+
.Items(items =>
149+
{
150+
items.Add()
151+
.Field(f => f.Description)
152+
.Label(l => l.Text("Description:"))
153+
.EditorTemplateHandler("customTextareaEditor");
154+
})
155+
)
156+
157+
<script>
158+
function customTextareaEditor(container, options) {
159+
$('<textarea class="k-textarea" data-bind="value: ' + options.field + '" name="' + options.field + '"/>')
160+
.appendTo(container);
161+
}
162+
</script>
163+
```
164+
140165
## See Also
141166

142167
* [Items Demo of the Form HtmlHelper for {{ site.framework }}](https://demos.telerik.com/{{ site.platform }}/form/items)

‎docs/controls/layout/form/items.md‎

Lines changed: 53 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ position: 2
88

99
# Items
1010

11-
The `items` configuration options allows you to customize the appearance and behavior of the Form. If it is not set, the Form will render default editors based on the data provided in its `formData` configuration.
11+
The `items` configuration options allows you to customize the appearance and behavior of the Form. If it is not set, the Form will render default editors based on the data provided in its `formData` configuration.
1212

1313
The following example shows the Form initialized with the `items` option not set.
1414

1515
```dojo
1616
<form id="form"></form>
17-
17+
1818
<script>
1919
$(document).ready(function () {
2020
$("#form").kendoForm({
@@ -30,7 +30,7 @@ The following example shows the Form initialized with the `items` option not set
3030
</script>
3131
```
3232

33-
Setting the `items` configuration maps the model fields and allows you to:
33+
Setting the `items` configuration maps the model fields and allows you to:
3434

3535
* customize the editors
3636
* customize the labels and hints of the editors
@@ -53,15 +53,15 @@ The following example shows how to set the `label` of an item. Enabling the `opt
5353
Birth: new Date()
5454
},
5555
items: [
56-
{
57-
field: "FirstName",
58-
label: "First Name:",
59-
validation: { required: true }
56+
{
57+
field: "FirstName",
58+
label: "First Name:",
59+
validation: { required: true }
6060
},
61-
{
62-
field: "LastName",
63-
label: "Last Name:",
64-
validation: { required: true }
61+
{
62+
field: "LastName",
63+
label: "Last Name:",
64+
validation: { required: true }
6565
},
6666
{
6767
field: "Birth",
@@ -75,7 +75,7 @@ The following example shows how to set the `label` of an item. Enabling the `opt
7575

7676
## Configure Hint
7777

78-
The following example shows how to set the `hint` of an item. The hint is displayed below the editor of the field.
78+
The following example shows how to set the `hint` of an item. The hint is displayed below the editor of the field.
7979

8080
```dojo
8181
<form id="form"></form>
@@ -90,21 +90,21 @@ The following example shows how to set the `hint` of an item. The hint is displa
9090
Birth: new Date()
9191
},
9292
items: [
93-
{
94-
field: "FirstName",
95-
label: "First Name:",
96-
validation: { required: true }
93+
{
94+
field: "FirstName",
95+
label: "First Name:",
96+
validation: { required: true }
9797
},
98-
{
99-
field: "LastName",
100-
label: "Last Name:",
101-
validation: { required: true }
98+
{
99+
field: "LastName",
100+
label: "Last Name:",
101+
validation: { required: true }
102102
},
103-
{
104-
field: "Password",
105-
label: "Password:",
106-
validation: { required: true },
107-
hint: "Hint: enter alphanumeric characters only."
103+
{
104+
field: "Password",
105+
label: "Password:",
106+
validation: { required: true },
107+
hint: "Hint: enter alphanumeric characters only."
108108
}
109109
]
110110
});
@@ -114,7 +114,7 @@ The following example shows how to set the `hint` of an item. The hint is displa
114114

115115
## Configure Editor
116116

117-
With the `editor` option you can explicitly configure an editor to be used for a specific field. See the [editor](https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemseditor) configuration option in the client-side API documentation, for a list of the supported editors.
117+
With the `editor` option you can explicitly configure an editor to be used for a specific field. See the [editor](https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemseditor) configuration option in the client-side API documentation, for a list of the supported editors.
118118

119119
```dojo
120120
<form id="form"></form>
@@ -188,6 +188,33 @@ With the `editor` option you can explicitly configure an editor to be used for a
188188
</script>
189189
```
190190

191+
## Custom Editor
192+
193+
You can implement custom editor by using the editor option as a function as follows:
194+
195+
```dojo
196+
<form id="form"></form>
197+
198+
<script>
199+
$(document).ready(function () {
200+
$("#form").kendoForm({
201+
formData: {
202+
Description: "",
203+
},
204+
items: [{
205+
field: "Description",
206+
label: "Description:",
207+
editor: function(container, options) {
208+
$("<textarea class='k-textarea' name='" + options.field + "' required data-bind='value: " + options.field + "'></textarea>")
209+
.appendTo(container);
210+
},
211+
validation: { required: true }
212+
}],
213+
});
214+
});
215+
</script>
216+
```
217+
191218
## See Also
192219

193220
* [Items configuration of the Form (Demo)](https://demos.telerik.com/kendo-ui/form/items)

0 commit comments

Comments
 (0)