Skip to content

Commit d82afe4

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 67f6e06 commit d82afe4

File tree

3 files changed

+311
-0
lines changed

3 files changed

+311
-0
lines changed

‎docs-aspnet/globalization/right-to-left-support.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: Right-to-Left Support
3+
page_title: Right-to-Left Support
4+
description: "Learn more about the Accessibility features related to bidirectional languages, supported by {{ site.product }}."
5+
slug: overview_rtlsupport_core
6+
position: 2
7+
---
8+
9+
# Right-to-Left Languages
10+
11+
Right-to-left (RTL) support refers to the ability of a library, website, or application to handle and respond to users who communicate through a right-to-left language such as Arabic, Hebrew, Chinese or Japanese.
12+
13+
The default language input for most users of the web is left-to-right. However, many websites and applications wish to also provide RTL support for their visitors. The RTL functionality falls more into the internationalization space but can be considered as an accessibility feature as well. After all, RTL is about making user experiences more accessible for visitors who use right-to-left languages.
14+
15+
## Configuration
16+
17+
Unless you are building an application that exclusively uses RTL languages, it is intuitive to apply the RTL support feature based on external input, such as language selection or information from the user agent of a visitor. In that case, you can apply the `k-rtl` class at runtime using the jQuery `addClass` method.
18+
19+
For example, if you want to allow the user to trigger RTL support by selecting a language from a drop-down list or by clicking a button:
20+
21+
1. Add a button to your page by using the `<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />` setting.
22+
1. Add a click handler for the button and toggle RTL support by adding or removing the `k-rtl` class to a form, in this case, a collection of form fields to which you assigned an ID of `speakerForm`. With that handler in place, the user can now trigger RTL support on demand.
23+
24+
```
25+
$('#toggleRTL').on('click', function(event) {
26+
var form = $('#speakerForm');
27+
28+
if (form.hasClass('k-rtl')) {
29+
form.removeClass('k-rtl')
30+
} else {
31+
form.addClass('k-rtl');
32+
}
33+
})
34+
```
35+
36+
## Supported {{ site.product }} Components
37+
38+
The following table lists the {{ site.product }} Components that support rendering of content in a right-to-left direction for right-to-left languages, such as Arabic, Hebrew, Chinese, or Japanese.
39+
40+
|Component |RTL Support|Demo
41+
|:--- |:---|:---
42+
|AutoComplete |Yes |[Browse](https://demos.telerik.com/aspnet-core/autocomplete/right-to-left-support)
43+
|BottomNavigation |Yes |[Browse](https://demos.telerik.com/aspnet-core/bottomnavigation/right-to-left-support)
44+
|Breadcrumb |Yes|[Browse](https://demos.telerik.com/aspnet-core/breadcrumb/right-to-left-support)
45+
|Button |Yes|[Browse](https://demos.telerik.com/aspnet-core/button/right-to-left-support)
46+
|ButtonGroup |Yes|[Browse](https://demos.telerik.com/aspnet-core/buttongroup/right-to-left-support)
47+
|Calendar |Yes|[Browse](https://demos.telerik.com/aspnet-core/calendar/right-to-left-support)
48+
|Charts |Yes|[Browse](https://demos.telerik.com/aspnet-core/chart-api/rtl)
49+
|CheckBoxGroup |Yes|[Browse](https://demos.telerik.com/aspnet-core/checkboxgroup/right-to-left-support)
50+
|ComboBox |Yes|[Browse](https://demos.telerik.com/aspnet-core/combobox/right-to-left-support)
51+
|DateInput |Yes|[Browse](https://demos.telerik.com/aspnet-core/dateinput/right-to-left-support)
52+
|DatePicker |Yes|[Browse](https://demos.telerik.com/aspnet-core/datepicker/right-to-left-support)
53+
|DateTimePicker|Yes|[Browse](https://demos.telerik.com/aspnet-core/datetimepicker/right-to-left-support)
54+
|Dialog |Yes|[Browse](https://demos.telerik.com/aspnet-core/dialog/right-to-left-support)
55+
|DropDownList |Yes|[Browse](https://demos.telerik.com/aspnet-core/dropdownlist/right-to-left-support)
56+
|DropDownTree |Yes |[Browse](https://demos.telerik.com/aspnet-core/dropdowntree/right-to-left-support)
57+
|Editor |Yes|[Browse](https://demos.telerik.com/aspnet-core/editor/right-to-left-support)
58+
|ExpansionPanel|Yes|[Browse](https://demos.telerik.com/aspnet-core/expansionpanel/right-to-left-support)
59+
|FileManager |Yes|[Browse](https://demos.telerik.com/aspnet-core/filemanager/right-to-left-support)
60+
|FloatingActionButton |Yes |[Browse](https://demos.telerik.com/aspnet-core/floatingactionbutton/right-to-left-support)
61+
|Gantt |Yes |[Browse](https://demos.telerik.com/aspnet-core/gantt/right-to-left-support)
62+
|Grid |Yes |[Browse](https://demos.telerik.com/aspnet-core/grid/right-to-left-support)
63+
|ListBox |Yes |[Browse](https://demos.telerik.com/aspnet-core/listbox/right-to-left-support)
64+
|ListView |Yes |[Browse](https://demos.telerik.com/aspnet-core/listview/right-to-left-support)
65+
|MaskedTextbox |Yes |[Browse](https://demos.telerik.com/aspnet-core/maskedtextbox/right-to-left-support)
66+
|Menu |Yes |[Browse](https://demos.telerik.com/aspnet-core/menu/right-to-left-support)
67+
|MultiColumnComboBox |Yes|[Browse](https://demos.telerik.com/aspnet-core/multicolumncombobox/right-to-left-support)
68+
|MultiSelect |Yes |[Browse](https://demos.telerik.com/aspnet-core/multiselect/right-to-left-support)
69+
|Notification |Yes |[Browse](https://demos.telerik.com/aspnet-core/notification/right-to-left-support)
70+
|NumericTextbox|Yes |[Browse](https://demos.telerik.com/aspnet-core/numerictextbox/right-to-left-support)
71+
|PanelBar |Yes |[Browse](https://demos.telerik.com/aspnet-core/panelbar/right-to-left-support)
72+
|RadioGroup |Yes |[Browse](https://demos.telerik.com/aspnet-core/radiogroup/right-to-left-support)
73+
|Scheduler |Yes |[Browse](https://demos.telerik.com/aspnet-core/scheduler/right-to-left-support)
74+
|Slider |Yes |[Browse](https://demos.telerik.com/aspnet-core/slider/right-to-left-support)
75+
|Splitter |Yes |[Browse](https://demos.telerik.com/aspnet-core/splitter/right-to-left-support)
76+
|Stepper |Yes |[Browse](https://demos.telerik.com/aspnet-core/stepper/right-to-left-support)
77+
|Switch |Yes |[Browse](https://demos.telerik.com/aspnet-core/switch/right-to-left-support)
78+
|TabStrip |Yes |[Browse](https://demos.telerik.com/aspnet-core/tabstrip/right-to-left-support)
79+
|TaskBoard |Yes |[Browse](https://demos.telerik.com/aspnet-core/taskboard/right-to-left-support)
80+
|TextArea |Yes |[Browse](https://demos.telerik.com/aspnet-core/textarea/right-to-left-support)
81+
|TextBox |Yes |[Browse](https://demos.telerik.com/aspnet-core/textbox/right-to-left-support)
82+
|TimePicker |Yes |[Browse](https://demos.telerik.com/aspnet-core/timepicker/right-to-left-support)
83+
|TreeView |Yes |[Browse](https://demos.telerik.com/aspnet-core/treeview/right-to-left-support)
84+
|Upload |Yes |[Browse](https://demos.telerik.com/aspnet-core/upload/right-to-left-support)
85+
|Window |Yes |[Browse](https://demos.telerik.com/aspnet-core/window/right-to-left-support)
86+
87+
### Known Limitations
88+
89+
* Vertical scrollbar position may be on the left or right side depending on the used browser. This cannot be controlled via CSS or script.
90+
* The layout of the Kendo UI ListView widget depends entirely on the defined template. The widget itself does nothing to convert an existing LTR template to RTL layout. If a `k-rtl` CSS class is present and applied to a wrapper element, text direction will be reversed, but floats, margins, paddings, etc., will keep their orientation.
91+
* Kendo UI Splitter does not reverse the order of its panes in RTL mode.

‎docs-aspnet/html-helpers/editors/dropdownlist/cascading.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Cascading DropDownLists
3+
page_title: Cascading DropDownLists
4+
description: "Learn how to implement a series of two or more Telerik UI DropDownList HtmlHelper for {{ site.framework }} and cascade them."
5+
slug: htmlhelpers_dropdownlist_cascading_aspnetcore
6+
position: 6
7+
---
8+
9+
# Cascading DropDownLists
10+
11+
The cascading functionality is represented by a series of two or more DropDownLists in which each DropDownList is filtered according to the selected options in the previous DropDownList.
12+
13+
## Basic Concepts and Requirements
14+
15+
The child DropDownList cascades from the parent one if the [`CascadeFrom`](/api/Kendo.Mvc.UI.Fluent/DropDownListBuilder#cascadefromsystemstring) property is defined. The `CascadeFrom` property has to point to the [`Name`]({% slug fundamentals_core %}#basic-configuration) of the parent DropDownList widget.
16+
17+
The following actions occur during initialization of the child DropDownList. The child {{ site.product_short }} DropDownList:
18+
- checks if the `CascadeFrom` property is set. If not, cascading is disabled.
19+
- tries to find the parent DropDownList object. If the result is `null`, then the functionality is omitted.
20+
- listens to any changes of the parent value.
21+
- is disabled if the parent does not have a value. If the parent has a value, the child is enabled and filters its data accordingly. The following example demonstrates the parameters of the request.
22+
23+
filter[logic]: and
24+
filter[filters][0][field]: parentID
25+
filter[filters][0][operator]: eq
26+
filter[filters][0][value]:
27+
28+
Additional data can be sent with the request by [using the Data method]({% slug htmlhelpers_datasource_aspnetcore %}#pass-additional-data-to-action-methods) and providing the name of a JavaScript function which will return a JavaScript object with the additional data.
29+
30+
> * The cascading functionality works only when you define the `CascadeFrom` property and initialize the parent DropDownList.
31+
> * The filter operator is always `"eq"`. To filter the data, the child DropDownList uses the `DataValueField` option of the parent DropDownList.
32+
33+
The following example demonstrates how to configure the cascading functionality for the {{ site.product_short }} DropDownList:
34+
35+
```Razor
36+
<h4>Categories:</h4>
37+
@(Html.Kendo().DropDownList()
38+
.Name("categories")
39+
.HtmlAttributes(new { style = "width:100%" })
40+
.OptionLabel("Select category...")
41+
.DataTextField("CategoryName")
42+
.DataValueField("CategoryId")
43+
.DataSource(source =>
44+
{
45+
source.Read(read =>
46+
{
47+
read.Action("Cascading_GetCategories", "DropDownList");
48+
});
49+
})
50+
)
51+
52+
<h4 style="margin-top: 2em;">Products:</h4>
53+
@(Html.Kendo().DropDownList()
54+
.Name("products")
55+
.HtmlAttributes(new { style = "width:100%" })
56+
.OptionLabel("Select product...")
57+
.DataTextField("ProductName")
58+
.DataValueField("ProductID")
59+
.DataSource(source =>
60+
{
61+
source.Read(read =>
62+
{
63+
read.Action("Cascading_GetProducts", "DropDownList")
64+
.Data("filterProducts");
65+
})
66+
.ServerFiltering(true);
67+
})
68+
.Enable(false)
69+
.AutoBind(false)
70+
.CascadeFrom("categories")
71+
)
72+
73+
<script>
74+
function filterProducts() {
75+
return {
76+
categories: $("#categories").val()
77+
};
78+
}
79+
</script>
80+
```
81+
```Controller
82+
public JsonResult Cascading_GetCategories()
83+
{
84+
using (var northwind = GetContext())
85+
{
86+
return Json(northwind.Categories
87+
.Select(c => new { CategoryId = c.CategoryID, CategoryName = c.CategoryName }).ToList());
88+
}
89+
}
90+
91+
public JsonResult Cascading_GetProducts(int? categories)
92+
{
93+
using (var northwind = GetContext())
94+
{
95+
var products = northwind.Products.AsQueryable();
96+
97+
if (categories != null)
98+
{
99+
products = products.Where(p => p.CategoryID == categories);
100+
}
101+
102+
return Json(products.Select(p => new { ProductID = p.ProductID, ProductName = p.ProductName }).ToList());
103+
}
104+
}
105+
```
106+
107+
## See Also
108+
109+
* [Grouping by the DropDownList HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdownlist/grouping)
110+
* [Server-Side API](/api/dropdownlist)

‎docs-aspnet/html-helpers/editors/dropdownlist/filtering.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Filtering
3+
page_title: Filtering
4+
description: "Learn how to filter data on the server for the Telerik UI DropDownList HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_dropdownlist_serverfiltering_aspnetcore
6+
position: 4
7+
---
8+
9+
# Filtering Overview
10+
11+
The {{ site.framework }} DropDownList provides options for filtering its data and for displaying only a subset of the data.
12+
13+
## Server Filtering
14+
15+
When using Server Filtering a reduced portion of the whole dataset is returned from the server. Displaying a subset of the whole data is useful when working with large datasets, containing thousands of records. In such cases, you can improve performance and loading times by defining a minimum filter length by using the [MinLength](/api/Kendo.Mvc.UI.Fluent/DropDownListBuilder#minlengthsystemdouble) option. For example, if you set MinLength to 3, the {{ site.product_short }} DropDownList will not send a request to the remote endpoint and start filtering the dataset until the user enters at least three characters.
16+
17+
> When you apply server filtering, only the source of the DropDownList is filtered. To page and filter the dataset, use the [virtualization]({% slug htmlhelpers_dropdownlist_virtualization_aspnetcore %}) feature.
18+
19+
To configure the {{ site.product_short }} DropDownList for Server Filtering:
20+
21+
1. Set the `ServerFiltering` option of the DataSource component to `true`.
22+
1. Set the [`Filter`](/api/Kendo.Mvc.UI.Fluent/DropDownListBuilder#filterkendomvcuifiltertype) property of the DropDownList.
23+
24+
The following example demonstrates how to configure DropDownList for Server Filtering.
25+
26+
```Razor
27+
@(Html.Kendo().DropDownList()
28+
.Name("products")
29+
.DataTextField("ProductName")
30+
.DataValueField("ProductID")
31+
.Filter(FilterType.Contains)
32+
.DataSource(source =>
33+
{
34+
source.Read(read =>
35+
{
36+
read.Action("ServerFiltering_GetProducts", "DropDownList");
37+
})
38+
.ServerFiltering(true);
39+
})
40+
)
41+
```
42+
```Controller
43+
public JsonResult ServerFiltering_GetProducts(string text)
44+
{
45+
using (var northwind = GetContext())
46+
{
47+
var products = northwind.Products.Select(product => new ProductViewModel
48+
{
49+
ProductID = product.ProductID,
50+
ProductName = product.ProductName,
51+
UnitPrice = product.UnitPrice.Value,
52+
UnitsInStock = product.UnitsInStock.Value,
53+
UnitsOnOrder = product.UnitsOnOrder.Value,
54+
Discontinued = product.Discontinued
55+
});
56+
57+
if (!string.IsNullOrEmpty(text))
58+
{
59+
products = products.Where(p => p.ProductName.Contains(text));
60+
}
61+
62+
return Json(products.ToList());
63+
}
64+
}
65+
```
66+
67+
## Client Filtering
68+
69+
For smaller sets of data, the {{ site.product_short }} DropDownList also supports Client Filtering. To configure it, set the ServerFiltering property to false. This way the DropDownList dataset will be filtered on the client without sending additional requests to remote endpoint.
70+
71+
```Razor
72+
@(Html.Kendo().DropDownList()
73+
.Name("products")
74+
.DataTextField("ProductName")
75+
.DataValueField("ProductID")
76+
.Filter(FilterType.Contains)
77+
.DataSource(source =>
78+
{
79+
source.Read(read =>
80+
{
81+
read.Action("ServerFiltering_GetProducts", "DropDownList");
82+
})
83+
.ServerFiltering(false);
84+
})
85+
)
86+
```
87+
```Controller
88+
public JsonResult ServerFiltering_GetProducts()
89+
{с
90+
using (var northwind = GetContext())
91+
{
92+
var products = northwind.Products.Select(product => new ProductViewModel
93+
{
94+
ProductID = product.ProductID,
95+
ProductName = product.ProductName,
96+
UnitPrice = product.UnitPrice.Value,
97+
UnitsInStock = product.UnitsInStock.Value,
98+
UnitsOnOrder = product.UnitsOnOrder.Value,
99+
Discontinued = product.Discontinued
100+
});
101+
102+
return Json(products.ToList());
103+
}
104+
}
105+
```
106+
107+
## See Also
108+
109+
* [Grouping by the DropDownList HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdownlist/grouping)
110+
* [Server-Side API](/api/dropdownlist)

0 commit comments

Comments
 (0)