diff --git a/_contentTemplates/common/ai-coding-assistant.md b/_contentTemplates/common/ai-coding-assistant.md new file mode 100644 index 000000000..3384d2abe --- /dev/null +++ b/_contentTemplates/common/ai-coding-assistant.md @@ -0,0 +1,3 @@ +#number-of-requests +A Telerik [Subscription license](https://www.telerik.com/purchase/faq/licensing-purchasing) is recommended in order to use the Telerik Blazor AI Coding Assistant without restrictions. Perpetual license holders and trial users can make a [limited number of requests per year](slug:ai-overview#number-of-requests). +#end diff --git a/_contentTemplates/common/get-started.md b/_contentTemplates/common/get-started.md index a59f43f57..eeb3892e8 100644 --- a/_contentTemplates/common/get-started.md +++ b/_contentTemplates/common/get-started.md @@ -208,4 +208,10 @@ This will make the license key available to all Telerik .NET apps that you devel The [Telerik License Key](slug:installation-license-key) article provides additional details on installing and updating your Telerik license key in different scenarios. [Automatic license key maintenance](slug:installation-license-key#automatic-installation) is more effective and recommended in the long run. +#end + +#ai-coding-assistant-ad + +Use the [Telerik AI Coding Assistant](slug:ai-overview) through the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension). These tools help you receive tips and generate code snippets that include Telerik UI for Blazor components and API. + #end \ No newline at end of file diff --git a/ai/copilot-extension.md b/ai/copilot-extension.md index 9ffaa2837..d82d0b07c 100644 --- a/ai/copilot-extension.md +++ b/ai/copilot-extension.md @@ -4,7 +4,7 @@ page_title: Telerik Blazor GitHub Copilot Extension description: Learn how to add and use the Telerik Blazor GitHub Copilot extension as a Blazor AI coding assistant and code generator for better developer productivity. The Telerik Blazor GitHub Copilot extension provides proprietary context about Telerik UI for Blazor to AI-powered software. slug: ai-copilot-extension tags: telerik,blazor,ai -published: False +published: True position: 10 --- @@ -55,15 +55,7 @@ The following list describes how your prompts may look like: ## Number of Requests -> The usage limits below will take place after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests. - -The Telerik Blazor Copilot extension allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing): - -* Perpetual licenses: 50 requests per year -* Subscription licenses: virtually unlimited number of requests with a fair use threshold of 300 requests per day -* Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests. - -> All Telerik AI tools share a single request limit for your Telerik account. For example, the Telerik Copilot extension and the Telerik MCP server both take up from the same usage quota. +@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests) ## See Also diff --git a/ai/mcp-server.md b/ai/mcp-server.md index 2b5fb288a..8f1e365ca 100644 --- a/ai/mcp-server.md +++ b/ai/mcp-server.md @@ -4,7 +4,7 @@ page_title: Telerik Blazor MCP Server description: Learn how to add and use the Telerik Blazor MCP Server as a Blazor AI coding assistant and code generator for better developer productivity. The Telerik Blazor MCP server provides proprietary context about Telerik UI for Blazor to AI-powered software. slug: ai-mcp-server tags: telerik,blazor,ai -published: False +published: True position: 20 --- @@ -34,7 +34,7 @@ Use the documentation of your AI-powered MCP client to add the Telerik MCP serve You also need to add your [Telerik licence key](slug:installation-license-key) as an `env` parameter in the `mcp.json` file. There are two options: * (recommended) Use a `TELERIK_LICENSE_PATH` argument and point to your Telerik license file location. -* Use a `TELERIK_LICENSE_KEY` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary. +* Use a `TELERIK_LICENSE` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary. ### Visual Studio @@ -167,20 +167,13 @@ The following list describes how your prompts may look like: * "Telerik Generate a ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data." * "Telerik Show me sample code for a Blazor Grid with virtual scrolling for the rows and columns." - ## Number of Requests -> The usage limits below will take place after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests. - -The Telerik Blazor MCP Server allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing): +@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests) -* Perpetual licenses: 50 requests per year -* Subscription licenses: virtually unlimited number of requests with a fair use threshold of 300 requests per day -* Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests. +## Connect to Local AI Model -> One prompt may trigger several requests to the MCP server, depending on the complexity. -> -> All Telerik AI tools share a single request limit for your Telerik account. For example, the Telerik MCP server and the Telerik Copilot extension both take up from the same usage quota. +You can use the Telerik Blazor MCP server with local large language models (LLM). For example, run your local model through [Ollama](https://ollama.com) and use a third-party package such as [MCP-LLM Bridge](https://github.com/patruff/ollama-mcp-bridge) to connect the model to the Telerik MCP server. This will allow you to use the Telerik AI Coding Assistant without a cloud-based AI model. ## See Also diff --git a/ai/overview.md b/ai/overview.md index 75828e8e1..9a1fb1f9e 100644 --- a/ai/overview.md +++ b/ai/overview.md @@ -4,7 +4,7 @@ page_title: Telerik Blazor AI Tooling Overview description: Learn about the AI-powered developer tools that integrate with your IDE or code editor for greater productivity and enhanced developer experience. slug: ai-overview tags: telerik,blazor,ai -published: False +published: True position: 1 --- @@ -19,8 +19,8 @@ The Telerik AI Coding Assistant is integrated in: The major differences between these tools are: -* The MCP server is more powerful and can handle more complex prompts that require several requests to the AI model. An MCP-enabled client like GitHub Copilot in **Agent** mode can make changes to your app and rebuild it to verify the AI suggestions. -* The responses of the GitHub Copilot extension may contain shorter or partial code snippets and more explanations how to accomplish the task. When using the MCP server, the AI response is mostly code. +* The MCP server is more powerful and can handle more complex prompts that require several requests to the AI model. An MCP-enabled client like Cursor or GitHub Copilot in **Agent** mode can directly suggest changes to your app and even rebuild it to verify the new AI generated code. +* The responses of the GitHub Copilot extension may contain more explanations how to accomplish the task, and shorter or partial code snippets. When using the MCP server, the AI response is mostly code. ## Getting Started @@ -29,11 +29,32 @@ To use the Telerik Blazor AI Coding Assistant, you need: * A [Telerik user account](https://www.telerik.com/account/). * An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui). * A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started). +* @[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests) -> A Telerik [Subscription license](https://www.telerik.com/purchase/faq/licensing-purchasing) is recommended in order to use the Telerik Blazor AI Coding Assistant: -> -> * Subscription license holders can make an unlimited number of requests. -> * Perpetual license holders and trial users have a limited number of requests per year. +## Number of Requests + +> The usage limits below will take place after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests. + +The Telerik Blazor AI Conding Assistant allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing): + +* Perpetual licenses: 50 requests per year +* Subscription licenses: virtually unlimited number of requests with a fair use threshold of 300 requests per day +* Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests. + +> All Telerik AI tools share a single request limit for your Telerik account. For example, the [Telerik Copilot extension](slug:ai-copilot-extension) and the [Telerik MCP server](slug:ai-mcp-server) both take up from the same usage quota. +> When using the Telerik MCP server, one prompt may trigger several requests, depending on the prompt complexity. + +## Privacy + +The Telerik Blazor AI Coding Assistant operates under the following conditions: + +* The Assistant does not have access to your workspace and application code. Note that when using the Telerik MCP server (or any other MCP server), the LLM generates parameters for the MCP server request, which may include parts of your application code. +* The Assistant does not use your prompts to train Telerik AI models. +* The Assistant does not generate the actual responses and has no access to these responses. The Assistant only provides a better context that helps your selected model (for example, GPT, Gemini, Claude) provide better responses. +* The Assistant does not associate your prompts to your Telerik user account. Your prompts and generated context are anonymized and stored for statistical and troubleshooting purposes. +* The Assistant stores metrics about how often and how much you use it in order to ensure compliance with the [allowed number of requests that correspond to your current license](#number-of-requests). + +Make sure to also get familiar with the terms and privacy policy of your selected AI model and AI client. ## Next Steps diff --git a/components/autocomplete/data-bind.md b/components/autocomplete/data-bind.md index 75b85c3d0..f380ecd47 100644 --- a/components/autocomplete/data-bind.md +++ b/components/autocomplete/data-bind.md @@ -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`. - -
-````RAZOR String -@*Reference when binding to a string collection*@ - - - -@code{ - private TelerikAutoComplete AutoCompleteRef { get; set; } - - private string AutoCompleteValue { get; set; } - - private List Suggestions { get; set; } = new List { "first", "second", "third" }; -} -```` -````RAZOR Model -@*Reference when binding to a model collection*@ - - - -@code{ - private TelerikAutoComplete AutoCompleteRef { get; set; } - - private string AutoCompleteValue { get; set; } - - private List Suggestions { get; set; } = new List - { - 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. diff --git a/components/autocomplete/overview.md b/components/autocomplete/overview.md index acbe6b685..92d6411f5 100644 --- a/components/autocomplete/overview.md +++ b/components/autocomplete/overview.md @@ -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) diff --git a/components/combobox/data-bind.md b/components/combobox/data-bind.md index f8e07d49f..1a236bedf 100644 --- a/components/combobox/data-bind.md +++ b/components/combobox/data-bind.md @@ -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 @@ -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 by the app, because the component will not change it. ### Value Out of Range @@ -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`. - -
-````RAZOR String -@*ComboBox reference when binding to a string collection*@ - - - - -@code { - private TelerikComboBox? ComboBoxRef { get; set; } - - private List ComboBoxData = new List() { "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*@ - - - - -@code { - private TelerikComboBox? ComboBoxRef { get; set; } - - private IEnumerable 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. diff --git a/components/combobox/overview.md b/components/combobox/overview.md index 4dfa3234a..da2113065 100644 --- a/components/combobox/overview.md +++ b/components/combobox/overview.md @@ -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) diff --git a/components/dropdownlist/data-bind.md b/components/dropdownlist/data-bind.md index f3a2d27f9..35c7249a4 100644 --- a/components/dropdownlist/data-bind.md +++ b/components/dropdownlist/data-bind.md @@ -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 @@ -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 by the app, because the component will not change it. ### Value Out of Range @@ -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`. - -
-````RAZOR String - - -@code { - private TelerikDropDownList? DropDownListRef { get; set; } - - private List DropDownListData = new List() { "first", "second", "third" }; - - private string DropDownListValue { get; set; } = string.Empty; - - protected override void OnInitialized() - { - DropDownListValue = "second"; - } -} -```` -````RAZOR Model - - -@code { - private TelerikDropDownList? DropDownListRef { get; set; } - - private int DropDownListValue { get; set; } - - private IEnumerable 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 diff --git a/components/dropdownlist/overview.md b/components/dropdownlist/overview.md index 561965a5a..e40d20d5d 100644 --- a/components/dropdownlist/overview.md +++ b/components/dropdownlist/overview.md @@ -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) diff --git a/components/editor/ai-integration/integration-with-inline-prompt.md b/components/editor/ai-integration/integration-with-inline-prompt.md index 7b00ac426..39ef15a80 100644 --- a/components/editor/ai-integration/integration-with-inline-prompt.md +++ b/components/editor/ai-integration/integration-with-inline-prompt.md @@ -64,7 +64,7 @@ The Editor allows customizing some of the integrated Inline Prompt's settings. F | Parameter | Type and Default value | Description | |-----------|------------------------|-------------| -| `SystemPrompt` | `string` | The system prompt that will be passed to the integrated Inline Prompt. If not provided, the Inline Prompt will use its [default `SystemPrompt` value](slug:Inline Prompt-overview#Inline Prompt-parameters). | +| `SystemPrompt` | `string` | The system prompt that will be passed to the integrated Inline Prompt. If not provided, the Inline Prompt will use its [default `SystemPrompt` value](slug:aiprompt-overview#aiprompt-parameters). | | `Commands` | `List` | The commands displayed within the Commands view. If not set the Inline Prompt will use the [default predefined commands](slug:editor-ai-integration-overview#ai-integration-capabilities). | >caption Customizing the Inline Prompt in the Editor diff --git a/components/form/formgroups.md b/components/form/formgroups.md index 5ff7da282..5919bfc08 100644 --- a/components/form/formgroups.md +++ b/components/form/formgroups.md @@ -25,7 +25,7 @@ The `FormGroup` tag exposes the following parameters: * `Columns` - `int` - defines the number of columns in the group. -* `ColumnSpacing` - `string` - defines the space between the editors in the group. +* `ColumnSpacing` - `string` - defines the horizontal space between the editors in the group. ## Example - Organize FormItems into Groups @@ -51,7 +51,7 @@ You can organize some FormItems into logical groups. You can configure the label - + diff --git a/components/form/overview.md b/components/form/overview.md index 57643d171..989fe67a8 100644 --- a/components/form/overview.md +++ b/components/form/overview.md @@ -207,7 +207,7 @@ The [Blazor Form](https://demos.telerik.com/blazor-ui/form/overview) exposes mul |-----------|------------------------|-------------| | `ButtonsLayout` | `FormButtonsLayout` enum
(`Start`) | Determines the position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). | | `Columns` | `int` | Defines the number of columns in the Form. See the [Columns](slug:form-columns) article for more information | -| `ColumnSpacing` | `string` | Defines the amout of vertical space between the Columns. See the [Columns](slug:form-columns) article for more information. | +| `ColumnSpacing` | `string` | Defines the amout of horizontal space between the Columns. See the [Columns](slug:form-columns) article for more information. | | `Orientation` | `FormOrientation` enum
(`Vertical`) | Determines the position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. | ### Styling and Appearance diff --git a/components/multicolumncombobox/data-bind.md b/components/multicolumncombobox/data-bind.md index fa4826e31..2ccbc89eb 100644 --- a/components/multicolumncombobox/data-bind.md +++ b/components/multicolumncombobox/data-bind.md @@ -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). diff --git a/components/multicolumncombobox/overview.md b/components/multicolumncombobox/overview.md index 313e883c9..ea6b2b9cd 100644 --- a/components/multicolumncombobox/overview.md +++ b/components/multicolumncombobox/overview.md @@ -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 | | --- | --- | diff --git a/components/multiselect/data-bind.md b/components/multiselect/data-bind.md index 6000ec15c..d21e14201 100644 --- a/components/multiselect/data-bind.md +++ b/components/multiselect/data-bind.md @@ -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`. - -
-````RAZOR String -@*Reference type when binding to a string collection*@ - - - -@code { - private TelerikMultiSelect? MultiSelectRef { get; set; } - - private List MultiSelectValue { get; set; } = new(); - - private List MultiSelectData { get; set; } = new List { "first", "second", "third" }; -} -```` -````RAZOR Model -@*Reference when binding to a model collection*@ - - - -@code { - private TelerikMultiSelect? MultiSelectRef { get; set; } - - private List MultiSelectValue { get; set; } = new(); - - private List MultiSelectData { get; set; } = new List() - { - 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 diff --git a/components/multiselect/overview.md b/components/multiselect/overview.md index f95842f7f..29c438c9e 100644 --- a/components/multiselect/overview.md +++ b/components/multiselect/overview.md @@ -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) diff --git a/components/panelbar/data-binding/overview.md b/components/panelbar/data-binding/overview.md index b3d735677..9381161ec 100644 --- a/components/panelbar/data-binding/overview.md +++ b/components/panelbar/data-binding/overview.md @@ -66,7 +66,7 @@ Each `PanelBarBinding` tag exposes the following properties that refer to item p * ItemsField => Items -* Level - this is used for defining [different bindings for different levels](#multiple-level-bindings). If no level is set, the bindings are taken as default for any level that does not have explicit settings. You should have one `TelerikPanelBarBinding` without a level. +* Level—this is used for defining [custom field bindings](#custom-field-bindings) or [different bindings for different levels](#multiple-level-bindings). If no level is set, the bindings are taken as default for any level that does not have explicit settings. You must have one `TelerikPanelBarBinding` without a level to set the default bindings. >tip There are default values for the field names. If your model names match the defaults, you don't have to define them in the bindings settings. @@ -182,6 +182,15 @@ The following **Example** shows how to define simple binding to match item field ![Blazor PanelBar Data Binding](../images/panelbar-data-binding-basic-example.png) +### Custom Field Bindings + +If you are using custom field names, you must ensure their binding for each level. Otherwise, the PanelBar will not render items where the field bindings are missing. + +For that purpose, you must do either of the following: + +* Add one `TelerikPanelBarBinding` without a level to set the default bindings. +* Add `TelerikPanelBarBinding` for each level where you explicitly set the field bindings to your custom fields. + ### Multiple Level Bindings You can define different binding settings for the different levels of nodes in the PanelBar. With this, the children of a node can consume a different field than their parent, and this may make your application more flexible. If you use [hierarchical data binding](slug:panelbar-data-binding-hierarchical), the children can even use a different field or model from their parent. diff --git a/components/panelbar/templates/header.md b/components/panelbar/templates/header.md index 80a45dd9e..accc52ec2 100644 --- a/components/panelbar/templates/header.md +++ b/components/panelbar/templates/header.md @@ -13,9 +13,9 @@ position: 5 You can control and customize the rendering of the header items in the PanelBar by using the `HeaderTemplate`. It provides a `context` object that you can cast to the type that the PanelBar is bound to. -The `HeaderTemplate` of a level is defined under the `PanelBarBinding` tag. +The `HeaderTemplate` of a level is defined under the `PanelBarBinding` tag. Set the `Level` parameter of the `PanelBarBinding` to specify the level the `HeaderTemplate` must be applied to. -If no levels are defined the `HeaderTemplate` will apply to the entire data. +If the `Level` parameter of the `PanelBarBinding` is not set, the `HeaderTemplate` will apply to the entire data. >caption Use HeaderTemplate to customize the rendering of the headers in the PanelBar @@ -26,7 +26,7 @@ If no levels are defined the `HeaderTemplate` will apply to the entire data. - + @{ var item = context as PanelBarItem; @@ -42,8 +42,9 @@ If no levels are defined the `HeaderTemplate` will apply to the entire data. @code { - public List Items { get; set; } - public IEnumerable ExpandedItems { get; set; } = new List(); + private List Items { get; set; } + + private IEnumerable ExpandedItems { get; set; } = new List(); public class PanelBarItem { @@ -60,50 +61,50 @@ If no levels are defined the `HeaderTemplate` will apply to the entire data. List items = new List(); items.Add(new PanelBarItem() - { - Id = 1, - Text = "Project", - ParentId = null, - HasChildren = false, - Icon = SvgIcon.Folder, - Url = "projectURL.url" - }); + { + Id = 1, + Text = "Project", + ParentId = null, + HasChildren = false, + Icon = SvgIcon.Folder, + Url = "projectURL.url" + }); items.Add(new PanelBarItem() - { - Id = 2, - Text = "Implementation", - ParentId = null, - HasChildren = true, - Icon = SvgIcon.Code - }); + { + Id = 2, + Text = "Implementation", + ParentId = null, + HasChildren = true, + Icon = SvgIcon.Code + }); items.Add(new PanelBarItem() - { - Id = 3, - Text = "C#", - ParentId = 2, - HasChildren = false, - Icon = SvgIcon.Cs - }); + { + Id = 3, + Text = "C#", + ParentId = 2, + HasChildren = false, + Icon = SvgIcon.Cs + }); items.Add(new PanelBarItem() - { - Id = 4, - Text = "HTML 5", - ParentId = 2, - HasChildren = false, - Icon = SvgIcon.Html5 - }); + { + Id = 4, + Text = "HTML 5", + ParentId = 2, + HasChildren = false, + Icon = SvgIcon.Html5 + }); items.Add(new PanelBarItem() - { - Id = 5, - Text = "CSS", - ParentId = 2, - HasChildren = false, - Icon = SvgIcon.Css - }); + { + Id = 5, + Text = "CSS", + ParentId = 2, + HasChildren = false, + Icon = SvgIcon.Css + }); return items; } diff --git a/components/tabstrip/events.md b/components/tabstrip/events.md index 2753e31fd..4f29d6340 100644 --- a/components/tabstrip/events.md +++ b/components/tabstrip/events.md @@ -17,19 +17,21 @@ This article explains the events available in the Telerik TabStrip for Blazor: ## ActiveTabIdChanged -The `ActiveTabIdChanged` event fires when the user changes the active tab. The event handler receives the new tab ID of type `string` as an argument. This event is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-tabs-collection). +The `ActiveTabIdChanged` event fires when the user changes the active tab. The event handler receives the new tab ID of type `string` as an argument. If the `Id` parameter of the `TabStripTab` is not set, the component will generate one automatically. + +The `ActiveTabIdChanged` event is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-tabs-collection). >caption Handle the tab ID selection changed event ````RAZOR - + First tab content. Click through the tabs. - + Second tab content. - + Third tab content. @@ -37,10 +39,11 @@ The `ActiveTabIdChanged` event fires when the user changes the active tab. The e @Result @code { - private string Result { get; set; } + private string Result { get; set; } = string.Empty; + private void HandleTabIdChange(string tabId) { - Result = $"Current tab ID is {tabId}"; + Result = $"The current tab ID is {tabId}"; } } ```` diff --git a/components/tabstrip/tabs-collection.md b/components/tabstrip/tabs-collection.md index 77d740a82..49d4ece1c 100644 --- a/components/tabstrip/tabs-collection.md +++ b/components/tabstrip/tabs-collection.md @@ -27,7 +27,7 @@ To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`. @{ foreach (var tab in Tabs) { - + @tab.Title @@ -54,11 +54,11 @@ To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`. private string ActiveTabId { get; set; } private List Tabs { get; set; } = new List -{ - new Tab { Id = "home", Title = "🏠 Home", Visible = true, Disabled = false }, - new Tab { Id = "profile", Title = "👤 Profile", Visible = true, Disabled = false }, - new Tab { Id = "settings", Title = "⚙️ Settings", Visible = true, Disabled = false } -}; + { + new Tab { Id = "home", Title = "🏠 Home", Visible = true, Disabled = false }, + new Tab { Id = "profile", Title = "👤 Profile", Visible = true, Disabled = false }, + new Tab { Id = "settings", Title = "⚙️ Settings", Visible = true, Disabled = false } + }; public class Tab { diff --git a/components/timepicker/overview.md b/components/timepicker/overview.md index 9c1914845..d2d0bc8de 100644 --- a/components/timepicker/overview.md +++ b/components/timepicker/overview.md @@ -88,6 +88,7 @@ The Blazor Time Picker component provides various parameters that allow you to c | `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. | | `Format` | `string`
(`ShortTimePattern`) | The format of the TimePicker's DateInput. The default value depends on `CultureInfo.CurrentCulture`. Read more at [Supported date formats by the DateInput](slug:components/dateinput/supported-formats). Note that format specifiers for non-time portions will be editable only in the input and will not have a representation in the Time Picker dropdown. | | `Id` | `string` | Renders as the `id` attribute on the `` element, so you can attach a `