Skip to content

Merge docs-replace-clearbutton-2536 into production #2538

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 18, 2024
Merged

Merge docs-replace-clearbutton-2536 into production #2538

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions common-features/input-adornments.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi
<TelerikAutoComplete Data="@Products"
@bind-Value="@SelectedProduct"
Placeholder="Search a product..."
ClearButton="true"
ShowClearButton="true"
Width="300px">
<AutoCompletePrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Search" />
Expand All @@ -113,7 +113,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi
<TelerikComboBox Data="@Products"
@bind-Value="@SelectedProduct"
Placeholder="Search a product..."
ClearButton="true"
ShowClearButton="true"
Width="300px">
<ComboBoxPrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Search" />
Expand Down Expand Up @@ -146,7 +146,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi
<TelerikMultiSelect Data="@Products"
@bind-Value="@SelectedProducts"
Placeholder="Search products..."
ClearButton="true"
ShowClearButton="true"
Width="300px">
<MultiSelectPrefixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Search" />
Expand Down Expand Up @@ -243,7 +243,7 @@ To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct chi
<TelerikAutoComplete Data="@Products"
@bind-Value="@SelectedProduct"
Placeholder="Search a product..."
ClearButton="true"
ShowClearButton="true"
Width="300px">
<AutoCompleteSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Copy" />
Expand All @@ -257,7 +257,7 @@ To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct chi
<TelerikComboBox Data="@Products"
@bind-Value="@SelectedProduct"
Placeholder="Search a product..."
ClearButton="true"
ShowClearButton="true"
Width="300px">
<ComboBoxSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Copy" />
Expand Down Expand Up @@ -290,7 +290,7 @@ To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct chi
<TelerikMultiSelect Data="@Products"
@bind-Value="@SelectedProducts"
Placeholder="Search products..."
ClearButton="true"
ShowClearButton="true"
Width="300px">
<MultiSelectSuffixTemplate>
<TelerikSvgIcon Icon="@SvgIcon.Copy" />
Expand Down Expand Up @@ -372,7 +372,7 @@ To prevent that behavior, you may wrap the content of the prefix/suffix template
<TelerikAutoComplete Data="@Roles"
@bind-Value="@SelectedRole"
Placeholder="Enter your role (can be free text)"
ClearButton="true">
ShowClearButton="true">
<AutoCompletePrefixTemplate>
<div class="test" onkeydown="event.stopPropagation()">
<TelerikDropDownList Data="@Teams"
Expand Down
6 changes: 3 additions & 3 deletions common-features/input-validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Simple textbox-like inputs do not have any special behavior. You need to bind th
<p class="role">
<label for="roleAutoComplete">Role:</label>
<TelerikAutoComplete Data="@RoleSuggestions" @bind-Value="@person.Role" Id="roleAutoComplete"
Placeholder="Enter your role (can be free text)" ClearButton="true" />
Placeholder="Enter your role (can be free text)" ShowClearButton="true" />
<ValidationMessage For="@(() => person.Role)"></ValidationMessage>
</p>
<p class="height">
Expand Down Expand Up @@ -243,7 +243,7 @@ The ComboBox works with the `Value` of the selected item (through its `ValueFiel
<ValidationSummary />
<p class="team">
<label for="teamCombobox">Team:</label>
<TelerikComboBox @bind-Value="person.Team" Placeholder="Select team" ClearButton="true" Id="teamCombobox"
<TelerikComboBox @bind-Value="person.Team" Placeholder="Select team" ShowClearButton="true" Id="teamCombobox"
Data="@teams" TextField="MyTextField" ValueField="MyValueField">
</TelerikComboBox>
<ValidationMessage For="@(() => person.Team)"></ValidationMessage>
Expand Down Expand Up @@ -301,7 +301,7 @@ The ComboBox works with the `Value` of the selected item (through its `ValueFiel
<ValidationSummary />
<p class="team">
<label for="teamComboBox">Team:</label>
<TelerikComboBox Data="@ExistingTeams" @bind-Value="person.Team" AllowCustom="true" ClearButton="true" Id="teamComboBox"></TelerikComboBox>
<TelerikComboBox Data="@ExistingTeams" @bind-Value="person.Team" AllowCustom="true" ShowClearButton="true" Id="teamComboBox"></TelerikComboBox>
<ValidationMessage For="@(() => person.Team)"></ValidationMessage>
</p>

Expand Down
2 changes: 1 addition & 1 deletion components/autocomplete/filter.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down
4 changes: 2 additions & 2 deletions components/autocomplete/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ User input: @AutoCompleteValue
<TelerikAutoComplete Data="@Suggestions"
@bind-Value="@AutoCompleteValue"
Placeholder="Enter your role (can be free text)"
ClearButton="true" />
ShowClearButton="true" />

@code{
//Current value is null (no item is selected) which allows the Placeholder to be displayed.
Expand Down Expand Up @@ -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` <br /> (`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%}). |
Expand Down
6 changes: 3 additions & 3 deletions components/combobox/appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
</TelerikComboBox>
</div>
Expand Down Expand Up @@ -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">
</TelerikComboBox>
</div>
Expand Down Expand Up @@ -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">
</TelerikComboBox>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/combobox/filter.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
</TelerikComboBox>

Expand Down
4 changes: 2 additions & 2 deletions components/combobox/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Selected value: @selectedValue
<br />

<TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
Placeholder="Select an item..." ClearButton="true" Filterable="true">
Placeholder="Select an item..." ShowClearButton="true" Filterable="true">
</TelerikComboBox>

@code {
Expand Down Expand Up @@ -85,7 +85,7 @@ The Blazor ComboBox @[template](/_contentTemplates/dropdowns/features.md#groupin
| ----------- | ----------- | -----------|
| `AdaptiveMode` | `AdaptiveMode` <br /> (`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<TItem>` | allows you to provide the data source. Required. |
| `DebounceDelay` | `int` <br/> 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. |
Expand Down
2 changes: 1 addition & 1 deletion components/combobox/pre-select-item.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Selected value: @selectedValue
<br />

<TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
Placeholder="Select an item..." ClearButton="true" Filterable="true">
Placeholder="Select an item..." ShowClearButton="true" Filterable="true">
</TelerikComboBox>

@code {
Expand Down
6 changes: 3 additions & 3 deletions components/multicolumncombobox/appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<MultiColumnComboBoxColumns>
<MultiColumnComboBoxColumn Field="@nameof(MyDdlModel.MyTextField)"></MultiColumnComboBoxColumn>
Expand Down Expand Up @@ -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">
<MultiColumnComboBoxColumns>
<MultiColumnComboBoxColumn Field="@nameof(MyDdlModel.MyTextField)"></MultiColumnComboBoxColumn>
Expand Down Expand Up @@ -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">
<MultiColumnComboBoxColumns>
<MultiColumnComboBoxColumn Field="@nameof(MyDdlModel.MyTextField)"></MultiColumnComboBoxColumn>
Expand Down
2 changes: 1 addition & 1 deletion components/multicolumncombobox/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ The MultiColumnComboBox @[template](/_contentTemplates/dropdowns/features.md#gro
| ----------- | ----------- | -----------|
| `AdaptiveMode` | `AdaptiveMode` <br /> (`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<TItem>` | The component data. |
| `DebounceDelay` | `int` <br/> (`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. |
Expand Down
4 changes: 2 additions & 2 deletions components/multiselect/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ The <a href="https://www.telerik.com/blazor-ui/multiselect" target="_blank">Blaz
<TelerikMultiSelect Data="@Countries"
@bind-Value="@Values"
Placeholder="Enter Balkan country, e.g., Bulgaria"
Width="350px" ClearButton="true" AutoClose="false">
Width="350px" ShowClearButton="true" AutoClose="false">
</TelerikMultiSelect>
@if (Values.Count > 0)
{
Expand Down Expand Up @@ -99,7 +99,7 @@ The Blazor MultiSelect provides various parameters that allow you to configure t
| ----------- | ----------- | ------ |
| `AdaptiveMode` | `AdaptiveMode` <br /> (`None`) | The [adaptive mode]({%slug adaptive-rendering%}) of the component. |
| `AutoClose` | `bool` <br /> (`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<TItem>` | Allows you to provide the data source. Required. |
| `DebounceDelay` | `int` <br/> 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. |
Expand Down
2 changes: 1 addition & 1 deletion components/multiselect/pre-select-items.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ and
Value="@SelectedProductIDs"
ValueField="@nameof(Product.Id)"
TextField="@nameof(Product.Name)"
ClearButton="true"
ShowClearButton="true"
Placeholder="Select Products">
</TelerikMultiSelect>

Expand Down
6 changes: 3 additions & 3 deletions components/multiselect/tag-mode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
</TelerikMultiSelect>

Expand Down Expand Up @@ -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">
</TelerikMultiSelect>

Expand Down Expand Up @@ -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">
</TelerikMultiSelect>

Expand Down
4 changes: 2 additions & 2 deletions knowledge-base/combobox-clear-button-click.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<TelerikComboBox Data="@MyList" ClearButton="true"
<TelerikComboBox Data="@MyList" ShowClearButton="true"
Value="@MyItem" ValueChanged="@( (string v) => MyValueChangeHandlerString(v) )"
OnChange="@OnChangeHandlerString">
</TelerikComboBox>
Expand All @@ -63,7 +63,7 @@ Monitor the console to see when the events fire in these examples. You can use o

<hr />

<TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" ClearButton="true"
<TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" ShowClearButton="true"
Value="@selectedValue" ValueChanged="@( (int v) => MyValueChangeHandlerInt(v) )"
OnChange="@OnChangeHandlerInt">
</TelerikComboBox>
Expand Down
4 changes: 2 additions & 2 deletions knowledge-base/combobox-not-closing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Selected value: @selectedValue
<br />

<TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
Placeholder="Select an item..." ClearButton="true" >
Placeholder="Select an item..." ShowClearButton="true" >
</TelerikComboBox>

@code {
Expand Down Expand Up @@ -75,7 +75,7 @@ Selected value: @selectedValue
<br />

<TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
Placeholder="Select an item..." ClearButton="true" >
Placeholder="Select an item..." ShowClearButton="true" >
</TelerikComboBox>

@code {
Expand Down
Loading
Loading