This is a migrated thread and some comments may be shown as answers.

Bind Value After Creating a surrounding component on top of drop down list or combo box

2 Answers 514 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
Iron
Iron
John asked on 22 Apr 2021, 02:33 PM

I am trying to create a reusable component which binds to a data service where I pass the binded value to the parent and get the data from the Telerik Drop List / Combo box, etc. What am I missing in regards to getting this data back up the the parent model? When I submit, it provides a value of null. #StillLearning

Code example concept:

Razor:

@inherits ActiveProviderTypeDropDownListBase 

<TelerikComboBox Data="@ProviderTypes"
                 OnRead="@OnReadAsync"
                 TValue="string"
                 TItem="string"
                 AllowCustom="true"
                 @bind-Value="@BindValue"
                 Width="100%" />

Base:

public class ActiveProviderTypeDropDownListBase : ComponentBase
    {
        [Inject] ProviderDataService ProviderDataService { get; set; }
        [Parameter] public string Width { get; set; }
        [Parameter] public string BindValue { get;set; }

        public List<string> ProviderTypes { get; set; }

        public async Task OnReadAsync()
        {
            ProviderTypes = await ProviderDataService.GetActiveProviderTypesAsync();
        }
    }

 

Reusable Component For Elsewhere Elsewhere:

<ActiveProviderTypeDropDownList Width="100%"
                                                                        BindValue="DialogBaseService.ValueToCreate.ProviderTypeName"

2 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 22 Apr 2021, 06:26 PM

Hello John,

I recommend you start by reviewing this article on the core concepts of value and data binding: https://docs.telerik.com/blazor-ui/getting-started/value-vs-data-binding. What the provided snippet is missing is the two-way binding of values.

Put shortly, you need something like this in the dropdown component

 [Parameter] public string BindValue { get;set; }
 [Parameter] public EventCallback<string> BindValueChanged { get;set; }

and so you can use the following in the parent component

                                                                       

<ActiveProviderTypeDropDownList Width="100%"
@bind-BindValue="DialogBaseService.ValueToCreate.ProviderTypeName" />

And the last bit is that you will need to raise the BindValueChanged as needed, when the value in the child component changes, or at another event suitable for your case.

You can find more details and examples in the MSDN documentation - the Binding with component parameters section of the ASP.NET Core Blazor data binding article provides the core information.

Regards,
Marin Bratanov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

0
John
Top achievements
Rank 1
Iron
Iron
answered on 23 Apr 2021, 01:56 AM
Thanks for guidance.
Tags
DropDownList
Asked by
John
Top achievements
Rank 1
Iron
Iron
Answers by
Marin Bratanov
Telerik team
John
Top achievements
Rank 1
Iron
Iron
Share this question
or