You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: controls/radmenu/features/icons.md
+38-19Lines changed: 38 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Icons
3
3
page_title: Icons
4
-
description: Check our "Icons" documentation article for the RadMenu {{ site.framework_name }} control.
4
+
description: Check our "Icons" documentation article for the RadMenu WPF control.
5
5
slug: radmenu-features-icons
6
6
tags: icons
7
7
published: True
@@ -10,16 +10,15 @@ position: 5
10
10
11
11
# Icons
12
12
13
-
The __RadMenu__ allows you to display an icon for each of the menu items. This can be done by setting the __Icon__ property of the __RadMenuItem__. For the icon to be displayed as expected, you have to either provide an element of type __Image__ for it or also set the **IconTemplate** property of the item.
13
+
The `RadMenu` allows you to display an icon for each of the menu items. This can be done by setting the `Icon` property of the `RadMenuItem`. For the icon to be displayed as expected, you have to either provide an element of type `Image` for it or also set the `IconTemplate` property of the item.
14
14
15
15
## Setting the Icon of a Static Item
16
16
17
-
>tipTo learn more about this way of populating the __RadMenu__ with static data take a look at the [Using Static Items]({%slug radmenu-populating-with-data-using-static-items%}) topic.
17
+
>tipTo learn more about this way of populating the RadMenu with static data take a look at the [Using Static Items]({%slug radmenu-populating-with-data-using-static-items%}) topic.
18
18
19
-
When using static items you can directly access the __Icon__ property of each item. Respectively you can set it directly:
20
-
21
-
__Example 1: Setting the Icon property declaratively__
19
+
When using static items you can directly access the Icon property of each item. Respectively you can set it directly:
#### Figure 1: RadMenuItems with their Icon property set
31
+
__RadMenuItems with their Icon property set__
35
32
36
33
37
34
38
35
## Setting the Icon of a Dynamic Item
39
36
40
-
>tipTo learn more about this way of populating the __RadMenu__ with dynamic data take a look at the [Binding to Dynamic Data]({%slug radmenu-populating-with-data-binding-to-dynamic-data%}) topic.
37
+
>tipTo learn more about this way of populating the RadMenu with dynamic data take a look at the [Binding to Dynamic Data]({%slug radmenu-populating-with-data-binding-to-dynamic-data%}) topic.
41
38
42
-
When using dynamic items, you have to bind the __Icon__ property to a property of the data item. The specific here is that your data item needs to either expose a property of type __Image__, so the __Icon__ property can be bound properly or you need to define the **IconTemplate** property of the menu items if you wish to bind it to a **string** or **Uri**, for example.
39
+
When using dynamic items, you have to bind the Icon property to a property of the data item. The specific here is that your data item needs to either expose a property of type Image, so the Icon property can be bound properly or you need to define the IconTemplate property of the menu items if you wish to bind it to a `string` or `Uri`, for example.
43
40
44
41
Let's assume you've defined the following class which exposes the icon Uri as well as a read-only property which returns an image from this Uri.
45
42
46
-
__Example 2: MenuItem class with Uri and Image properties__
47
-
43
+
__MenuItem class with Uri and Image properties__
48
44
```C#
49
45
publicclassMenuItem
50
46
{
@@ -90,12 +86,11 @@ __Example 2: MenuItem class with Uri and Image properties__
90
86
EndClass
91
87
```
92
88
93
-
You can then bind the Icon using any of the two properties. Following the example from the [Binding to Dynamic Data]({%slug radmenu-populating-with-data-binding-to-dynamic-data%}) article, you can add the following setters to **ItemContainerStyle**.
89
+
You can then bind the Icon using any of the two properties. Following the example from the [Binding to Dynamic Data]({%slug radmenu-populating-with-data-binding-to-dynamic-data%}) article, you can add the following setters to `ItemContainerStyle`.
94
90
95
91
* If you wish to bind directly to a property of type Image:
96
92
97
-
__Example 2: Setting the Icon property to an Image__
98
-
93
+
__Setting the Icon property to an Image__
99
94
```XAML
100
95
<!-- If you are using the NoXaml binaries, you will have to base the style on the default one for the theme like so:
@@ -131,10 +125,35 @@ You can then bind the Icon using any of the two properties. Following the exampl
131
125
132
126
Both approaches will lead to the same results as when you set the icon declaratively.
133
127
134
-
#### Figure 2: Dynamic RadMenuItems with their icons
128
+
__Dynamic RadMenuItems with their icons__
135
129
136
130
137
131
132
+
## Setting the Icon Position
133
+
134
+
The `RadMenuItem` element exposes the `ItemIconPosition` property that allows for specifying the location of the icon. It is of the type of `ItemIconPosition`, which exposes the following two options:
135
+
136
+
*`Left`—The icon will be displayed on the left side of the RadMenuItem's content. This is the default value.
137
+
*`Right`—The icon will be displayed on the right side of the RadMenuItem's content.
138
+
139
+
__Setting the ItemIconPosition property to Right__
The article lists the most important properties and methods of __RadMultiColumnComboBox__.
13
+
The article lists the most important properties and methods of `RadMultiColumnComboBox`.
14
14
15
15
## Text Change Without Delay
16
16
17
-
By default, the reaction of __RadMultiColumnComboBox__ to a text change will be deferred. In case when updating needs to be done immediately, the __DeferTextChange__ property can be set to __False__.
17
+
By default, the reaction of RadMultiColumnComboBox to a text change will be deferred. In case when updating needs to be done immediately, the `DeferTextChange` property can be set to __False__.
18
18
19
19
## Disable Items Highlighting
20
20
21
-
With all settings for its __AutoCompleteMode, RadMultiColumnComboBox__ will highlight its items. This can be switched off by setting the __HighlightMatches__ property to __False__.
21
+
With all settings for its AutoCompleteMode, RadMultiColumnComboBox will highlight its items. This can be switched off by setting the `HighlightMatches` property to __False__.
22
22
23
23
## Setting Text for an Empty Selection
24
24
25
-
When there is no selection applied, the control will display an empty AutoCompleteBox. In case a custom text needs to be displayed in it, the __NullText__ property comes in handy.
25
+
When there is no selection applied, the control will display an empty AutoCompleteBox. In case a custom text needs to be displayed in it, the `NullText` property comes in handy.
@@ -34,51 +34,56 @@ __Example 1: Setting the NullText property__
34
34
</telerik:RadMultiColumnComboBox>
35
35
```
36
36
37
-
#### __Figure 1: MultiColumnComboBox with NullText set__
37
+
__MultiColumnComboBox with NullText set__
38
+
38
39
39
40
40
41
## Open,Close and Toggle the DropDown
41
42
42
43
The following set of methods is provided for manipulating the visibility of the DropDown.
43
44
44
-
*__OpenDropDown__: Opens the DropDown if it is closed.
45
-
*__CloseDropDown__: Closes the DropDown if it is opened.
46
-
*__ToggleDropDown__: Toggles the opened/closed state of the DropDown.
45
+
*`OpenDropDown`—Opens the DropDown if it is closed.
46
+
*`CloseDropDown`—Closes the DropDown if it is opened.
47
+
*`ToggleDropDown`—Toggles the opened/closed state of the DropDown.
47
48
48
-
## DropDownElementStyle
49
+
## Drop Down Element Style
49
50
50
-
Since __R1 2019 SP1__, RadMultiColumnComboBox exposes the __DropDownElementStyle__ property. Through it, you can get or set a Style that will be applied to the dropdown element.
51
+
RadMultiColumnComboBox exposes the `DropDownElementStyle` property. Through it, you can get or set a Style that will be applied to the dropdown element.
51
52
52
53
> The TargetType of the Style should match the type of the dropdown element.
53
54
54
55
## Search Mode
55
56
56
-
With **R2 2019** we introduced a new **SearchMode** property which allows you to control how items are matched when search is executed. It has the following two possible values:
57
-
58
-
***MatchAnyTerm**: Items match the search operation when they fulfill any of the search terms. For example, if `John Terry` is inputted, items containing **any** of the terms "John" and "Terry" in any of their properties will be matched. This is the **default** value.
59
-
***MatchAllTerms**: Items match the search operation only when they fulfill all of the search terms. Continuing with the previous example, if `John Terry` is entered as the search text, only items which contain **both** terms ("John" and "Terry") in any of their properties will be matched.
60
-
61
-
>important The SearchMode property takes effect only if the **AutoCompleteMode** of the control is **Search**.
57
+
The RadMultiColumnComboBox exposes a new `SearchMode` property which allows you to control how items are matched when search is executed. It has the following two possible values:
62
58
63
-
## SelectionOnFocus
59
+
*`MatchAnyTerm`—Items match the search operation when they fulfill any of the search terms. For example, if `John Terry` is inputted, items containing __any__ of the terms "John" and "Terry" in any of their properties will be matched. This is the default value.
60
+
*`MatchAllTerms`—Items match the search operation only when they fulfill all of the search terms. Continuing with the previous example, if `John Terry` is entered as the search text, only items which contain __both__ terms ("John" and "Terry") in any of their properties will be matched.
64
61
65
-
With the **R3 2020 SP1 version**, the __SelectionOnFocus__property of the __RadMultiColumnComboBox__ control was introduced, which allows you to specify what will happen with the cursor when the control gets focus.
62
+
>important The SearchMode property takes effect only if the `AutoCompleteMode` of the control is `Search`.
66
63
67
-
> This property is respected when the **SelectionBoxesVisibility** property is set to **Collapsed**.
64
+
## Selection On Focus
68
65
69
-
The values for the __SelectionOnFocus__ property are predefined in the __SelectionOnFocus__ enumeration. It exposes the following members:
66
+
The RadMultiColumnComboBox control exposes the `SelectionOnFocus` property, which allows you to specify what will happen with the cursor when the control gets focus.
70
67
71
-
*__SelectAll__: Once the control is focused, it will select its whole text.
68
+
> This property is respected when the `SelectionBoxesVisibility` property is set to `Collapsed`.
72
69
73
-
*__CaretToBeginning__: Once the control is focused, the cursor will be positioned at its beginning.
70
+
The values for the SelectionOnFocus property are predefined in the `SelectionOnFocus` enumeration. It exposes the following members:
74
71
75
-
*__CaretToEnd__: Once the control is focused, the cursor will be positioned at its end.
72
+
*`SelectAll`—Once the control is focused, it will select its whole text.
73
+
*`CaretToBeginning`—Once the control is focused, the cursor will be positioned at its beginning.
74
+
*`CaretToEnd`—Once the control is focused, the cursor will be positioned at its end.
75
+
*`Unchanged`—Once the control is focused, the cursor's position won't be changed. This is the default value for the SelectionOnFocus property.
76
+
*`Default`—Once the control is focused, the cursor will be positioned at its end.
77
+
*`DefaultSelectAll`—This property changes the SelectionOnFocus behavior of the control depending on the source of the focus. If the control is focused on mouse click, the Default SelectionOnFocus behavior will be used. If, on the other hand, the control is focused using the __Tab__ key, the SelectAll SelectionOnFocus behavior will be used.
76
78
77
-
*__Unchanged__: Once the control is focused, the cursor's position won't be changed. This is the __default value__ for the __SelectionOnFocus__ property.
79
+
## Clear Selection On Delete Or Back Key
78
80
79
-
*__Default__: Once the control is focused, the cursor will be positioned at its end.
81
+
The RadMultiColumnComboBox control provides the ability to control if the selected item/s will be removed when pressing the Delete or Back key when typing into the input box. This is done via the `ClearSelectionOnDeleteOrBackKey` property and its default value is __True__. Setting it to __False__ will prevent the removal of selected items when pressing the into the input box
80
82
81
-
*__DefaultSelectAll__: This property changes the __SelectionOnFocus__ behavior of the control depending on the source of the focus. If the control is focused on mouse click, the __Default SelectionOnFocus__ behavior will be used. If, on the other hand, the control is focused using the __Tab__ key, the __SelectAll SelectionOnFocus__ behavior will be used.
83
+
__Setting the ClearSelectionOnDeleteOrBackKey property__
0 commit comments