Skip to content

Commit 0df12ac

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 3b60408 commit 0df12ac

File tree

17 files changed

+1549
-349
lines changed

17 files changed

+1549
-349
lines changed

‎docs-aspnet/html-helpers/editors/multiselect/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ The following example demonstrates the basic configuration of the MultiSelect. T
164164

165165
## Functionality and Features
166166

167-
* [Binding]({% slug htmlhelpers_multiselect_databinding_aspnetcore %})—The MultiSelect support remote and local binding to data.
167+
* [Binding]({% slug htmlhelpers_multiselect_databinding_aspnetcore %})—The MultiSelect supports remote and local binding to data.
168168
* [Grouping]({% slug htmlhelpers_multiselect_grouping_aspnetcore %})—The built-in grouping features allows you to arrange the items in separate sets.
169169
* [Virtualization]({% slug htmlhelpers_multiselect_virtualization_aspnetcore %})—To improve the performance when displaying a large number of records, take advantage of the MultiSelect virtualization.
170170
* [Templates]({% slug htmlhelpers_multiselect_templates_aspnetcore %})—The templates allow you to customize the rendering of the items, tags, and pop-up header.

‎docs-aspnet/html-helpers/editors/textbox/events.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the Telerik UI TextBox component for {{ site.framework }}."
5+
slug: events_textbox_aspnetcore
6+
position: 7
7+
---
8+
9+
# Events
10+
11+
The Telerik UI TextBox for {{ site.framework }} exposes multiple [events](/api/Kendo.Mvc.UI.Fluent/TextBoxEventBuilder) that allow you to control and customize the behavior of the UI component.
12+
13+
For a complete example on basic TextBox events, refer to the [demo on using the events of the TextBox](https://demos.telerik.com/{{ site.platform }}/textbox/events).
14+
15+
## Handling by Handler Name
16+
17+
The following example demonstrates how to subscribe to events by a handler name.
18+
19+
20+
```HtmlHelper
21+
@(Html.Kendo().TextBox()
22+
.Name("textbox")
23+
.Events(e => e
24+
.Change("textbox_change")
25+
)
26+
)
27+
```
28+
{% if site.core %}
29+
```TagHelper
30+
<kendo-textbox name="textbox"
31+
on-change="textbox_change">
32+
</kendo-textbox>
33+
```
34+
{% endif %}
35+
```script.js
36+
<script>
37+
function textbox_change() {
38+
// Handle the change event.
39+
}
40+
</script>
41+
```
42+
43+
## Next Steps
44+
45+
* [Using the TextBox Events (Demo)](https://demos.telerik.com/{{ site.platform }}/textbox/events)
46+
47+
## See Also
48+
49+
* [Using the API of the TextBox HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/textbox/api)
50+
* [TextBox Server-Side API](/api/textbox)
51+
* [TextBox Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/textbox)

‎docs-aspnet/html-helpers/editors/textbox/getting-started.md

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
---
2+
title: Getting Started
3+
page_title: Getting Started
4+
description: "Make your first steps with the Telerik UI for {{ site.framework }} TextBox component by following a complete step-by-step tutorial."
5+
slug: aspnetcore_textbox_getting_started
6+
position: 1
7+
---
8+
9+
# Getting Started with the TextBox
10+
11+
This tutorial explains how to set up a basic Telerik UI for {{ site.framework }} TextBox and highlights the major steps in the configuration of the component.
12+
13+
You will initialize a TextBox component with a placeholder text and a label. {% if site.core %}Finally, you can run the sample code in [Telerik REPL](https://netcorerepl.telerik.com/) and continue exploring the components.{% endif %}
14+
15+
![Sample Telerik UI for {{ site.framework }} TextBox](./images/textbox-getting-started.png)
16+
17+
@[template](/_contentTemplates/core/getting-started-prerequisites.md#repl-component-gs-prerequisites)
18+
19+
## 1. Prepare the CSHTML File
20+
21+
@[template](/_contentTemplates/core/getting-started-directives.md#gs-adding-directives)
22+
23+
You will also add some sample value that the TextBox will present to the user. Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.
24+
25+
```HtmlHelper
26+
@using Kendo.Mvc.UI
27+
28+
<h4>TextBox with a Placeholder</h4>
29+
<div>
30+
31+
</div>
32+
```
33+
{% if site.core %}
34+
```TagHelper
35+
@addTagHelper *, Kendo.Mvc
36+
37+
<h4>TextBox with a Placeholder</h4>
38+
<div>
39+
40+
</div>
41+
```
42+
{% endif %}
43+
44+
## 2. Initialize the TextBox
45+
46+
Use the TextBox HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page:
47+
48+
* The `Name()` configuration method is mandatory as its value is used for the `id` and the name attributes of the TextBox element.
49+
* The `Placeholder()` configuration specifies the dummy text that is shown initially to hint the user.
50+
51+
```HtmlHelper
52+
@using Kendo.Mvc.UI
53+
54+
<h4>TextBox with a Placeholder</h4>
55+
<div>
56+
@(Html.Kendo().TextBox()
57+
.Name("textbox")
58+
.Placeholder("Name...")
59+
.HtmlAttributes(new { style = "width: 300px;" })
60+
)
61+
</div>
62+
```
63+
{% if site.core %}
64+
```TagHelper
65+
@addTagHelper *, Kendo.Mvc
66+
67+
<h4>TextBox with a Placeholder</h4>
68+
<div>
69+
<kendo-textbox name="textbox" style="width: 300px;"
70+
placeholder="Name...">
71+
</kendo-textbox>
72+
</div>
73+
```
74+
{% endif %}
75+
76+
## 3. Define a Label Text
77+
78+
The next step is to present some description text in front of the TextBox component using the `Label()` property.
79+
80+
```HtmlHelper
81+
@using Kendo.Mvc.UI
82+
83+
<h4>TextBox with a Placeholder</h4>
84+
<div>
85+
@(Html.Kendo().TextBox()
86+
.Name("textbox")
87+
.Label(l => l.Content("Set value:"))
88+
.Placeholder("Name...")
89+
.HtmlAttributes(new { style = "width: 300px;" })
90+
)
91+
</div>
92+
```
93+
{% if site.core %}
94+
```TagHelper
95+
@addTagHelper *, Kendo.Mvc
96+
97+
<h4>TextBox with a Placeholder</h4>
98+
<div>
99+
<kendo-textbox name="textbox" style="width: 300px;" placeholder="Name...">
100+
<textbox-label content="Set value:"/>
101+
</kendo-textbox>
102+
</div>
103+
```
104+
{% endif %}
105+
106+
## 4. Handle a TextBox Event
107+
108+
The TextBox component provides convenient events for implementing your desired logic. In this tutorial, you will use the exposed `Change()` event to log a new entry in the browser's console.
109+
110+
```HtmlHelper
111+
@using Kendo.Mvc.UI
112+
113+
<h4>TextBox with a Placeholder</h4>
114+
<div>
115+
<script>
116+
function change(e) {
117+
console.log("Change :: " + this.value());
118+
}
119+
</script>
120+
121+
@(Html.Kendo().TextBox()
122+
.Name("textbox")
123+
.Label(l => l.Content("Set value:"))
124+
.Placeholder("Name...")
125+
.Events(e => e.Change("change"))
126+
.HtmlAttributes(new { style = "width: 300px;" })
127+
)
128+
</div>
129+
```
130+
{% if site.core %}
131+
```TagHelper
132+
@addTagHelper *, Kendo.Mvc
133+
134+
<h4>TextBox with a Placeholder</h4>
135+
<div>
136+
<script>
137+
function change(e) {
138+
console.log("Change :: " + this.value());
139+
}
140+
</script>
141+
142+
<kendo-textbox name="textbox" style="width: 300px;"
143+
placeholder="Name..." on-change="change">
144+
<textbox-label content="Set value:"/>
145+
</kendo-textbox>
146+
</div>
147+
```
148+
{% endif %}
149+
150+
## 5. (Optional) Reference Existing TextBox Instances
151+
152+
You can reference the TextBox instances that you have created and build on top of their existing configuration:
153+
154+
1. Use the `id` attribute of the component instance to establish a reference.
155+
156+
```script
157+
<script>
158+
var textboxReference = $("#textbox").data("kendoTextBox"); // textboxReference is a reference to the existing TextBox instance of the helper.
159+
</script>
160+
```
161+
162+
1. Use the [TextBox client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/textbox#methods) to control the behavior of the widget. In this example, you will use the `value` method to select an item.
163+
164+
```script
165+
<script>
166+
var textboxReference = $("#textbox").data("kendoTextBox"); // textboxReference is a reference to the existing TextBox instance of the helper.
167+
textboxReference.value("Sample text");
168+
</script>
169+
```
170+
171+
{% if site.core %}
172+
## Explore this Tutorial in REPL
173+
174+
You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:
175+
176+
* [Sample code with the TextBox HtmlHelper](https://netcorerepl.telerik.com/QHEvbJFL14nUQBCX42)
177+
* [Sample code with the TextBox TagHelper](https://netcorerepl.telerik.com/GnObbJFh14nVCZns54)
178+
179+
{% endif %}
180+
181+
## Next Steps
182+
183+
* [Set Labels to the TextBox]({% slug htmlhelpers_labels_textbox %})
184+
* [Customize the Appearance of the TextBox]({% slug textbox_appearance %})
185+
* [Accessibility]({% slug accessibility_textbox_aspnetcore %})
186+
187+
## See Also
188+
189+
* [Using the API of the TextBox for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/textbox/api)
190+
* [TextBox Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/textbox)
191+
* [Server-Side API of the TextBox](/api/textbox)
192+
* [Knowledge Base Section](/knowledge-base)

‎docs-aspnet/html-helpers/editors/textbox/images/textbox-getting-started.png

7.13 KB
Loading

‎docs-aspnet/html-helpers/editors/textbox/overview.md

Lines changed: 3 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: Overview
33
page_title: Overview
4-
description: "Learn the basics when working with the Telerik UI TextBox for {{ site.framework }}."
4+
description: "The Telerik UI TextBox component for {{ site.framework }} enables user input and its appearance matches the general Telerik theme of the page."
55
slug: htmlhelpers_overview_textbox
6-
position: 1
6+
position: 0
77
---
88

99
# {{ site.framework }} TextBox Overview
@@ -41,50 +41,7 @@ The following example demonstrates the basic configuration for the TextBox.
4141

4242
## Functionality and Features
4343

44-
* [Accessibility]({% slug accessibility_textbox_aspnetcore %})
45-
46-
## Events
47-
48-
You can subscribe to the TextBox events. For a complete example on basic TextBox events, refer to the [demo on using the events of the TextBox](https://demos.telerik.com/{{ site.platform }}/textbox/events).
49-
50-
The following example demonstrates how to subscribe to events by a handler name.
51-
52-
```HtmlHelper
53-
@(Html.Kendo().TextBox()
54-
.Name("textbox")
55-
.Events(e => e
56-
.Change("textbox_change")
57-
)
58-
)
59-
```
60-
{% if site.core %}
61-
```TagHelper
62-
<kendo-textbox name="textbox"
63-
on-change="textbox_change">
64-
</kendo-textbox>
65-
```
66-
{% endif %}
67-
```script.js
68-
<script>
69-
function textbox_change() {
70-
// Handle the change event.
71-
}
72-
</script>
73-
```
74-
75-
## Referencing Existing Instances
76-
77-
To reference an existing Telerik UI TextBox instance, use the [`jQuery.data()`](https://api.jquery.com/jQuery.data/) method. Once a reference is established, use the [TextBox client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/textbox#methods) to control its behavior.
78-
79-
The following example demonstrates how to access an existing TextBox instance.
80-
81-
// Place the following after your Telerik UI TextBox for {{ site.framework }} declaration.
82-
<script>
83-
$(function() {
84-
// The Name() of the TextBox is used to get its client-side instance.
85-
var textbox = $("#textbox").data("kendoTextBox");
86-
});
87-
</script>
44+
* [Accessibility]({% slug accessibility_textbox_aspnetcore %})—The TextBox is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
8845

8946
## See Also
9047

0 commit comments

Comments
 (0)