diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index e937d94970..f7a5e80a2f 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -99,7 +99,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi @@ -113,7 +113,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi @@ -146,7 +146,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi @@ -243,7 +243,7 @@ To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct chi @@ -257,7 +257,7 @@ To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct chi @@ -290,7 +290,7 @@ To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct chi @@ -372,7 +372,7 @@ To prevent that behavior, you may wrap the content of the prefix/suffix template + ShowClearButton="true">
+ Placeholder="Enter your role (can be free text)" ShowClearButton="true" />

@@ -243,7 +243,7 @@ The ComboBox works with the `Value` of the selected item (through its `ValueFiel

- @@ -301,7 +301,7 @@ The ComboBox works with the `Value` of the selected item (through its `ValueFiel

- +

diff --git a/components/autocomplete/filter.md b/components/autocomplete/filter.md index bbe3ff22e2..05d5ef8a27 100644 --- a/components/autocomplete/filter.md +++ b/components/autocomplete/filter.md @@ -67,7 +67,7 @@ By default, the filtering is debounced with 150ms. Configure that with the [`Deb MinLength="@FilterMinLength" DebounceDelay="@AutoCompleteDebounceDelay" Placeholder="Type 's' or 'a' to see the difference" - ClearButton="true" + ShowClearButton="true" Width="300px" /> @code{ diff --git a/components/autocomplete/overview.md b/components/autocomplete/overview.md index 348c901133..20da228f63 100644 --- a/components/autocomplete/overview.md +++ b/components/autocomplete/overview.md @@ -29,7 +29,7 @@ User input: @AutoCompleteValue + ShowClearButton="true" /> @code{ //Current value is null (no item is selected) which allows the Placeholder to be displayed. @@ -94,7 +94,7 @@ The Blazor AutoComplete provides various parameters that allow you to configure | `Value` and `bind-Value` | `string` | Get/set the value of the component, can be used for binding. Use the `@bind-Value` syntax for two-way binding, for example, to a variable of your own. The `Value` must be a `string`.| | `ValueField` | `string`
(`Value`) | The name of the field from the model that will be shown as hints to the user. Not required when binding to a simple list of strings. | | `TabIndex` | `int?` | Maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key. | -| `ClearButton` | `bool` | Whether the user will have the option to clear the selected value with a button on the input. When it is clicked, the `Value` will be updated to `string.Empty`. | +| `ShowClearButton` | `bool` | Whether the user will have the option to clear the selected value with a button on the input. When it is clicked, the `Value` will be updated to `string.Empty`. | | `Enabled` | `bool` | Use this Boolean property to render a disabled Blazor AutoComplete component until certain requirements are met. | | `ReadOnly` | `bool` | If set to `true`, the component will be readonly and will not allow user input. The component is not readonly by default and allows user input. | | `MinLength` | `int` | How many characters the text has to be before the suggestions list appears. Cannot be `0`. Often works together with [filtering]({%slug autocomplete-filter%}). | diff --git a/components/combobox/appearance.md b/components/combobox/appearance.md index 34dc7dd6bc..a295c6c4be 100644 --- a/components/combobox/appearance.md +++ b/components/combobox/appearance.md @@ -47,7 +47,7 @@ You can increase or decrease the size of the ComboBox by setting the `Size` attr ValueField="MyValueField" @bind-Value="selectedValue" Placeholder="Select an item..." - ClearButton="true" + ShowClearButton="true" Filterable="true">
@@ -105,7 +105,7 @@ The `Rounded` attribute applies the `border-radius` CSS rule to the ComboBox to ValueField="MyValueField" @bind-Value="selectedValue" Placeholder="Select an item..." - ClearButton="true" + ShowClearButton="true" Filterable="true"> @@ -162,7 +162,7 @@ The `FillMode` controls how the TelerikComboBox is filled. You can set it to a m ValueField="MyValueField" @bind-Value="selectedValue" Placeholder="Select an item..." - ClearButton="true" + ShowClearButton="true" Filterable="true"> diff --git a/components/combobox/filter.md b/components/combobox/filter.md index 87c86fbb33..ecec3e64d0 100644 --- a/components/combobox/filter.md +++ b/components/combobox/filter.md @@ -60,7 +60,7 @@ By default, the filtering is debounced with 150ms. Configure that with the [`Deb FilterOperator="@FilterOperator" DebounceDelay="@DebounceDelay" Placeholder="Type digits to see filtering in action" - ClearButton="true" + ShowClearButton="true" Width="300px"> diff --git a/components/combobox/overview.md b/components/combobox/overview.md index 41182a0817..c65d01838f 100644 --- a/components/combobox/overview.md +++ b/components/combobox/overview.md @@ -27,7 +27,7 @@ Selected value: @selectedValue
+ Placeholder="Select an item..." ShowClearButton="true" Filterable="true"> @code { @@ -85,7 +85,7 @@ The Blazor ComboBox @[template](/_contentTemplates/dropdowns/features.md#groupin | ----------- | ----------- | -----------| | `AdaptiveMode` | `AdaptiveMode`
(`None`) | The [adaptive mode]({%slug adaptive-rendering%}) of the component. | | `AllowCustom` | `bool` | whether the user can enter [custom values]({%slug components/combobox/custom-value%}). If enabled, the `ValueField` must be a `string`. | -| `ClearButton` | `bool` | whether the user will have the option to clear the selected value. When it is clicked, the `Value` will be updated to `default(TValue)`, so there must be no item in the `Data` that has such a `Value`. For example, if `TValue` is `int`, clearing the value will lead to a `0` `Value`, so if there is an Item with `0` in its `ValueField` - issues may arise with its selection. This feature can often go together with `AllowCustom`. | +| `ShowClearButton` | `bool` | whether the user will have the option to clear the selected value. When it is clicked, the `Value` will be updated to `default(TValue)`, so there must be no item in the `Data` that has such a `Value`. For example, if `TValue` is `int`, clearing the value will lead to a `0` `Value`, so if there is an Item with `0` in its `ValueField` - issues may arise with its selection. This feature can often go together with `AllowCustom`. | | `Data` | `IEnumerable` | allows you to provide the data source. Required. | | `DebounceDelay` | `int`
150 | Time in milliseconds between the last typed symbol and the internal `oninput` event firing. Applies when the user types and filters. Use it to balance between client-side performance and number of database queries. | | `Enabled` | `bool` | whether the component is enabled. | diff --git a/components/combobox/pre-select-item.md b/components/combobox/pre-select-item.md index 3c2a79ce3e..5d880fad54 100644 --- a/components/combobox/pre-select-item.md +++ b/components/combobox/pre-select-item.md @@ -22,7 +22,7 @@ Selected value: @selectedValue
+ Placeholder="Select an item..." ShowClearButton="true" Filterable="true"> @code { diff --git a/components/multicolumncombobox/appearance.md b/components/multicolumncombobox/appearance.md index af45b373f2..b1b7922ff8 100644 --- a/components/multicolumncombobox/appearance.md +++ b/components/multicolumncombobox/appearance.md @@ -47,7 +47,7 @@ You can increase or decrease the size of the MultiColumnComboBox by setting the ValueField="MyValueField" @bind-Value="selectedValue" Placeholder="Select an item..." - ClearButton="true" + ShowClearButton="true" Filterable="true"> @@ -109,7 +109,7 @@ The `Rounded` attribute applies the `border-radius` CSS rule to the MultiColumnC ValueField="MyValueField" @bind-Value="selectedValue" Placeholder="Select an item..." - ClearButton="true" + ShowClearButton="true" Filterable="true"> @@ -170,7 +170,7 @@ The `FillMode` controls how the TelerikMultiColumnComboBox is filled. You can se ValueField="MyValueField" @bind-Value="selectedValue" Placeholder="Select an item..." - ClearButton="true" + ShowClearButton="true" Filterable="true"> diff --git a/components/multicolumncombobox/overview.md b/components/multicolumncombobox/overview.md index 138beb1f29..2bf8564018 100644 --- a/components/multicolumncombobox/overview.md +++ b/components/multicolumncombobox/overview.md @@ -111,7 +111,7 @@ The MultiColumnComboBox @[template](/_contentTemplates/dropdowns/features.md#gro | ----------- | ----------- | -----------| | `AdaptiveMode` | `AdaptiveMode`
(`None`) | The [adaptive mode]({%slug adaptive-rendering%}) of the component. | | `AllowCustom` | `bool` | Determines if the user can enter [custom values]({%slug multicolumncombobox-custom-value%}). If enabled, the `ValueField` must be a `string`. | -| `ClearButton` | `bool` | Displays a clear button inside the input. When it is clicked, the `Value` will change to `default(TValue)`, so there must be no item in the `Data` that has such a `Value`. For example, if `TValue` is `int`, there should be no data item with `0` in its `ValueField`, otherwise selection issues may occur. | +| `ShowClearButton` | `bool` | Displays a clear button inside the input. When it is clicked, the `Value` will change to `default(TValue)`, so there must be no item in the `Data` that has such a `Value`. For example, if `TValue` is `int`, there should be no data item with `0` in its `ValueField`, otherwise selection issues may occur. | | `Data` | `IEnumerable` | The component data. | | `DebounceDelay` | `int`
(`150`) | The time in milliseconds between the last typed symbol and the internal `oninput` event firing. Applies when the user types and filters. Use it to balance between client-side performance and number of database queries. | | `Enabled` | `bool` | Whether the user can interact with the component. | diff --git a/components/multiselect/overview.md b/components/multiselect/overview.md index 8a31bca97d..149c74caa3 100644 --- a/components/multiselect/overview.md +++ b/components/multiselect/overview.md @@ -29,7 +29,7 @@ The Blaz + Width="350px" ShowClearButton="true" AutoClose="false"> @if (Values.Count > 0) { @@ -99,7 +99,7 @@ The Blazor MultiSelect provides various parameters that allow you to configure t | ----------- | ----------- | ------ | | `AdaptiveMode` | `AdaptiveMode`
(`None`) | The [adaptive mode]({%slug adaptive-rendering%}) of the component. | | `AutoClose` | `bool`
(`true`) | Defines whether the dropdown list containing the items for the MultiSelect will automatically close after each user selection. | -| `ClearButton` | `bool` | Whether the user will have the option to clear the selected items with a button on the input. When it is clicked, the `Value` will be updated to an empty list. | +| `ShowClearButton` | `bool` | Whether the user will have the option to clear the selected items with a button on the input. When it is clicked, the `Value` will be updated to an empty list. | | `Data` | `IEnumerable` | Allows you to provide the data source. Required. | | `DebounceDelay` | `int`
150 | Time in milliseconds between the last typed symbol and the internal `oninput` event firing. Applies when the user types and filters. Use it to balance between client-side performance and number of database queries. | | `Enabled` | `bool` | Whether the component is enabled. | diff --git a/components/multiselect/pre-select-items.md b/components/multiselect/pre-select-items.md index 00ac425481..a42a96655c 100644 --- a/components/multiselect/pre-select-items.md +++ b/components/multiselect/pre-select-items.md @@ -32,7 +32,7 @@ and Value="@SelectedProductIDs" ValueField="@nameof(Product.Id)" TextField="@nameof(Product.Name)" - ClearButton="true" + ShowClearButton="true" Placeholder="Select Products"> diff --git a/components/multiselect/tag-mode.md b/components/multiselect/tag-mode.md index ae05caddaa..733b8b02cd 100644 --- a/components/multiselect/tag-mode.md +++ b/components/multiselect/tag-mode.md @@ -34,7 +34,7 @@ To use the single tag mode, set the `TagMode` parameter to `MultiSelectTagMode.S TagMode="@MultiSelectTagMode.Single" Placeholder="Enter Balkan country, e.g., Bulgaria" Width="350px" - ClearButton="true" + ShowClearButton="true" AutoClose="false"> @@ -73,7 +73,7 @@ When the multiple tag mode is enabled, each selected item will be displayed as a TagMode="@MultiSelectTagMode.Multiple" Placeholder="Enter Balkan country, e.g., Bulgaria" Width="350px" - ClearButton="true" + ShowClearButton="true" AutoClose="false"> @@ -113,7 +113,7 @@ To restrict the allowed number of individual tags, use the `MaxAllowedTags` para MaxAllowedTags="2" Placeholder="Enter Balkan country, e.g., Bulgaria" Width="350px" - ClearButton="true" + ShowClearButton="true" AutoClose="false"> diff --git a/knowledge-base/combobox-clear-button-click.md b/knowledge-base/combobox-clear-button-click.md index 0078191cb8..5972dce27d 100644 --- a/knowledge-base/combobox-clear-button-click.md +++ b/knowledge-base/combobox-clear-button-click.md @@ -36,7 +36,7 @@ What you need to do is to check if the new value that comes in is the `default` ````CSHTML Monitor the console to see when the events fire in these examples. You can use only one of the events, this sample showcases both so you can see the options. - @@ -63,7 +63,7 @@ Monitor the console to see when the events fire in these examples. You can use o
- diff --git a/knowledge-base/combobox-not-closing.md b/knowledge-base/combobox-not-closing.md index 666848d9da..ccc1ca797f 100644 --- a/knowledge-base/combobox-not-closing.md +++ b/knowledge-base/combobox-not-closing.md @@ -39,7 +39,7 @@ Selected value: @selectedValue
+ Placeholder="Select an item..." ShowClearButton="true" > @code { @@ -75,7 +75,7 @@ Selected value: @selectedValue
+ Placeholder="Select an item..." ShowClearButton="true" > @code { diff --git a/knowledge-base/dropdown-kb-bind-to-enum.md b/knowledge-base/dropdown-kb-bind-to-enum.md index fb5946ecc2..e9f6989081 100644 --- a/knowledge-base/dropdown-kb-bind-to-enum.md +++ b/knowledge-base/dropdown-kb-bind-to-enum.md @@ -40,7 +40,7 @@ Here are examples of both. @* for a combo box, make sure that custom values and clearing are not available unless you are explicitly OK with that *@ - + @code{ string CurrValue { get; set; } diff --git a/knowledge-base/dropdowns-readonly-struct-error.md b/knowledge-base/dropdowns-readonly-struct-error.md index b197b39bc5..8051c484df 100644 --- a/knowledge-base/dropdowns-readonly-struct-error.md +++ b/knowledge-base/dropdowns-readonly-struct-error.md @@ -39,7 +39,7 @@ Selected value: @selectedValue
+ Placeholder="Select an item..." ShowClearButton="true" Filterable="true"> @code { @@ -77,6 +77,6 @@ There are two approaches to avoiding this error: + Placeholder="Select an item..." ShowClearButton="true" Filterable="false"> diff --git a/knowledge-base/inputs-align-text-right.md b/knowledge-base/inputs-align-text-right.md index 9eb128dbfb..0f98a97e01 100644 --- a/knowledge-base/inputs-align-text-right.md +++ b/knowledge-base/inputs-align-text-right.md @@ -63,7 +63,7 @@ The example below shows how to align a numeric textbox and a combo box to the ri

ComboBox - Right alignment

+ Placeholder="Select an item..." ShowClearButton="true" Filterable="true" Class="myCombobox"> diff --git a/knowledge-base/multiselect-always-select-item-limit-total.md b/knowledge-base/multiselect-always-select-item-limit-total.md index 0359c753ba..214ed44a4e 100644 --- a/knowledge-base/multiselect-always-select-item-limit-total.md +++ b/knowledge-base/multiselect-always-select-item-limit-total.md @@ -50,7 +50,7 @@ You can find two examples below that showcase doing this: + ShowClearButton="false">
    @@ -100,7 +100,7 @@ You can find two examples below that showcase doing this: Value="@myFormModel.TheValues" ValueChanged="@( (List v) => MyValueChangeHandler(v) )" ValueExpression="@( () => myFormModel.TheValues )" - ClearButton="false"> + ShowClearButton="false">
    Submit diff --git a/styling-and-themes/override-theme-styles.md b/styling-and-themes/override-theme-styles.md index e1762b81cc..b90a60a671 100644 --- a/styling-and-themes/override-theme-styles.md +++ b/styling-and-themes/override-theme-styles.md @@ -78,7 +78,7 @@ The example below demonstrates using custom CSS classes with the Grid and the Co TextField="@nameof(Product.Name)" ValueField="@nameof(Product.Id)" Filterable="true" - ClearButton="true"> + ShowClearButton="true">