Radzen Dropdown does not return selected items

[pouria]

Hello guys. I have created an asp.net core application which in, I have used the RadZen dropdown. everything is ok and the component is rendered successfully but when the user clicks on the item and selects them, I am not able to get the selected values. Here is a brief of my code :

this is the razor file in which the RadZen dropdown exists there.

@using AutoMapper
@using AutoMapper.QueryableExtensions
@using HivadSystem.Resources
@using Radzen
@using Radzen.Blazor
@using HivadSystem.ViewModel.Components.MultiSelect
@using HivadSystem.ViewModel.BasicInfo.Location.City;

@inject HivadSystem.ServiceLayer.Interfaces.BasicInfo.Locations.ICityService _cityService
@inject IMapper _mapper;

@code {
    [Parameter]
    public List<CityListVm> SelectedValues { get; set; } = new List<CityListVm>();
    [Parameter]
    public List<CityListVm> Cities { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        Cities = _cityService.GetAll().ProjectTo<HivadSystem.ViewModel.BasicInfo.Location.City.CityListVm>(_mapper.ConfigurationProvider).ToList();
    }
}

<RadzenDropDown @bind-Value="SelectedValues"
                Data="@Cities"
                Name="SelectedValues"
                TextProperty="LocalizedName"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                FilterOperator="StringFilterOperator.StartsWith"
                AllowFiltering="true"
                TValue="List<CityListVm>"
                Multiple="true"
                AllowClear="true"
                Placeholder="@Resource.SelectPlease"
                Chips="true"
                MaxSelectedLabels="4"
                class="form-control" />

                <div>Selected values: @string.Join(",", SelectedValues.Select(a=>a.Code))</div>

I call it from the .cshtml file in this way:

<component type="typeof(RadZenMultiSelect)" render-mode="Server" param-SelectedValues="@Model.SelectedValues"/>   

The component rendered successfully as you can see in this image:

but when I want to receive the selected items in the form submitting, I receive an empty list of selected values like this :

note: I have checked the SelectedValues here(for demo purposes)

 <div>Selected values: @string.Join(",", SelectedValues.Select(a=>a.Code))</div>

and it shows me every item that the user clicks.

any suggestion?

[Paul_Ruston]

Hi @pouria

Without seeing the the full code, it looks like you may be missing the two-way binding requirements.
Have a look at this - Binding with Component Parameters

Regards

Paul

[pouria]

Unfortunately, the component just accepts @bind-Value for binding selected items not anymore. and I did it, I bonded it exactly with the property that has the [paramater] attribute. I also can get the selected items here <div>Selected values: @string.Join(",", SelectedValues.Select(a=>a.Code))</div> but not in form submitting.

[Paul_Ruston]

Read the bit about about the EventCallback. Yours will be SelectedValuesChanged (by convention). When it changes in the child component, you invoke the parent method through the EventCallback. In this method, you update the local (parent) SelectedValues variable with the callback parameter.
It's the first example in the link I sent you.
[parameter] Year has an EventCallback named YearChanged by convention.

[pouria]

@Paul_Ruston Based on your answer I added this line to my code:

[Parameter]
    public EventCallback<List<int>> InvokeSelectedValues { get; set; }

I also added this method in order to handle value change:

void OnChangeValue(List<int> values)
    {
        InvokeSelectedValues.InvokeAsync(values);
    }

and changed the component to :

<RadzenDropDown ValueChanged="OnChangeValue"
                Data="@Cities"
                Name="SelectedValues"
                TextProperty="LocalizedName"
                ValueProperty="Code"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                FilterOperator="StringFilterOperator.StartsWith"
                AllowFiltering="true"
                TValue="List<int>"
                Multiple="true"
                AllowClear="true"
                Placeholder="@Resource.SelectPlease"
                Chips="true"
                MaxSelectedLabels="4"
                class="form-control" />

but it did not work.

[Paul_Ruston]

Here's an extract from my system

Parent

<WizSelectProduct @bind-Product="product"></WizSelectProduct>

@code {
    ProductExt _product;
    ProductExt product
    {
        get => _product;
        set
        {
            if (value != _product)
            {
                _product = value;
            }
        }
    }
}

Component

<RadzenDataGrid @ref="gridProduct"
                AllowFiltering="true"
                AllowPaging="true"
                AllowSorting="true"
                Data="@products"
                ExpandMode="DataGridExpandMode.Single"
                FilterMode="FilterMode.Advanced"
                PageSize="8"
                PageNumbersCount="3"
                RowSelect="@gridProductRowSelect"
                TItem="ProductExt">
                   e.t.c......


    [Parameter]
    public ProductExt Product { get; set; }

    [Parameter]
    public EventCallback<ProductExt> ProductChanged { get; set; }

    protected async Task gridProductRowSelect(ProductExt args)
    {
        Product = args;
        await ProductChanged.InvokeAsync(Product);
    }

First thing to do is create both the [Parameters] in the component. The EventCallback MUST be called VariableNameChanged, this is the convention. So in my case ProductChanged. In your case SelectedValuesChanged.

You already have the code to Invoke, although you will have to update the name.

In the Parent form, create your variable to hold the value. The "set" code is called whenever the variable is changed, as per normal. This is also what gets called when you Invoke from your component.

To tie it all together, @bind-Product="product" in your component declaration in the parent page. The capitaslized Product after the "bind-" is the [Parameter] in your component. The lowercase "product" is the local variable that we declared in the previous paragraph.

Hope this helps.

Paul