diff --git a/knowledge-base/common-extend-inherit-wrap-reuse-telerik-blazor-components.md b/knowledge-base/common-extend-inherit-wrap-reuse-telerik-blazor-components.md index 765f92349..a48522d3b 100644 --- a/knowledge-base/common-extend-inherit-wrap-reuse-telerik-blazor-components.md +++ b/knowledge-base/common-extend-inherit-wrap-reuse-telerik-blazor-components.md @@ -49,7 +49,7 @@ On the other hand, neither option allows changing the internal HTML rendering of ### Wrap Telerik Components -This approach allows you to add additional markup or other components next to the Telerik component. +This approach allows you to add additional markup or other components next to the Telerik component. You can also define custom events for the component, which wraps the Telerik component. 1. Add the Telerik component to a separate `.razor` file, for example, `MyReusableComponent.razor`. 1. Implement the desired `MyReusableComponent` parameters and set the required parameters of the Telerik component. @@ -89,9 +89,18 @@ Adjust the `YourAppName.BaseComponents` namespace in `Home.razor` and `Inherited Class="my-combobox" Filterable="true" FilterOperator="@StringFilterOperator.Contains" - Width="200px" /> - -

Inherited ComboBox with additional API and default property values

+ Width="240px"> + + + + + + + + +

Inherited ComboBox with additional parameters and default property values

+ CustomParameter="inherited foo"> + + + + + + + @InheritedComboBoxCustomProperty -

Reusable ComboBox with additional rendering, API and default parameter values

+

Reusable ComboBox with additional rendering and parameters, custom event, and default parameter values

+ ValueField="@nameof(ListItem.Id)" + OnSuffixTemplateClick="@OnComboBoxSuffixClick" + Label="Select Item" + CustomParameter="reusable foo"> + + + + @ReusableComboBoxCustomProperty @@ -131,6 +156,9 @@ Adjust the `YourAppName.BaseComponents` namespace in `Home.razor` and `Inherited private string InheritedComboBoxCustomProperty { get; set; } = "Get Custom ComboBox Property"; private string ReusableComboBoxCustomProperty { get; set; } = "Get Custom ComboBox Property"; + [CascadingParameter] + public DialogFactory? TelerikDialogs { get; set; } + private void OnInheritedButtonClick() { InheritedComboBoxCustomProperty = InheritedComboBoxRef?.CustomProperty ?? "Error"; @@ -141,6 +169,11 @@ Adjust the `YourAppName.BaseComponents` namespace in `Home.razor` and `Inherited ReusableComboBoxCustomProperty = ReusableComboBoxRef?.CustomProperty ?? "Error"; } + private async Task OnComboBoxSuffixClick() + { + await TelerikDialogs!.AlertAsync("SuffixTemplate Button Click fired"); + } + protected override void OnInitialized() { ListItems = new List(); @@ -172,7 +205,7 @@ Adjust the `YourAppName.BaseComponents` namespace in `Home.razor` and `Inherited @typeparam TItem @typeparam TValue - + + Width="240px" + ComboBoxPrefixTemplate="@PrefixTemplate"> + + + + @code { @@ -213,13 +253,22 @@ Adjust the `YourAppName.BaseComponents` namespace in `Home.razor` and `Inherited [Parameter] public string Label { get; set; } = "Select Value"; + [Parameter] + public string CustomParameter { get; set; } = string.Empty; + + [Parameter] + public RenderFragment? PrefixTemplate { get; set; } + + [Parameter] + public EventCallback OnSuffixTemplateClick { get; set; } + private readonly string Id = $"id-{Guid.NewGuid()}"; public string CustomProperty { get { - return $"Custom Reusable Property {DateTime.Now.Millisecond}"; + return $"{CustomParameter} {DateTime.Now.Millisecond}"; } } @@ -232,6 +281,14 @@ Adjust the `YourAppName.BaseComponents` namespace in `Home.razor` and `Inherited await ValueChanged.InvokeAsync(Value); } } + + private async Task OnSuffixButtonClick() + { + if (OnSuffixTemplateClick.HasDelegate) + { + await OnSuffixTemplateClick.InvokeAsync(); + } + } } ```` ````C# InheritedComboBox.cs @@ -257,7 +314,7 @@ namespace YourAppName.BaseComponents { get { - return $"Custom Inherited Property {DateTime.Now.Millisecond}"; + return $"{CustomParameter} {DateTime.Now.Millisecond}"; } }