Skip to content

chore(selects): Optimize reference documentation #2981

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.

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
52 changes: 1 addition & 51 deletions components/autocomplete/data-bind.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,57 +92,7 @@ To bind the AutoComplete to a model:
}
````

## Considerations

### Reference

The AutoComplete is a generic component and its type depends on the type of its `Data` and `Value`.

<div class="skip-repl"></div>
````RAZOR String
@*Reference when binding to a string collection*@

<TelerikAutoComplete @ref="@AutoCompleteRef"
Data="@Suggestions"
@bind-Value="@AutoCompleteValue" />

@code{
private TelerikAutoComplete<string> AutoCompleteRef { get; set; }

private string AutoCompleteValue { get; set; }

private List<string> Suggestions { get; set; } = new List<string> { "first", "second", "third" };
}
````
````RAZOR Model
@*Reference when binding to a model collection*@

<TelerikAutoComplete @ref="@AutoCompleteRef"
Data="@Suggestions"
@bind-Value="@AutoCompleteValue"
ValueField="@( nameof(SuggestionsModel.Suggestion) )" />

@code{
private TelerikAutoComplete<SuggestionsModel> AutoCompleteRef { get; set; }

private string AutoCompleteValue { get; set; }

private List<SuggestionsModel> Suggestions { get; set; } = new List<SuggestionsModel>
{
new SuggestionsModel { Suggestion = "first", SomeOtherField = 1 },
new SuggestionsModel { Suggestion = "second", SomeOtherField = 2 },
new SuggestionsModel { Suggestion = "third", SomeOtherField = 3 }
};

public class SuggestionsModel
{
public string Suggestion { get; set; }//the auto complete needs only the string field
public int SomeOtherField { get; set; }
}
}
````

### Missing Data
## Missing Data

The AutoComplete is, essentially, a textbox. This means that its `Value` is always a string and it is up to you to bind and/or use it. The `Data` parameter, however, is required for the functionality of the component, and it must never be `null`. If there are no suggestions that you wish to provide to the user, consider using a regular TextBox, or creating an empty collection.

Expand Down
4 changes: 1 addition & 3 deletions components/autocomplete/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,7 @@ The AutoComplete provides the following popup settings:

## AutoComplete Reference and Methods

The AutoComplete is a generic component and its type is determined by the type of the model you use as its data source. You can find examples in the [Data Bind - Considerations](slug:autocomplete-databind#considerations) article.

Add a reference to the component instance to use the [AutoComplete's methods](slug:Telerik.Blazor.Components.TelerikAutoComplete-1).
Add a reference to the component instance to use the [AutoComplete's methods](slug:Telerik.Blazor.Components.TelerikAutoComplete-1). Note that the [AutoComplete is a generic component](slug:common-features-data-binding-overview#component-type).

@[template](/_contentTemplates/dropdowns/methods.md#methods-list)

Expand Down
60 changes: 1 addition & 59 deletions components/combobox/data-bind.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ There are also some considerations you may find useful, such as showing the `Pla

* [Considerations](#considerations)
* [Value Out of Range](#value-out-of-range)
* [Component Reference](#component-reference)
* [Missing Value or Data](#missing-value-or-data)

## Strings and Value Types
Expand Down Expand Up @@ -105,7 +104,7 @@ To bind the ComboBox to a model:

## Considerations

The ComboBox component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](#component-reference) and what happens [if you can't provide data or a value](#missing-value-or-data). Providing a [value that is not in the data source](#value-out-of-range) needs to be taken into account be the app, because the component will not change it.
The ComboBox component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](slug:common-features-data-binding-overview#component-type) and what happens [if you can't provide data or a value](#missing-value-or-data). Providing a [value that is not in the data source](#value-out-of-range) needs to be taken into account be the app, because the component will not change it.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Double-check this fragment: into account be the app.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There seem to be several instances of this phrase across the set. Address them all, if needed.


### Value Out of Range

Expand All @@ -119,63 +118,6 @@ Handling such "unexpected" values is up to the application - for example, throug

When `AllowCustom="true"`, what the user types in the input will be set to the `Value` of the component regardless of the data source.

### Component Reference

The ComboBox is a generic component and its type depends on the type of its `Data` and `Value`.

<div class="skip-repl"></div>
````RAZOR String
@*ComboBox reference when binding to a string collection*@

<TelerikComboBox @ref="ComboBoxRef"
Data="@ComboBoxData"
Value="@ComboBoxValue">
</TelerikComboBox>

@code {
private TelerikComboBox<string, string>? ComboBoxRef { get; set; }

private List<string> ComboBoxData = new List<string>() { "first", "second", "third" };

private string ComboBoxValue { get; set; } = string.Empty;

protected override void OnInitialized()
{
ComboBoxValue = "third";
}
}
````
````RAZOR Model
@*ComboBox reference when binding to a model collection*@

<TelerikComboBox @ref="@ComboBoxRef"
Data="@ComboBoxData"
@bind-Value="@ComboBoxValue"
TextField="@nameof(ComboBoxItem.MyTextField)"
ValueField="@nameof(ComboBoxItem.MyValueField)">
</TelerikComboBox>

@code {
private TelerikComboBox<ComboBoxItem, int>? ComboBoxRef { get; set; }

private IEnumerable<ComboBoxItem> ComboBoxData = Enumerable.Range(1, 20)
.Select(x => new ComboBoxItem { MyTextField = "Item " + x, MyValueField = x });

private int ComboBoxValue { get; set; }

protected override void OnInitialized()
{
ComboBoxValue = 3;
}

public class ComboBoxItem
{
public int MyValueField { get; set; }
public string MyTextField { get; set; } = string.Empty;
}
}
````

### Missing Value or Data

In case you cannot provide strongly-typed `Value` or `Data` at compile time, you need to set the corresponding type properties to the `TItem` and `TValue` properties as shown below.
Expand Down
3 changes: 1 addition & 2 deletions components/combobox/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,8 @@ The ComboBox provides the following popup settings:

## ComboBox Reference and Methods

The ComboBox is a generic component and its type is determined by the type of the model you pass to it, and the type of its value field. You can find examples in the [Data Bind - Considerations](slug:components/combobox/databind#considerations) article.
Add a reference to the component instance to use the [ComboBox's methods](slug:Telerik.Blazor.Components.TelerikComboBox-2). Note that the [ComboBox is a generic component](slug:common-features-data-binding-overview#component-type).

Add a reference to the component instance to use the [ComboBox's methods](slug:Telerik.Blazor.Components.TelerikComboBox-2).

@[template](/_contentTemplates/dropdowns/methods.md#methods-list)

Expand Down
54 changes: 1 addition & 53 deletions components/dropdownlist/data-bind.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ There are also some considerations you may find useful, such as showing the `Def

* [Considerations](#considerations)
* [Value Out of Range](#value-out-of-range)
* [Component Reference](#component-reference)
* [Missing Value or Data](#missing-value-or-data)

## Strings or Value Types
Expand Down Expand Up @@ -93,7 +92,7 @@ To bind the DropDownList to a model:

## Considerations

The DropDownList component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](#component-reference) and what happens [if you can't provide data or a value](#missing-value-or-data). Providing a [value that is not in the data source](#value-out-of-range) needs to be taken into account be the app, because the component will not change it.
The DropDownList component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](slug:common-features-data-binding-overview#component-type) and what happens [if you can't provide data or a value](#missing-value-or-data). Providing a [value that is not in the data source](#value-out-of-range) needs to be taken into account be the app, because the component will not change it.

### Value Out of Range

Expand All @@ -102,57 +101,6 @@ When the `Value` the application provides does not match any of the values prese
If you have set the `DefaultText` and the `Value` matches the `default` value of the type (for example, `0` for an `int` or `null` for an `int?` or `string`), you will see the `DefaultText`. A `Value` that is non-`default` will not show the `DefaultText`.

Handling such "unexpected" values is up to the application - for example, through defensive checks, or through form validation, or by first checking what is present in the data source before setting a new `Value`.

### Component Reference

The DropDownList is a generic component and its type depends on the type of its `Data` and `Value`.

<div class="skip-repl"></div>
````RAZOR String
<TelerikDropDownList @ref="@DropDownListRef"
Data="@DropDownListData"
@bind-Value="DropDownListValue" />

@code {
private TelerikDropDownList<string, string>? DropDownListRef { get; set; }

private List<string> DropDownListData = new List<string>() { "first", "second", "third" };

private string DropDownListValue { get; set; } = string.Empty;

protected override void OnInitialized()
{
DropDownListValue = "second";
}
}
````
````RAZOR Model
<TelerikDropDownList @ref="@DropDownListRef"
Data="@DropDownListData"
@bind-Value="DropDownListValue"
TextField="@nameof(DropDownListItem.Text)"
ValueField="@nameof(DropDownListItem.Value)" />

@code {
private TelerikDropDownList<DropDownListItem, int>? DropDownListRef { get; set; }

private int DropDownListValue { get; set; }

private IEnumerable<DropDownListItem> DropDownListData = Enumerable.Range(1, 20)
.Select(x => new DropDownListItem { Text = $"Item {x}", Value = x });

protected override void OnInitialized()
{
DropDownListValue = 3;
}

public class DropDownListItem
{
public int Value { get; set; }
public string Text { get; set; } = string.Empty;
}
}
````

### Missing Value or Data

Expand Down
3 changes: 1 addition & 2 deletions components/dropdownlist/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,8 @@ The DropDownList provides the following popup settings:

## DropDownList Reference and Methods

The DropDownList is a generic component and its type comes from the model it is bound to and from the value field type. See the [Component Reference](slug:components/dropdownlist/databind#component-reference) section in the Data Binding article for details and examples.
Add a reference to the component instance to use the [DropDownList's methods](slug:Telerik.Blazor.Components.TelerikDropDownList-2). Note that the [DropDownList is a generic component](slug:common-features-data-binding-overview#component-type).

Add a reference to the component instance to use the [DropDownList's methods](slug:Telerik.Blazor.Components.TelerikDropDownList-2).

@[template](/_contentTemplates/dropdowns/methods.md#methods-list)

Expand Down
2 changes: 1 addition & 1 deletion components/multicolumncombobox/data-bind.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Missing selection is most common when:

## Missing Value or Data

The MultiColumnCombobox component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects its [object reference](slug:multicolumncombobox-overview#component-reference-and-methods).
The MultiColumnCombobox component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects its [object reference](slug:common-features-data-binding-overview#component-type).

In case you cannot provide either the `Value` or `Data` initially, you need to [set the corresponding types to the `TItem` and `TValue` parameters](slug:common-features-data-binding-overview#component-type).

Expand Down
6 changes: 1 addition & 5 deletions components/multicolumncombobox/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,11 +166,7 @@ The MultiColumnComboBox provides the following popup settings:

## Component Reference and Methods

To execute MultiColumnComboBox methods, obtain reference to the component instance via `@ref`.

The MultiColumnComboBox is a generic component. Its type depends on the type of its model and the type of its `Value`. In case you cannot provide either the `Value` or `Data` initially, you need to [set the corresponding types to the `TItem` and `TValue` parameters](slug:common-features-data-binding-overview#component-type).

The table below lists the MultiComboBox methods. Also consult the [MultiColumnComboBox API](slug:Telerik.Blazor.Components.TelerikMultiColumnComboBox-2).
Add a reference to the component instance to use the [MultiColumnComboBox's methods](slug:Telerik.Blazor.Components.TelerikMultiColumnComboBox-2). Note that the [MultiColumnComboBox is a generic component](slug:common-features-data-binding-overview#component-type).

| Method | Description |
| --- | --- |
Expand Down
52 changes: 1 addition & 51 deletions components/multiselect/data-bind.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,57 +128,7 @@ To bind the MultiSelect to a model:

## Considerations

The MultiSelect component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](#reference) and what happens [if you can't provide data or a value](#missing-value-or-data).

### Reference

The MultiSelect is a generic component and its type depends on the type of its `Data` and `Value`.

<div class="skip-repl"></div>
````RAZOR String
@*Reference type when binding to a string collection*@

<TelerikMultiSelect @ref="@MultiSelectRef"
Data="@MultiSelectData"
@bind-Value="@MultiSelectValue" />

@code {
private TelerikMultiSelect<string, string>? MultiSelectRef { get; set; }

private List<string> MultiSelectValue { get; set; } = new();

private List<string> MultiSelectData { get; set; } = new List<string> { "first", "second", "third" };
}
````
````RAZOR Model
@*Reference when binding to a model collection*@

<TelerikMultiSelect @ref="@MultiSelectRef"
Data="@MultiSelectData"
@bind-Value="@MultiSelectValue"
TextField="@nameof(MultiSelectItem.Text)"
ValueField="@nameof(MultiSelectItem.Value)" />

@code {
private TelerikMultiSelect<MultiSelectItem, int>? MultiSelectRef { get; set; }

private List<int> MultiSelectValue { get; set; } = new();

private List<MultiSelectItem> MultiSelectData { get; set; } = new List<MultiSelectItem>()
{
new MultiSelectItem { Text = "first", Value = 1 },
new MultiSelectItem { Text = "second", Value = 2 },
new MultiSelectItem { Text = "third", Value = 3 }
};

public class MultiSelectItem
{
public string Text { get; set; } = string.Empty;

public int Value { get; set; }
}
}
````
The MultiSelect component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](slug:common-features-data-binding-overview#component-type) and what happens [if you can't provide data or a value](#missing-value-or-data).

### Missing Value Or Data

Expand Down
3 changes: 1 addition & 2 deletions components/multiselect/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,9 +165,8 @@ The MultiSelect provides the following popup settings:

## MultiSelect Reference and Methods

The MultiSelect is a generic component and its type is determined by the type of the model you use as its data source. You can find examples in the [Data Bind - Considerations](slug:multiselect-databind#considerations) article.
Add a reference to the component instance to use the [MultiSelect's methods](slug:Telerik.Blazor.Components.TelerikMultiSelect-2). Note that the [MultiSelect is a generic component](slug:common-features-data-binding-overview#component-type).

Add a reference to the component instance to use the [MultiSelect's methods](slug:Telerik.Blazor.Components.TelerikMultiSelect-2).

@[template](/_contentTemplates/dropdowns/methods.md#methods-list)

Expand Down
Loading