Sync with Kendo UI Professional

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

@@ -164,7 +164,7 @@ The following example demonstrates the basic configuration of the MultiSelect. T
 
 ## Functionality and Features
 
-* [Binding]({% slug htmlhelpers_multiselect_databinding_aspnetcore %})—The MultiSelect support remote and local binding to data.
+* [Binding]({% slug htmlhelpers_multiselect_databinding_aspnetcore %})—The MultiSelect supports remote and local binding to data.
 * [Grouping]({% slug htmlhelpers_multiselect_grouping_aspnetcore %})—The built-in grouping features allows you to arrange the items in separate sets. 
 * [Virtualization]({% slug htmlhelpers_multiselect_virtualization_aspnetcore %})—To improve the performance when displaying a large number of records, take advantage of the MultiSelect virtualization.
 * [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

@@ -0,0 +1,51 @@
+---
+title: Events
+page_title: Events
+description: "Learn how to handle the events of the Telerik UI TextBox component for {{ site.framework }}."
+slug: events_textbox_aspnetcore
+position: 7
+---
+
+# Events
+
+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.
+
+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).
+
+## Handling by Handler Name
+
+The following example demonstrates how to subscribe to events by a handler name.
+
+
+```HtmlHelper
+  @(Html.Kendo().TextBox()
+        .Name("textbox")
+        .Events(e => e
+            .Change("textbox_change")
+        )
+  )
+```
+{% if site.core %}
+```TagHelper
+<kendo-textbox name="textbox"
+               on-change="textbox_change">
+</kendo-textbox>
+```
+{% endif %}
+```script.js
+  <script>
+  function textbox_change() {
+      // Handle the change event.
+  }
+  </script>
+```
+
+## Next Steps
+
+* [Using the TextBox Events (Demo)](https://demos.telerik.com/{{ site.platform }}/textbox/events)
+
+## See Also
+
+* [Using the API of the TextBox HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/textbox/api)
+* [TextBox Server-Side API](/api/textbox)
+* [TextBox Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/textbox)

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

@@ -0,0 +1,192 @@
+---
+title: Getting Started
+page_title: Getting Started
+description: "Make your first steps with the Telerik UI for {{ site.framework }} TextBox component by following a complete step-by-step tutorial."
+slug: aspnetcore_textbox_getting_started
+position: 1
+---
+
+# Getting Started with the TextBox
+
+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.
+
+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 %}
+
+ ![Sample Telerik UI for {{ site.framework }} TextBox](./images/textbox-getting-started.png)
+
+@[template](/_contentTemplates/core/getting-started-prerequisites.md#repl-component-gs-prerequisites)
+
+## 1. Prepare the CSHTML File
+
+@[template](/_contentTemplates/core/getting-started-directives.md#gs-adding-directives)
+
+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.
+
+```HtmlHelper
+    @using Kendo.Mvc.UI
+
+    <h4>TextBox with a Placeholder</h4>
+    <div>
+
+    </div>
+```
+{% if site.core %}
+```TagHelper
+    @addTagHelper *, Kendo.Mvc
+
+    <h4>TextBox with a Placeholder</h4>
+    <div>
+
+    </div>
+```
+{% endif %}
+
+## 2. Initialize the TextBox
+
+Use the TextBox HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page:
+
+* The `Name()` configuration method is mandatory as its value is used for the `id` and the name attributes of the TextBox element.
+* The `Placeholder()` configuration specifies the dummy text that is shown initially to hint the user. 
+
+```HtmlHelper
+@using Kendo.Mvc.UI
+
+<h4>TextBox with a Placeholder</h4>
+<div>
+    @(Html.Kendo().TextBox()
+        .Name("textbox")
+        .Placeholder("Name...")
+        .HtmlAttributes(new { style = "width: 300px;" })
+    )
+</div>
+```
+{% if site.core %}
+```TagHelper
+@addTagHelper *, Kendo.Mvc
+
+<h4>TextBox with a Placeholder</h4>
+<div>
+    <kendo-textbox name="textbox" style="width: 300px;" 
+    placeholder="Name...">
+    </kendo-textbox>
+</div>
+```
+{% endif %}
+
+## 3. Define a Label Text
+
+The next step is to present some description text in front of the TextBox component using the `Label()` property.
+
+```HtmlHelper
+@using Kendo.Mvc.UI
+
+<h4>TextBox with a Placeholder</h4>
+<div>
+    @(Html.Kendo().TextBox()
+        .Name("textbox")
+        .Label(l => l.Content("Set value:"))
+        .Placeholder("Name...")
+        .HtmlAttributes(new { style = "width: 300px;" })
+    )
+</div>
+```
+{% if site.core %}
+```TagHelper
+ @addTagHelper *, Kendo.Mvc
+
+<h4>TextBox with a Placeholder</h4>
+<div>
+    <kendo-textbox name="textbox" style="width: 300px;" placeholder="Name...">
+         <textbox-label content="Set value:"/>
+         </kendo-textbox>
+</div>
+```
+{% endif %}
+
+## 4. Handle a TextBox Event
+
+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.
+
+```HtmlHelper
+@using Kendo.Mvc.UI
+
+<h4>TextBox with a Placeholder</h4>
+<div>
+    <script>
+       function change(e) {
+          console.log("Change :: " + this.value());
+       }
+    </script>
+
+    @(Html.Kendo().TextBox()
+        .Name("textbox")
+        .Label(l => l.Content("Set value:"))
+        .Placeholder("Name...")
+        .Events(e => e.Change("change"))
+        .HtmlAttributes(new { style = "width: 300px;" })
+    )
+</div>
+```
+{% if site.core %}
+```TagHelper
+@addTagHelper *, Kendo.Mvc
+
+<h4>TextBox with a Placeholder</h4>
+<div>
+    <script>
+       function change(e) {
+          console.log("Change :: " + this.value());
+       }
+    </script>
+
+    <kendo-textbox name="textbox" style="width: 300px;" 
+    placeholder="Name..." on-change="change">
+       <textbox-label content="Set value:"/>
+       </kendo-textbox>
+</div>
+```
+{% endif %}
+
+## 5. (Optional) Reference Existing TextBox Instances
+
+You can reference the TextBox instances that you have created and build on top of their existing configuration:
+
+1. Use the `id` attribute of the component instance to establish a reference.
+
+    ```script
+    <script>
+        var textboxReference = $("#textbox").data("kendoTextBox"); // textboxReference is a reference to the existing TextBox instance of the helper.
+    </script>
+    ```
+
+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.
+
+    ```script
+    <script>
+        var textboxReference = $("#textbox").data("kendoTextBox"); // textboxReference is a reference to the existing TextBox instance of the helper.
+        textboxReference.value("Sample text"); 
+    </script>
+    ```
+
+{% if site.core %}
+## Explore this Tutorial in REPL
+
+You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:
+
+* [Sample code with the TextBox HtmlHelper](https://netcorerepl.telerik.com/QHEvbJFL14nUQBCX42)
+* [Sample code with the TextBox TagHelper](https://netcorerepl.telerik.com/GnObbJFh14nVCZns54)
+
+{% endif %}
+
+## Next Steps
+
+* [Set Labels to the TextBox]({% slug htmlhelpers_labels_textbox %})
+* [Customize the Appearance of the TextBox]({% slug textbox_appearance %})
+* [Accessibility]({% slug accessibility_textbox_aspnetcore %})
+
+## See Also
+
+* [Using the API of the TextBox for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/textbox/api)
+* [TextBox Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/textbox)
+* [Server-Side API of the TextBox](/api/textbox)
+* [Knowledge Base Section](/knowledge-base)

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

@@ -1,9 +1,9 @@
 ---
 title: Overview
 page_title: Overview
-description: "Learn the basics when working with the Telerik UI TextBox for {{ site.framework }}."
+description: "The Telerik UI TextBox component for {{ site.framework }} enables user input and its appearance matches the general Telerik theme of the page."
 slug: htmlhelpers_overview_textbox
-position: 1
+position: 0
 ---
 
 # {{ site.framework }} TextBox Overview
@@ -41,50 +41,7 @@ The following example demonstrates the basic configuration for the TextBox.
 
 ## Functionality and Features
 
-* [Accessibility]({% slug accessibility_textbox_aspnetcore %})
-
-## Events
-
-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).
-
-The following example demonstrates how to subscribe to events by a handler name.
-
-```HtmlHelper
-  @(Html.Kendo().TextBox()
-        .Name("textbox")
-        .Events(e => e
-            .Change("textbox_change")
-        )
-  )
-```
-{% if site.core %}
-```TagHelper
-<kendo-textbox name="textbox"
-               on-change="textbox_change">
-</kendo-textbox>
-```
-{% endif %}
-```script.js
-  <script>
-  function textbox_change() {
-      // Handle the change event.
-  }
-  </script>
-```
-
-## Referencing Existing Instances
-
-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.
-
-The following example demonstrates how to access an existing TextBox instance.
-
-      // Place the following after your Telerik UI TextBox for {{ site.framework }} declaration.
-      <script>
-      $(function() {
-          // The Name() of the TextBox is used to get its client-side instance.
-          var textbox = $("#textbox").data("kendoTextBox");
-      });
-      </script>
+* [Accessibility]({% slug accessibility_textbox_aspnetcore %})—The TextBox is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
 
 ## See Also