Sync with Kendo UI Professional

Author: Kendo Bot

docs-aspnet/html-helpers/data-management/grid/grouping/group-paging.md

@@ -0,0 +1,61 @@
+---
+title: Group Paging
+page_title: Group Paging Overview 
+description: "Learn how to enable the group paging in the Telerik UI for {{ site.framework }} Grid by Kendo UI and load groups on demand."
+slug: htmlhelpers_grid_aspnet_grouping
+---
+
+# Group Paging Overview
+
+The group paging functionality allows you to load groups on demand and page through the groups at the same time. 
+
+By default, the groups are rendered collapsed and each row signifies one item from the page. When you expand a group row the grid inserts new rows to the current page or moves them to the next one if they do not fit the `PageSize()` specified, followed by the rest of the group rows. 
+
+## Getting Started
+
+To enable group paging, use the `GroupPaging()` method as part of the data source configuration, add a `Group()` and a `PageSize()` to see the result.
+
+    .DataSource(dataSource => dataSource
+        .Ajax()
+        .GroupPaging(true)
+        .PageSize(50)
+        .Read(read => read.Action("AllCustomers", "Grid"))
+        .Group(x =>
+        {
+           x.Add(y => y.City);
+        })
+    )   
+
+## Using with Virtual Scrolling
+
+Group paging can be used with virtual scrolling. This further improves the performance because the grid only renders as many rows as its page size. When a group row is expanded, the grid rows content is refreshed to show the new rows within the current page. 
+
+All [limitations]({% slug virtual_scrolling_aspnetcore_grid%}#known-limitations) of the virtual scrolling functionality apply.
+
+## Using with Paging
+
+When you use group paging with paging, the grid pager updates its total based on the current number of rows. Two kinds of paging occur:
+
+* You can page the grouped rows available on other pages.
+* You can expand a group thus inserting new rows in the total. The new rows precede the rest of the group rows and other items in the view.
+
+## Using with Remote Data
+
+The built-in [`data source types`]({% slug htmlhelper_datasourcetypes_aspnetcore %}) use server operations by default. To facilitate the group paging functionality, the grid data source sends the following additional parameters: `take`, `skip`, `groupPaging`. When a row is expanded, one or two requests will be issued. 
+
+- If the currently expanded row does not have subgroups, only one request is sent with the `filter` parameter containing the group and subgroup value for which the items are requested. 
+- If the currently expanded row has subgroups, an additional request is sent with the `includeSubGroupCount` parameter prompting that the response must include the total of items in the sub group
+
+## Expanded state
+
+The expanded state of groups is preserved during paging only, but not if sort or filter are applied.
+
+## Known Limitations
+
+- The group paging functionality is not supported for endless scrolling enabled grids.
+- If using in combination with virtual scrolling, all [limitations]({% slug virtual_scrolling_aspnetcore_grid%}#known-limitations) of the virtual scrolling functionality apply.
+- Group paging is not compatible with SignalR binding
+
+## See Also
+
+* [Virtual Scrolling of the Grid]({% slug virtual_scrolling_aspnetcore_grid %})

docs-aspnet/html-helpers/data-management/grid/scrolling/virtual.md

@@ -76,7 +76,7 @@ On mobile devices where a scrollbar that can be grabbed and dragged is not visib
 
 * Horizontal scrolling is not virtualized.
 * Either enable virtual scrolling or paging. Do not apply both features at the same time.
-* Virtual scrolling is not compatible with grouping and hierarchy. Editing is supported as of R3 2017.
+* Virtual scrolling is not compatible with hierarchy. Editing is supported as of R3 2017. [Group paging]({% slug htmlhelpers_grid_aspnet_grouping %}) is supported as of R2 2020.
 * Virtual scrolling relies on calculating the average row height based on already loaded data. Having a large variance of row heights or an unknown number of rows that are not bound to data (such as group headers) might cause unexpected behavior.
 * Provide for a page size of the Grid that is large enough, so that the table rows do not fit in the scrollable data area. Otherwise the vertical virtual scrollbar will not be created. The page size of the Grid must be over three times larger than the number of visible table rows in the data area.
 * A scrollable Grid with a set height needs to be visible when initialized. In this way the Grid adjusts the height of its scrollable data area in accordance with the total height of the widget. In certain scenarios the Grid might be invisible when initialized - for example, when placed inside an initially inactive TabStrip tab or in another widget. In such cases use either of the following options:

docs-aspnet/html-helpers/editors/maskedtextbox/labels.md

@@ -0,0 +1,66 @@
+---
+title: Labels
+page_title: Labels
+description: "Learn the basics when working with Labels for the Telerik UI MaskedTextBox for {{ site.framework }}."
+slug: htmlhelpers_labels_maskedtextbox
+position: 3
+---
+
+# Label Overview
+
+The Label enables you to associate the label HTML element with the MaskedTextBox.
+
+* [Demo page for the MaskedTextBox Floating Label](https://demos.telerik.com/{{ site.platform }}/maskedtextbox/floating-label)
+
+## Basic Usage
+
+To associate a MaskedTextBox with a Label, set the `content` property of the `label`.
+
+## Initializing the Label for MaskedTextBox
+
+The Label exposes a `content` property that sets the inner HTML of the label.
+
+The below example shows how to create a Label from a string.
+
+    @(Html.Kendo().MaskedTextBox()
+        .Name("MaskedTextBox")
+        .Label(l => l.Content("Phone number"))
+    )
+
+The below example shows how to create a Label from a function. The function context (available via the `this` keyword) will be set to the widget instance.
+
+    @(Html.Kendo().MaskedTextBox()
+            .Name("MaskedTextBox")
+            .Label(l => l.ContentHandler("labelContentHandler"))
+    )
+    <script>
+        function labelContentHandler() {
+            return "Phone number"
+        }
+    </script>
+
+## Floating Label
+
+The Floating Label enables you to provide a floating label functionality to the MaskedTextBox.
+
+The following example demonstrates how to set a Floating Label for a MaskedTextBox.
+
+    @(Html.Kendo().MaskedTextBox()
+           .Name("MaskedTextBox")
+           .Label(label =>
+           {
+               label.Content("Phone number");
+               label.Floating(true);
+           })
+    )
+
+If set to `true`, the component will be wrapped in a container that will allow the floating label functionality.
+
+> **Important:** The [value](https://docs.telerik.com/kendo-ui/api/javascript/ui/maskedtextbox/methods/value) client-side method **does not trigger** the `focusout` event of the input.
+This could affect the floating label functionality.
+You can overcome this behavior by manually invoking the `refresh` method of the Floating Label: `$("#maskedtextbox").data("kendoMaskedTextBox").floatingLabel.refresh();`
+
+## See Also
+
+* [Server-Side MaskedTextBox API](/api/maskedtextbox)
+* [Using the API of the MaskedTextBox HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/maskedtextbox/api)

docs-aspnet/html-helpers/editors/numerictextbox/accessibility/overview.md

@@ -26,44 +26,11 @@ The NumericTextBox is compliant with the Section 508 requirements.
 
 The NumericTextBox supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/).
 
-## label Element Support
+## Label Element Support
 
-Because of the NumericTextBox complex rendering, to focus the widget through the `label` element, you need to manually handle the click event of the label and focus the NumericTextBox.
+Because of the NumericTextBox complex rendering, to focus the widget through the `label` element, you need to manually handle the `click` event of the label and `focus` the NumericTextBox.
 
-```
-    @Html.Label("numeric", "Value")
-    @Html.Kendo().NumericTextBox().Name("numeric")
-
-    <script>
-        var roles = {
-        numerictextbox: "kendoNumericTextBox",
-        combobox: "kendoComboBox",
-        multiselect: "kendoMultiSelect"
-        }
-
-        function getWidget(element) {
-        var role = element.data("role");
-        role = roles[role];
-
-        if (role) {
-            return element.data(role);
-        }    
-        }
-
-        $("label").click(function() {
-        var label = $(this),
-            id = label.attr("for"),
-            widget;
-
-        if (id) {
-            widget = getWidget($("#" + id));
-            if (widget) {
-            widget.focus();
-            }
-        }
-        });
-    </script>
-```
+Another possible solution is to use the NumericTextBox [`Label` property]({% slug htmlhelpers_labels_numerictextbox %}), which automatically focuses on the input.
 
 ## See Also
 

docs-aspnet/html-helpers/editors/numerictextbox/labels.md

@@ -0,0 +1,66 @@
+---
+title: Labels
+page_title: Labels
+description: "Learn the basics when working with Labels for the Telerik UI NumericTextBox for {{ site.framework }}."
+slug: htmlhelpers_labels_numerictextbox
+position: 3
+---
+
+# Label Overview
+
+The Label enables you to associate the label HTML element with the NumericTextBox.
+
+* [Demo page for the NumericTextBox Floating Label](https://demos.telerik.com/{{ site.platform }}/numerictextbox/floating-label)
+
+## Basic Usage
+
+To associate a NumericTextBox with a Label, set the `content` property of the `label`.
+
+## Initializing the Label for NumericTextBox
+
+The Label exposes a `content` property that sets the inner HTML of the label.
+
+The below example demonstrates how to create a Label from a string.
+
+    @(Html.Kendo().NumericTextBox()
+        .Name("NumericTextBox")
+        .Label(l => l.Content("Price"))
+    )
+
+The below example demonstrates how to create a Label from a function. The function context (available via the `this` keyword) will be set to the widget instance.
+
+    @(Html.Kendo().NumericTextBox()
+            .Name("NumericTextBox")
+            .Label(l => l.ContentHandler("labelContentHandler"))
+    )
+    <script>
+        function labelContentHandler() {
+            return "Price"
+        }
+    </script>
+
+## Floating Label
+
+The Floating Label enables you to provide a floating label functionality to the NumericTextBox.
+
+The following example demonstrates how to set a Floating Label for a NumericTextBox.
+
+    @(Html.Kendo().NumericTextBox()
+           .Name("NumericTextBox")
+           .Label(label =>
+           {
+               label.Content("Price");
+               label.Floating(true);
+           })
+    )
+
+If set to `true`, the component will be wrapped in a container that will allow the floating label functionality.
+
+> **Important:** The [value](https://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox/methods/value) client-side method **does not trigger** the `focusout` event of the input.
+This could affect the floating label functionality.
+You can overcome this behavior by manually invoking the `refresh` method of the Floating Label: `$("#numerictextbox").data("kendoNumericTextBox").floatingLabel.refresh();`
+
+## See Also
+
+* [Server-Side API](/api/numerictextbox)
+* [Using the API of the NumericTextBox HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/numerictextbox/api)

docs-aspnet/html-helpers/editors/numerictextbox/limitations.md

@@ -3,7 +3,7 @@ title: Known Limitations
 page_title: Known Limitations
 description: "Get started with the Telerik UI NumericTextBox for {{ site.framework }} and learn what are the known limitations of the helper."
 slug: limitations_numerictextbox_aspnetcore
-position: 4
+position: 5
 ---
 
 # Known Limitations

docs-aspnet/html-helpers/editors/numerictextbox/precision.md

@@ -3,7 +3,7 @@ title: Input Restrictions
 page_title: Input Restrictions
 description: "Get started with the Telerik UI NumericTextBox for {{ site.framework }} and learn how to control the precision of the entered numebr and restrict the value to a specific range."
 slug: input_restrictions_numerictextbox_aspnetcore
-position: 3
+position: 4
 ---
 
 # Input Restrictions

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

@@ -0,0 +1,65 @@
+---
+title: Labels
+page_title: Labels
+description: "Learn the basics when working with the Telerik UI Labels for TextBox for {{ site.framework }}."
+slug: htmlhelpers_labels_textbox
+position: 2
+---
+# Label Overview
+
+The Label enables you to associate the label HTML element with the TextBox.
+
+* [Demo page for the TextBox Floating Label](https://demos.telerik.com/{{ site.platform }}/textbox/floating-label)
+
+## Basic Usage
+
+To associate a TextBox with a Label, set the `content` property of the `label`.
+
+## Initializing the Label for the TextBox
+
+The Label exposes a `content` property that sets the inner HTML of the label.
+
+The below example shows how to create a Label from a string.
+
+    @(Html.Kendo().TextBox()
+        .Name("TextBox")
+        .Label(l => l.Content("First name"))
+    )
+
+The below example shows how to create a Label from a function. The function context (available via the `this` keyword) will be set to the widget instance.
+
+    @(Html.Kendo().TextBox()
+            .Name("TextBox")
+            .Label(l => l.ContentHandler("labelContentHandler"))
+    )
+    <script>
+        function labelContentHandler() {
+            return "First name"
+        }
+    </script>
+
+## Floating Label
+
+The Floating Label enables you to provide a floating label functionality to the TextBox.
+
+The following example demonstrates how to set a Floating Label for a TextBox.
+
+    @(Html.Kendo().TextBox()
+           .Name("TextBox")
+           .Label(label =>
+           {
+               label.Content("First name");
+               label.Floating(true);
+           })
+    )
+
+If set to `true`, the component will be wrapped in a container that will allow the floating label functionality.
+
+> **Important:** The [value](https://docs.telerik.com/kendo-ui/api/javascript/ui/textbox/methods/value) client-side method **does not trigger** the `focusout` event of the input.
+This could affect the floating label functionality.
+You can overcome this behavior by manually invoking the `refresh` method of the Floating Label: `$("#textbox").data("kendoTextBox").floatingLabel.refresh();`
+
+## See Also
+
+* [Server-Side API](/api/textbox)
+* [Using the API of the TextBox HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/textbox/api)

docs-aspnet/html-helpers/editors/textbox/rtl-support.md

@@ -3,7 +3,7 @@ title: RTL Support
 page_title: Right-to-Left Support
 description: "Get started with the Telerik UI TextBox for {{ site.framework }} and learn about the RTL supports it provides."
 slug: rtl_textbox_aspnetcore
-position: 2
+position: 3
 ---
 
 # Right-to-Left Support